gpt4 book ai didi

javascript - Angular 模板未加载/路由

转载 作者:行者123 更新时间:2023-11-27 23:38:37 24 4
gpt4 key购买 nike

我正在学习 Angular,但在显示我的部分时遇到了问题。这可能是我忘记的微不足道的东西,但我似乎找不到它。

index.html

    <!DOCTYPE html>
<html ng-app="myTool">
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="tool-controller.js"></script>
</head>

<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img alt="myTool" src="/templogo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ng-href="#/dashboard">DashBoard</a></li>
<li><a ng-href="#/new">New</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="#">Logout </a> </li>
</ul>
</div>
</div>
</nav>
<div ng-view>
</div>
</div>

</body>
</html>

应用程序.js

    angular.module('myTool',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/new', {
templateUrl: '/tool-new.html',
controller:'ToolController',
controllerAs: "tool"
})
.when('/dashboard', {
templateUrl: '/empty.html'
})
.when('/', {
templateUrl: '/index.html'
})
.otherwise({ redirectTo: '/' });
});

工具 Controller .js

    angular.module('myTool', [])
.controller('ToolController',['$scope', function($scope) {
$scope.list = [];
$scope.tool = {};
$scope.submit = function() {
$scope.list.push(this.tool);
$scope.succes = 'sent';
};
$scope.search = function() {
};
}]);

我的部分在 tool-new.html 和 empty.html 中。

我真的不明白我错过了什么:

-index.html 作为布局,ng-view 作为我部分的占位符

  • 基本路线+回退

  • 我的 Controller 链接到我的模板

  • html 文件作为我的模板,里面有随机的东西。

  • 我在本地 webserv 上运行一切

我已经尝试将 Controller 添加为 angulardoc 中所写的依赖项,我还尝试在我的 ng-show 标签之间的脚本标签中专门调用模板。

感谢您的建议。

最佳答案

尝试像这样添加您的 View (只需删除 View 名称开头的“/”):

angular.module('myTool',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/new', {
templateUrl: 'tool-new.html',
controller:'ToolController',
controllerAs: "tool"
})
.when('/dashboard', {
templateUrl: 'empty.html'
})
.when('/', {
templateUrl: 'index.html'
})
.otherwise({ redirectTo: '/' });
});

同时从 tool-controller.js 中删除 []

angular.module('myTool')
.controller('ToolController',['$scope', function($scope) {
$scope.list = [];
$scope.tool = {};
$scope.submit = function() {
$scope.list.push(this.tool);
$scope.succes = 'sent';
};
$scope.search = function() {
};
}]);

关于javascript - Angular 模板未加载/路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32673431/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com