查看未渲染。没有来自控制器的数据答案

【问题标题】：View not rendering. No data from controller查看未渲染。没有来自控制器的数据
【发布时间】：2015-09-02 17:34:46
【问题描述】：

这是我开始学习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 的帮助下修复了主要错误后编辑的问题。

【问题讨论】：

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

标签： javascript angularjs url-routing single-page-application angularjs-routing

【解决方案1】：

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>

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

更新

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

改变

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

到

angular.module('myApp')

strong text

【讨论】：

删除错误Pankaj，但现在我在浏览器中看不到来自控制器的数据。有什么帮助吗？
@siaw23 如果您想进一步了解，请查看 plunkr
@siaw23 很高兴为您提供帮助..谢谢 :)
你好 Pankaj，你能帮我解决这个问题吗：stackoverflow.com/questions/32362474/… :)

【解决方案2】：

可能是拼写错误？

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

应该是：

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

【讨论】：

【解决方案3】：

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

你的脚本语句：

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

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

正确的应该是：

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

【讨论】：

【解决方案4】：

1.4 中有一种新语法可以在别处使用过滤后的集合

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

【讨论】：

会有什么不同..当前ng-repeat有什么问题？