Угловые в 60-минутных маршрутах маршрутов

Question

Мне было интересно, может ли кто-нибудь быстро забрать мой код и сообщить мне, если я что-то упустил. Я пытаюсь изучить Angular.js, и использовал знаменитый Angular.js в 60-минутном видео. Однако проблема, с которой я столкнулась, заключается в том, что угловой обновлен с тех пор, и все немного отличается. В результате у меня возникают проблемы с правильной настройкой моих маршрутов. Огромное спасибо любому заблаговременно.

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

Это мои сценарии в моем html. Я последовал за книгой, и в результате они являются тегами скриптов на моей странице index.html.

var demoApp = angular.module('demoApp', ['helperModule']); 
    var controllers = {}; 

    demoApp.controller("CustomersController", function ($scope){ 
     $scope.customers = [ 
       {name: 'Dave Jones', city: 'pheonix'}, 
       {name: 'Dave Jones', city: 'New york'}, 
       {name: 'Jones suman', city: 'pheonix'}, 
       {name: 'Naresh babu', city: 'Hyderabad'} 
      ]; 
     }); 
    var demoApp = angular.module('demoApp', ['ngRoute']); 
     demoApp.config(function($routeProvider){ 
      $routeProvider 
       .when('/', 
        { 
         controller: "SimpleController", 
         templateUrl: "views/view1.html" 
        }) 
       .when('partial2', 
        { 
         controller: "SimpleController" 
         templateUrl: "views/view2.html" 
        }) 
       .otherwise({ redirectTo: "/"}) 
     }); 

     $scope.addCustomer = function(){ 
      $scope.customers.push({name: $scope.newCustomer.name, city: $scope.newCustomer.city}); 
     } 
<script src = "angular-route.js"></script> 

Это то, что у меня есть для просмотра 1 и 2 соответственно. Я чувствую, что все правильно, однако я не могу получить ни одного из имен клиентов.

<div cass = "container"> 
<h2>View 1</h2> 
    Name: 
    <input type = "text" data-ng-model="filter.name" /> 
    <ul><li data-ng-repeat="cust in customers | filter:filter.name"></ul> 
    Customer Name: <br /> 
    <input type= "text" data-ng-model="newCustomer.name" /> 
    Customer City: <br /> 
    <input type= "text" data-ng-model="newCustomer.city" /> 
    <button data-ng-click="addCustomer()"> Add Customer </button> 
    <a href="#/view2"> View 2</a> 
</div> 



<div cass = "container"> 
<h2>View </h2> 
<div ng-controller="CustomersController"> 
    Search: <input type = "text" ng-model="searchText" /> 
    {{ searchText }} 
    <br /> 
    <h3> Customers </h3> 
    <table> 
     <tr ng-repeat="cust in customers | filter:city"> 
       <td>{{ cust.name }}</td> 
       <td>{{ cust.city }}</td> 
       <td>{{ cust.total | currency}} </td> 
      </tr> 
    </table> 
</div> 

Answer 1

Вы подменяют приложение, которое делает проблему

начать с var demoApp = angular.module('demoApp', ['helperModule']); затем снова ты объявить demoApp var demoApp = angular.module('demoApp', ['helperModule']);

лучший способ решить эту проблему, будет ли объявить вам приложение только один раз со всей зависимостью & продолжать вносить изменения в такие компоненты, как контроллер, директива, завод и т. д.

Код

//could remove `helperModule` module if not used 
var demoApp = angular.module('demoApp', ['helperModule', 'ngRoute']); 
demoApp.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      controller: "SimpleController", 
      templateUrl: "views/view1.html" 
     }) 
     .when('partial2', { 
      controller: "SimpleController", 
      templateUrl: "views/view2.html" 
     }) 
     .otherwise({ 
      redirectTo: "/" 
     }) 
}); 

demoApp.controller("CustomersController", function($scope) { 
    $scope.customers = [{ 
     name: 'Dave Jones', 
     city: 'pheonix' 
    }, { 
     name: 'Dave Jones', 
     city: 'New york' 
    }, { 
     name: 'Jones suman', 
     city: 'pheonix' 
    }, { 
     name: 'Naresh babu', 
     city: 'Hyderabad' 
    }]; 

    $scope.addCustomer = function() { 
     $scope.customers.push({ 
      name: $scope.newCustomer.name, 
      city: $scope.newCustomer.city 
     }); 
    }; 
});