为什么路由在此代码中不起作用?
Why won't the routing work in this code?
这只是一个需要学习的小项目 AngularJS,我在使路由正常工作时遇到了问题。根据我查看过的每个教程,我在这里应该可以工作,但不幸的是,它没有。如果有人能帮助我找到我的问题并帮助我解决它,我将不胜感激。
这是我的索引:
<!DOCTYPE html>
<html ng-app="danApp">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/test.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
查看 1
<h1>View 1</h1>
<br><br><br><br>
<div>
<input type="text" ng-model="nameText" >
<ul>
<li ng-repeat="things in info | filter: nameText | orderBy:'name'">
Name: {{ things.name }} <br> Age: {{ things.age }} <br>
City: {{ things.city }}
<br>
</li>
</ul>
</div>
查看 2
<h1>View 2</h1>
<br><br><br><br>
<div>
<input type="text" ng-model="nameText" >
<ul>
<li ng-repeat="stuff in parents | filter: nameText | orderBy:'name'">
Name: {{ stuff.name }} <br> Age: {{ stuff.age }} <br>
City: {{ stuff.city }}
<br>
</li>
</ul>
</div>
最后,我的模块、控制器和路由代码
"use strict";
var danApp = angular.module('danApp', []);
danApp.controller("danCtrl", function($scope) {
$scope.info = [
{name: 'Daniel', age: '22', city: 'Clarksville'},
{name: 'Derek', age: '19', city: 'Jacksonville'},
{name: 'Emily', age: '18', city: 'Erin'},
{name: 'Denise', age: '27', city: 'Phoenix'},
];
});
danApp.controller("danCtrl2", function($scope) {
$scope.parents = [
{name: 'Lathan', age: '54', city: 'Stewart'},
{name: 'Candy', age: '54', city: 'Stewart'},
{name: 'Christine', age: '43', city: 'Erin'}
];
});
danApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'danCtrl',
templateUrl: 'views/view1.html'
})
.when('/view2',
{
controller: 'danCtrl2',
templateUrl: 'views/view2.html'
})
.otherwise({redirectTo: '/'});
});
问题是您需要包含可以从 Angular website 下载的 angular-route.js
或 angular-route.min.js
脚本。在 index.html 添加脚本:
<script src="Scripts/angular-route.min.js"></script>
然后需要将模块添加到您的模块中:
var danApp = angular.module('danApp', ['ngRoute']);
这只是一个需要学习的小项目 AngularJS,我在使路由正常工作时遇到了问题。根据我查看过的每个教程,我在这里应该可以工作,但不幸的是,它没有。如果有人能帮助我找到我的问题并帮助我解决它,我将不胜感激。
这是我的索引:
<!DOCTYPE html>
<html ng-app="danApp">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/test.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
查看 1
<h1>View 1</h1>
<br><br><br><br>
<div>
<input type="text" ng-model="nameText" >
<ul>
<li ng-repeat="things in info | filter: nameText | orderBy:'name'">
Name: {{ things.name }} <br> Age: {{ things.age }} <br>
City: {{ things.city }}
<br>
</li>
</ul>
</div>
查看 2
<h1>View 2</h1>
<br><br><br><br>
<div>
<input type="text" ng-model="nameText" >
<ul>
<li ng-repeat="stuff in parents | filter: nameText | orderBy:'name'">
Name: {{ stuff.name }} <br> Age: {{ stuff.age }} <br>
City: {{ stuff.city }}
<br>
</li>
</ul>
</div>
最后,我的模块、控制器和路由代码
"use strict";
var danApp = angular.module('danApp', []);
danApp.controller("danCtrl", function($scope) {
$scope.info = [
{name: 'Daniel', age: '22', city: 'Clarksville'},
{name: 'Derek', age: '19', city: 'Jacksonville'},
{name: 'Emily', age: '18', city: 'Erin'},
{name: 'Denise', age: '27', city: 'Phoenix'},
];
});
danApp.controller("danCtrl2", function($scope) {
$scope.parents = [
{name: 'Lathan', age: '54', city: 'Stewart'},
{name: 'Candy', age: '54', city: 'Stewart'},
{name: 'Christine', age: '43', city: 'Erin'}
];
});
danApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'danCtrl',
templateUrl: 'views/view1.html'
})
.when('/view2',
{
controller: 'danCtrl2',
templateUrl: 'views/view2.html'
})
.otherwise({redirectTo: '/'});
});
问题是您需要包含可以从 Angular website 下载的 angular-route.js
或 angular-route.min.js
脚本。在 index.html 添加脚本:
<script src="Scripts/angular-route.min.js"></script>
然后需要将模块添加到您的模块中:
var danApp = angular.module('danApp', ['ngRoute']);