2017-04-02 2 views
-1

Ich versuche Angular lernen, aber stecken mit dem Routing-Problem. Ich habe versucht, andere Fragen zu sehen, konnte aber keine Antwort finden.Nicht umleiten der Seite mit Winkelrouting

Dies ist mein Index-Seite

<!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> 

Die Frage des Routing-das ist, wenn ich den view2 Link klicken, um es nicht den Weg zum View2.html Seite. Wie soll ich es beheben?

Die Ansicht1 Seite

<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> 

Und view 2 Seite

<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> 

einmal auf die Bilder überprüfen Sie.

Normalansicht der Seite: https://s15.postimg.org/3jrg76nsb/image.png

nach view2 klicken: https://s7.postimg.org/7xazbqqij/image.png

+0

'View 2' –

Antwort

2

Ihre view2 innerhalb des view1.html der Name der Route sein sollte

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

DEMO

1

aktualisieren href auf Namen Route

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