查看而不是渲染.控制器无数据

View not rendering. No data from controller

本文关键字：控制器 数据      更新时间：2023-09-26

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

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')
<<p> 强大的文本/strong>

可能是拼写错误?

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

应该是:

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

:)

ngRoute不可用。ngRoute由angular-route.js提供。

您的脚本语句:

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

没有指定src作为属性，而是作为javascript执行。

正确的格式应该是:

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

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

item in items | filter : x | orderBy : order | limitTo : limit as results
相关文章：