Угловые маршруты, не дающие мне выхода

Почему мои маршруты не работают?Угловые маршруты, не дающие мне выхода

Я уверен, что мой код верен, но ничего не происходит, когда я пытаюсь запустить его, почему маршруты не маршрутизируют файлы?

это мой основной код файла

routes.html

<!DOCTYPE html> 
<html data-ng-app="MyApp"> 
    <head> 
     <title>Routes</title> 

    </head> 
    <body> 

     <div > 
      <!-- my views --> 
      <div data-ng-view=""></div> 
     </div> 

     <a href="#/view1">view 1</a> 
     <a href="#/view2">view 2</a> 

     <!-- angular --> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 

     <!-- routes --> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 


     <!-- scope --> 
     <script> 
     var myApp = angular.module("MyApp",[]); 

     // define my routes 
     myApp.config(function($routeProvider){ 
     $routeProvider.when('/', 
      { 
       templateUrl: 'view1.html', 
       controller: 'SimpleController' 
      }); 
      $routeProvider.when('/view2', 
      { 
       templateUrl: 'view2.html', 
       controller: 'SimpleController' 
      }); 
      $routeProvider.otherwise ({redirectTo: '/'}); 
     }); 

     // define my controller 
     myApp.controller("SimpleController", function($scope) 
     { 
       // my array 
       $scope.customers=[ 
        {name:'astm',city:'Alex'}, 
        {name:'tamer',city:'Usa'}, 
        {name:'ahmed',city:'Cairo'} 
       ]; 

      // add new persons to my array 
      $scope.addPerson = function(){ 
      $scope.customers.push(
      { 
       name: $scope.newPerson.name, 
       city: $scope.newPerson.city 
      }); 
      }; 

     }); 

     </script> 

    </body> 
</html>

Это первый вид файла view1.html

<div class="container"> 
    <h2>View 1</h2> 
    Name : 
    <br> 
    <input type="text" data-ng-model="filter.name"> 
    <br> 
    <ul class="list-group"> 
     <li class="list-group-item" data-ng-repeat="person in customers | filter:filter.name | orderBy:'name' "> 
      {{ person.name}} live in {{ person.city}} 
     </li> 
    </ul> 

    <br> 

    <h2>Add new person</h2> 

    Name : 
    <br> 
    <input type="text" data-ng-model="newPerson.name"> 

    <br> 
    City : 
    <br> 
    <input type="text" data-ng-model="newPerson.city"> 

    <br> 
    <button data-ng-click="addPerson()">Add person</button> 

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

</div>

Это второй вид файла view2.html

<div class="container"> 
    <h2>View 2</h2> 
    City : 
    <br> 
    <input type="text" data-ng-model="city"> 
    <br> 
    <ul class="list-group"> 
     <li class="list-group-item" data-ng-repeat="person in customers | filter:city | orderBy:'city' "> 
      {{ person.name}} live in {{ person.city}} 
     </li> 
    </ul> 

    <a href="#/view1">view 1</a> 

</div>

источник

2015-07-22 Astm

попробовать один контроллер для одного взгляда – binariedMe

пробовал также, но все еще не работает :) – Astm

опечатка может быть ... Хотя, пожалуйста, предоставьте плункер – binariedMe

Вы не добавили зависимость ngRoute в приложении ..

var myApp = angular.module("MyApp",['ngRoute']); 

     // define my routes 
     myApp.config(function($routeProvider){ 
     $routeProvider.when('/', 
      { 
       templateUrl: 'view1.html', 
       controller: 'SimpleController' 
      }); 
      $routeProvider.when('/view2', 
      { 
       templateUrl: 'view2.html', 
       controller: 'SimpleController' 
      }); 
      $routeProvider.otherwise ({redirectTo: '/'}); 
     }); 

     // define my controller 
     myApp.controller("SimpleController", function($scope) 
     { 
     // my array 
       $scope.customers=[ 
        {name:'astm',city:'Alex'}, 
        {name:'tamer',city:'Usa'}, 
        {name:'ahmed',city:'Cairo'} 
       ]; 

      // add new persons to my array 
      $scope.addPerson = function(){ 
      $scope.customers.push(
      { 
       name: $scope.newPerson.name, 
       city: $scope.newPerson.city 
      }); 
      }; 

     });

here is the working plunkr

источник

2015-07-22 13:08:10 ngLover

Привет, я действительно добавил его в свой код, но забудьте добавить его в stackOverFlow, и мой код все еще не работает :( Это не проблема, и я все еще удивляюсь, почему она не работает? ? !! – Astm

Может видеть plunkr? – ngLover

Спасибо, ребята, я сейчас работаю , и это плункер: http://plnkr.co/85ghMSjVp0wXdEkDwCzW Я не знаю, почему он не работал и почему он работает сейчас, возможно, м y lap хотел перезапустить его :( – Astm

Угловые маршруты, не дающие мне выхода

ответ

Смежные вопросы