的index.html

<!doctype html>
<html ng-app="myApp">
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <script src="https://code.angularjs.org/1.4.5/angular.js"></script>
        <script src="angular-route.js"></script>
        <script src="app/controllers/app.js"></script>
        <script src="app/controllers/customersController.js"></script>
    </head>
    <body>
        <div ng-view></div>

    </body>

</html>

app.js

angular.module('myApp', ['ngRoute'])
  .config(function ($routeProvider) {
    'use strict';
    $routeProvider
        .when('/', {
            controller: 'CustomersController',
            templateUrl: 'app/views/customers.html'
        })
        .otherwise( { redirectTo: '/' });
  });

customers.html客户

<h3>Customers</h3>
Filter: <input type="text" ng-model="customerFilter.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 filtered = (customers | filter:customerFilter | orderBy:sortBy:reverse)">
        <td>{{ cust.name | uppercase }}</td>
        <td>{{ cust.city }}</td>
        <td>{{ cust.orderTotal | currency:'PLN' }}</td>
        <td>{{ cust.joined | date}}</td>
    </tr>
</table>

<span> Total customers: {{ filtered.length }} </span>

customersController.js

angular.module('myApp', ['ngRoute'])
  .controller('CustomersController', function ($scope) { 
    'use strict';

    $scope.sortBy = 'name';
    $scope.reverse = false;

    $scope.customers = [
      {
        joined: '2005-09-07', 
        name: 'Mayweather', 
        city: 'Brooklyn', 
        orderTotal: '43.1299'

      }, 
      {
        joined: '2005-09-07', 
        name: 'Jason', 
        city: 'Cleveland', 
        orderTotal: '89.8933'

      }, 
      {
        joined: '1999-08-27', 
        name: 'Jade', 
        city: 'Wroclaw', 
        orderTotal: '77.0092'

      }, 
      {
        joined: '2015-09-01', 
        name: 'David', 
        city: 'Accra', 
        orderTotal: '13.8465'
      }, 
      {
        joined: '2001-01-18', 
        name: 'Doyet',
        city: 'Paris',
        orderTotal: '23.9930'
      }];

    $scope.doSort = function (propName) {
        $scope.sortBy = propName;
        $scope.reverse = !$scope.reverse;
    };
});

这是我的树形结构：

.
├── angular-route.js
├── angulars.js
├── app
│   ├── controllers
│   │   ├── app.js
│   │   └── customersController.js
│   └── views
│       └── customers.html
├── index.html
└── zextra
    ├── helloworld.html
    └── ngrepeat.html

4 directories, 8 files

（zextra文件夹无关紧要）这是我在控制台中遇到的错误：

empty. nothing!

为什么我没有在浏览器中看到任何内容并且没有错误的任何想法？

编辑：在Pankaj Parker的帮助下修复了主要错误后编辑的问题。

Answer 1

如果您想从angular-route.js访问app.js模块，则应在ngRoute之前加载

angular-route.js。目前它不可用，这就是上面的代码抛出[$injector:modulerr]错误的原因。

更改

<script src="https://code.angularjs.org/1.4.5/angular.js"></script> <script src="angular-route.js"></script> <script src="app/controllers/app.js"></script> <script src="app/controllers/customersController.js"></script>

确保angular.js＆amp; angular-route.js应该具有相同的版本，两者都应该在版本1.4.5上。

<强>更新

customersController.js不应再次创建模块＆amp;你应该使用myApp

更改

angular.module('myApp', ['ngRoute'])

到

angular.module('myApp')

strong text

Answer 2

拼错，也许？

<script> src="angular-route.js"</script>

应该是：

<script src="angular-route.js"></script>

：）

Answer 3

错误表示ngRoute不可用。 ngRoute由angular-route.js提供。

您的脚本声明：

<script> src="angular-route.js"</script>

不指定src作为属性，而是以javascript执行。

应该是：

<script src="angular-route.js"></script>

Answer 4

在1.4中有一个新的语法用于在其他地方使用过滤集合

item in items | filter : x | orderBy : order | limitTo : limit as results

查看不渲染。没有控制器的数据

的index.html

app.js

customers.html客户

customersController.js

4 个答案: