我想學習Angular,但堅持路由問題。我試過看其他問題,但找不到答案。無法使用角度路由重定向頁面
這是我的索引頁
<!DOCTYPE html>
<html data-ng-app = 'myFirstApp'>
<head>
<title>View</title>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script>
var demoApp = angular.module('myFirstApp', ['ngRoute']);
demoApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/view1', {
templateUrl: 'demoPartials/view1.html',
controller: 'SimpleController'
})
.when('/view2', {
templateUrl: 'demoPartials/view2.html',
controller: 'SimpleController'
})
.otherwise({redirectTo: '/view1'});
}]);
demoApp.controller('SimpleController', function($scope){
$scope.customers = [
{name:'A F', city:'M'},
{name:'D D', city:'B'},
{name:'S J', city:'I'}
];
$scope.addCustomer = function(){
$scope.cutomers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
}
);
};
});
</script>
</body>
</html>
路由的問題是,每當我點擊視圖2鏈接它不路由到View2.html頁面。我應該如何解決它?
的視圖1頁
<div class="container">
<h2>View 1</h2>
Name:
<br>
<input type="text" data-ng-model="filter.name">
<br>
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
<br>
Customer Name: <br>
<input type="text" data-ng-model="newCustomer.name">
<br>
Customer City: <br>
<input type="text" data-ng-model="newCustomer.city">
<br>
<button data-ng-click="addCustomer()">Add Cutomer</button>
<br>
<a href="#/view2.html">View 2</a>
</div>
,並查看2頁
<div class="container">
<h2>View 2</h2>
City:
<br>
<input type="text" data-ng-model="city">
<br>
<ul>
<li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
不要在圖像檢查一次。
普通頁面的視圖:https://s15.postimg.org/3jrg76nsb/image.png
單擊視圖2後:https://s7.postimg.org/7xazbqqij/image.png
'View 2' –