2017-04-02 87 views
-1

我想學習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

+0

'View 2' –

回答

2

你的view1.html內視圖2應該是路由的名稱

<a href="#/view2">View 2</a> 

DEMO

1

更新href命名路線的

<a href="#/view2">View 2</a>