Angularjs 中的 ngroute

Question

我正在尝试使用 ngRoute 将 customers.html 与 customersController.js 结合起来，以便在加载 index.html 时显示在视图中。

它应该在 table 中显示客户列表以及一些其他属性。

显示的是局部视图。

link为代码：http://plnkr.co/YzZ3ldemD8UHH0R16BNi

index.html有如下代码

<!DOCTYPE html>
<html ng-app="customersApp">
<head>
<title>Testing ngRoute</title>
</head>
<body>

    <div ng-view></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="customersController.js"></script>

</body>
</html>

app.js有如下代码

(function() {

    var app = angular.module('customersApp', ['ngRoute']);

    app.config(function($routeProvider){
        $routeProvider
            .when('/', {
                controller: 'CustomersController',
                templateUrl: 'customers.html'   
            })
            .otherwise( { redirectTo: '/' });

});

}());

customersController.js有如下代码

app.controller('CustomersController', function ($scope){
        $scope.sortBy= 'name';
        $scope.reverse  = false;

        $scope.customers=[{joined: '2000-12-02', name:'John', city:'Sacramento', orderTotal:7.554},
                {joined: '2012-12-07', name:'Tom', city:'Chandler', orderTotal:110.57},
                {joined: '1997-05-02', name:'Matt', city:'Michigan', orderTotal:19.993},
                {joined: '2001-10-08', name:'Jane', city:'New York', orderTotal:112.954}];
        $scope.doSort = function(propName){
            $scope.sortBy = propName;
            $scope.reverse = !$scope.reverse;
        };
});

customers.html（视图）有以下代码

<h2>Customers</h2>
Filter: <input type="text" ng-model="customersFilter.name"/>
<br /><br />
<table>
    <tr>
        <th ng-click="doSort('name')">Name</th>
        <th ng-click="doSort('city')">City</th>
        <th ng-click="doSort('orderTotal')">Order Total</th>
        <th ng-click="doSort('joined')">Joined</th>
    </tr>
    <tr ng-repeat="cust in customers | filter:customersFilter | orderBy:sortBy:reverse">
        <td>{{cust.name}}</td>
        <td>{{cust.city}}</td>
        <td>{{cust.orderTotal | currency}}</td>
        <td>{{cust.joined | date:'longDate'}}</td>
    </tr>
    </table>
<br />
<span>Total customers: {{customers.length}}</span>

Answer 1

解析 iife 时，app 变量离开作用域。因此，当您尝试将控制器附加到它时，它不再存在。将控制器更改为 angular.module('customersApp').controller('CustomersController', function ($scope){

附带说明一下，控制器也可以包裹在 iife 中！

Angularjs 中的 ngroute

ngroute in Angularjs

angularjs

angularjs-ng-route