[英]Angular template not loading / routes
I'm learning angular and i'm having an issue with displaying my partial.我正在学习 angular,但在显示我的部分时遇到了问题。 It's probably something trivial that i forgot but i can't seem to find it.这可能是我忘记的微不足道的东西,但我似乎无法找到它。
index.html索引.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>
app.js应用程序.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: '/' });
});
tool-controller.js工具控制器.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() {
};
}]);
and my partial are in tool-new.html and empty.html.我的部分在 tool-new.html 和 empty.html 中。
I don't really see what i'm missing :我真的不明白我错过了什么:
-index.html as layout with ng-view as placeholder for my partial -index.html 作为布局,ng-view 作为我的部分的占位符
basic routes + fall back基本路线 + 回退
my controller linked to my template我的控制器链接到我的模板
html files as my templates with random stuff inside. html 文件作为我的模板,里面有随机的东西。
im running everything on a local webserv我在本地 webserv 上运行所有东西
I've tried adding the controller as a dependency as written in the angulardoc , i've also tried specifically calling the templates in script tags in between my ng-show tags.我已经尝试将控制器添加为 angulardoc 中编写的依赖项,我还尝试在我的 ng-show 标签之间专门调用脚本标签中的模板。
Thanks for the suggestions.感谢您的建议。
Try adding your views like this(just remove '/' at the beginning of the view name):尝试添加这样的视图(只需删除视图名称开头的“/”):
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: '/' });
});
And also remove [] from tool-controller.js并从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() {
};
}]);
您在 html 中缺少控制器的名称,即 toolController 也切换到您的文件的 javascript 命名约定,您将更容易编码。您在 html 中的实际代码应该有 ng-controller="toolController" 应该放置在您的 div 标签上以加载控制器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.