为什么这个Angular代码不起作用？

-3

现在，我想了解Dan Wahlin如何使用“60分钟内的Angular.js”的Angular.js。而我坚持了这个代码，在浏览器必须是这样的：http://oi59.tinypic.com/25im4cy.jpg 为什么这个Angular代码不起作用？

我的代码：

的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 2014-09-28 16:08:35

这是因为你有不做了两两件事：

附上ngRoute模块作为依赖当你声明angular.module('demoApp', [])
在项目中包含angular-route.js脚本代码。

我从你的代码，以显示它的工作，正好与View1模板，所有我做的是包括ngRoute作为库和demoApp模块的依赖性创建this JSFiddle。

未来，您应该检查您的开发控制台，因为Angular会打印出错误。

来源

2014-09-28 16:10:10

没错。检查你的开发控制台。 Angular对于错误非常重要。它实际上为您提供了一个控制台中的链接，告诉您确切的问题（即ngRoute现在是一个单独的模块 - 因为该书是我写的，我假设）。 – jdforsythe 2014-09-28 16:19:46

非常感谢！现在，它工作得很好，但我还有一个问题：为什么在例子中没有名称和城市列表？我如何启用它？ – 2014-09-28 17:52:03

@SergeyPavlov：表达式中有一个未终止的引号。添加一个类似** orderBy的：qoute：'name'**。这是更新的[小提琴]（http://jsfiddle.net/467px16e/2/）。 – Kailash 2014-09-28 19:03:59

<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

为什么这个Angular代码不起作用？

回答

相关问题