查看不渲染。控制器无数据

Question

这是我开始学习后的第二天AngularJS。添加一些路线后我的视图没有加载，我不确定为什么。这些是我的代码。

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

可能是拼写错误？

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

应该是：

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

:)

Answer 2

angular-route.js 应该在 app.js 之前加载，因为您想从 angular-route.js 访问 ngRoute 模块。目前它不可用，这就是上面的代码抛出 [$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>

Ensure angular.js & angular-route.js should have same versions like both should be on version 1.4.5.

更新

customersController.js 不应再次创建模块，您应该使用 myApp

改变

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

至

angular.module('myApp')

strong text

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

查看不渲染。控制器无数据

View not rendering. No data from controller

javascript

url-routing

angularjs

single-page-application

angularjs-routing

index.html

app.js

customers.html

customersController.js