gpt4 book ai didi

javascript - 查看不渲染。 Controller 无数据

转载 作者:行者123 更新时间:2023-11-30 07:59:11 26 4
gpt4 key购买 nike

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

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>

应用程序.js

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

客户.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>

客户 Controller .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 访问 ngRoute 模块.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>

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

关于javascript - 查看不渲染。 Controller 无数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32359667/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com