我正在尝试使用 angualrjs + ngRoute 创建一个简单的 View 。
为什么它对我不起作用？？？
请问谁可以看看我的 Plunker example ，并向我解释我做错了什么？
我的index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Route training</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main_container">
<div class="inner" ng-app="app">
<div class="container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
</div>
</div>
<div class="inner" ng-app="views">
<h3>Views Menu</h3>
<ul>
<li><a href="index.html">Back to HOME</a></li>
<li><a href="#/developers">Our Developers</a></li>
<li><a href="#/designers">Our Designers</a></li>
</ul>
<div ng-view></div>
</div>
</div>
</body>
</html>
这是app.js:
var app = angular.module('app', []);
var views = angular.module('views', ['ngRoute']);
views.config(function($routeProvider, $locationProvider){
$routeProvider.
when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
$locationProvider.html5Mode(true);
});
app.controller('MainController', function($scope) {
$scope.text = "Hello World!!!!";
});
views.controller('DevCtrl', function($scope) {
$scope.developers = [
{"name":"John", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Peter", "family":"Jones"},
{"name":"Alex", "family":"Volkov"},
{"name":"Yaniv", "family":"Smith"},
]
});
views.controller('DesignCtrl', function($scope) {
$scope.designers = [
{"name":"Inna", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Yafit", "family":"Jones"}
]
});
设计.html:
<div id="designers" ng-controller="DesignCtrl">
<h3>Designers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="d in designers">
<td>{{d.name}}</td>
<td>{{d.family}}</td>
</tr>
</table>
</div>
和 dev.html
<div id="developers" ng-controller="DevCtrl">
<h3>Developers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="dev in developers">
<td>{{dev.name}}</td>
<td>{{dev.family}}</td>
</tr>
</table>
</div>
谢谢
最佳答案
问题是 ng-app 的使用不正确。只需为您的应用程序声明一次 ng-app，通常在 html 元素上。
然后将其他模块声明为主模块的依赖项。
我将 ng-app 声明放在 html 标签上，并将 ng-routing 放入应用程序模块中，从而摆脱了 View 模块。
http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: '/index' });
// $locationProvider.html5Mode(true);
});
<html ng-app="app">
您还可以将 View 逻辑放在单独的模块中，但通常您也会将其放在不同的文件中。
html5 模式被禁用，因为它触发了一个错误(要使其工作有点棘手)。
注意:实际上可以通过手动引导来使用多个 ng-app，但除非你有充分的理由，否则你真的不应该这样做。
关于Angularjs ng-view 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27259505/