爲什麼這個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代碼不起作用？

回答

相關問題