//app.js
(function () {
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/',
{
controller: 'customersController',
templateUrl: '/app/views/customers.html'
}).otherwise({ redirectTo: '/' });
});
}());
我有 /app/app.js 和 /app/views/customers.html 还有 /app/customersController.js。
下面是html
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
</div>
<script src="/Assets/Scripts/jquery-1.10.2.js"></script>
<script src="/Assets/Scripts/bootstrap.js"></script>
<script src="/Assets/Scripts/respond.js"></script>
<script src="/Assets/Scripts/angular.min.js"></script>
<script src="/Assets/Scripts/angular-route.min.js"></script>
<script src="/app/app.js"></script>
<script src="/app/customersController.js"></script>
</body>
</html>
这是 Controller :
(function () {
var customersController = function customersController($scope) {
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [{ name: 'foo', city: 'ny' }, { name: 'bar', city: 'la' }];
$scope.doSort = function (propname) {
$scope.sortBy = propname;
$scope.reverse = !$scope.reverse;
};
};
customersController.$inject = ['$scope'];
angular.module('app', []).controller('customersController', customersController);
}());
customers.html如下:
test
<div>
<table>
<tr>
<td>Name</td>
<td>City</td>
</tr>
<tr ng-repeat="customer in customers ">
<td>{{customer.name}}</td>
<td>{{customer.city}}</td>
</tr>
</table>
</div>
它不会加载customers.html，更不用说顶部的test文本了。
问题出在哪里？
最佳答案
我认为您正在重新定义您的模块。 尝试更改此行
angular.module('app', []).controller('customersController', customersController);
对此:
angular.module('app').controller('customersController', customersController);
关于javascript - ng-view 渲染失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36247875/