javascript Angularjs ng-view 不显示数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24351902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs ng-view not showing data
提问by Shuvro
I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
我正在通过 AngularJS 教程从 Tuts+ Easier JavaScript Apps 学习 Angularjs。现在我在他们讨论使用 ng-view 的 Routing Primer 的部分。我试图在索引页面的 ng-view 中显示列表页面内容。出于某种原因，当我加载 index.html 时没有显示任何内容。我从搜索中发现，从 angular 1.2.0 开始，ngRoute 已移至其自己的模块。我必须单独加载它并声明依赖项。但我仍然无法从我的列表页面显示任何内容。
index.html
索引.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
列表.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
<a href="#">{{contact.name}}</a>: {{contact.number}}
</li>
</ul>
app.js
应用程序.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
回答by Dalorzo
Remove the ng-controllerfrom the div like this:
ng-controller像这样从 div 中删除：
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwiseto the main configuration like: otherwise({ redirectTo: '/'});
要使“未命中路由”无效，请将其添加otherwise到主要配置中，例如： otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
