Question

现在，我试图了解Angular.js如何使用Dan Wahlin的“60分钟内的Angular.js”。我坚持使用此代码，在浏览器中必须如下所示：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时，根本没有任何东西。有人可以解释一下是什么问题，或者如果你已经读过这本书，请给我你的代码版本吗？

Answer 1

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

在声明ngRoute

angular.module('demoApp', [])

在项目中包含angular-route.js脚本代码。

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

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

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

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

2 个答案: