Почему этот угловой код не работает?

-3

Теперь, я пытаюсь понять, как Angular.js работает с «Angular.js за 60 минут» Дэна Вахлина. И я застрял с этим кодом, который в браузере должен выглядеть следующим образом: http://oi59.tinypic.com/25im4cy.jpg Почему этот угловой код не работает?

Мой код:

index.html

<!DOCTYPE html> 
<html lang="en" ng-app="demoApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular.js</title> 
</head> 
<body> 

    <div> 
     <div ng-view></div> 
    </div> 

    <script type="text/javascript" src="angular.min.js"></script> 

    <script> 
     var demoApp=angular.module('demoApp',[]); 

     demoApp.config(function ($routeProvider) { 
      $routeProvider 
       .when('/', 
       { 
        controller: 'SimpleController', 
        templateUrl: 'View1.html' 
       }) 
       .when('/view2', 
       { 
        controller: 'SimpleController', 
        templateUrl: 'View2.html' 
       }) 
       .otherwise({redirectTo:'/'}); 
     }); 

     demoApp.controller('SimpleController', function ($scope){ 
      $scope.customers=[ 
       {name:'Sam',city:'Moscow'}, 
       {name:'Dan',city:'Dubna'}, 
       {name:'Alex',city:'Dmitrov'} 
      ]; 

      $scope.addCustomer= function(){ 
       $scope.customers.push(
        { 
         name: $scope.newCustomer.name, 
         city: $scope.newCustomer.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> 
     <li ng-repeat="cust in customers | filter:filter.name | orderBy:'name">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> 
    </ul> 

    <br/> 
    Customer name: <br/>  
    <input type="text" ng-model="newCustomer.name"> 
    <br/> 
    Customer city: <br/> 
    <input type="text" ng-model="newCustomer.city"> 
    <br/> 
    <button ng-click="addCustomer()">Add Customer</button> 
    <br/> 
    <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> 
     <li ng-repeat="cust in customers | filter:city | orderBy:'name">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> 
    </ul> 
</div>

Но, когда я запускаю index.html в браузере, ничего нет. Может кто-нибудь объяснить мне, в чем дело, или, если вы уже прочитали эту книгу, дайте мне свою версию кода?

источник

2014-09-28 Sergey Pavlov

Вы забыли включить модуль 'ngRoute'. – dfsq

Это потому, что у вас есть не сделали две вещи:

Включите модуль ngRoute в качестве зависимости при объявлении angular.module('demoApp', [])
Включить angular-route.js код сценария в вашем проекте.

Я создал this JSFiddle из вашего кода, чтобы показать это работает, только с View1 шаблоном, где все, что я сделал это включает ngRoute как библиотеку и зависимость от demoApp модуля.

В будущем вы должны проверить свою консоль разработки, потому что Угловая распечатала ошибку.

источник

2014-09-28 16:10:10

Точно. Проверьте консоль dev. Угловые БОЛЬШИЕ из-за ошибок. Он фактически предоставил вам ссылку в консоли, в которой говорилось о конкретной проблеме (т. Е. NgRoute теперь является отдельным модулем, поскольку, как я полагаю, книга написана). – jdforsythe

Большое спасибо! Теперь он отлично работает, но у меня есть еще один вопрос: почему нет списка имен и городов вроде примера? И как я могу включить его? –

@SergeyPavlov: В выражении была пропущенная цитата. Добавьте qoute как ** orderBy: 'name' **. Вот обновленная [скрипка] (http://jsfiddle.net/467px16e/2/). – Kailash

<body ng-app='demoApp'> 
    <div> 
     <div ng-view></div> 
    </div> 
</body> 

<script type="text/ng-template" id="View1.html"> 
<div class="container"> 
    Name 
    <input type="text" data-ng-model="filter.name"/> 
    <ul> 
     <li ng-repeat="cust in customers | filter:filter.name | orderBy:'name">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> 
    </ul> 

    <br/> 
    Customer name: <br/>  
    <input type="text" ng-model="newCustomer.name"> 
    <br/> 
    Customer city: <br/> 
    <input type="text" ng-model="newCustomer.city"> 
    <br/> 
    <button ng-click="addCustomer()">Add Customer</button> 
    <br/> 
    <a href="#/view2">View 2</a> 
</div> 

<script> 
var demoApp=angular.module('demoApp',['ngRoute']); 

     demoApp.config(function ($routeProvider) { 
      $routeProvider 
       .when('/', 
       { 
        controller: 'SimpleController', 
        templateUrl: 'View1.html' 
       }) 
       .when('/view2', 
       { 
        controller: 'SimpleController', 
        templateUrl: 'View2.html' 
       }) 
       .otherwise({redirectTo:'/'}); 
     }); 

     demoApp.controller('SimpleController', function ($scope){ 
      $scope.customers=[ 
       {name:'Sam',city:'Moscow'}, 
       {name:'Dan',city:'Dubna'}, 
       {name:'Alex',city:'Dmitrov'} 
      ]; 

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

источник

2014-09-29 05:19:22

Почему этот угловой код не работает?

ответ

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