为什么这个 Angular 代码不起作用？ [关闭]答案

【问题标题】：Why this Angular code don't work? [closed]为什么这个 Angular 代码不起作用？ [关闭]
【发布时间】：2014-09-29 13:19:22
【问题描述】：

现在，我正在尝试了解 Angular.js 如何与 Dan Wahlin 的“Angular.js in 60 Minutes”一起工作。我坚持使用这段代码，在浏览器中必须如下所示：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 时，什么都没有。谁能解释一下这是怎么回事，或者，如果你已经读过这本书，请给我你的代码版本？

【问题讨论】：

您忘记包含ngRoute 模块。

标签： javascript html angularjs

【解决方案1】：

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

在声明 angular.module('demoApp', []) 时将 ngRoute 模块作为依赖项包含在内
在您的项目中包含 angular-route.js 脚本代码。

我从您的代码中创建了this JSFiddle 以显示它可以正常工作，只需使用View1 模板，我所做的就是将ngRoute 作为库和demoApp 模块的依赖项包含在内。

以后，你应该检查你的开发控制台，因为 Angular 打印出了一个错误。

【讨论】：

没错。检查您的开发控制台。 Angular 非常擅长处理错误。它实际上在您的控制台中为您提供了一个链接，告诉您确切的问题（即 ngRoute 现在是一个单独的模块 - 因为这本书是写的，我假设）。
非常感谢！现在，它工作得很好，但我还有一个问题：为什么没有像示例中那样的名称和城市列表？以及如何启用它？
@SergeyPavlov ：表达式中有一个未终止的引用。添加类似 orderBy : 'name' 的 qoute。这是更新后的fiddle。
再次在 Angular 的控制台错误输出中表达了这一点。请检查您的控制台！

【解决方案2】：

<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>

【讨论】：