0
Я пытаюсь использовать ngRoute для вступления в брак clients.html вместе с customersController.js для отображения в представлении при загрузке index.html.ngroute in Angularjs
Он должен отображать список клиентов в таблице вместе с некоторыми другими свойствами.
То, что он показывает, является частичным видом.
Ссылка на код: http://plnkr.co/YzZ3ldemD8UHH0R16BNi
index.html имеет следующий код
<!DOCTYPE html>
<html ng-app="customersApp">
<head>
<title>Testing ngRoute</title>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="customersController.js"></script>
</body>
</html>
app.js имеет следующий код
(function() {
var app = angular.module('customersApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'customers.html'
})
.otherwise({ redirectTo: '/' });
});
}());
customersController.js имеет следующий код
app.controller('CustomersController', function ($scope){
$scope.sortBy= 'name';
$scope.reverse = false;
$scope.customers=[{joined: '2000-12-02', name:'John', city:'Sacramento', orderTotal:7.554},
{joined: '2012-12-07', name:'Tom', city:'Chandler', orderTotal:110.57},
{joined: '1997-05-02', name:'Matt', city:'Michigan', orderTotal:19.993},
{joined: '2001-10-08', name:'Jane', city:'New York', orderTotal:112.954}];
$scope.doSort = function(propName){
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
});
customers.html (вид) имеет следующий код
<h2>Customers</h2>
Filter: <input type="text" ng-model="customersFilter.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 customers | filter:customersFilter | orderBy:sortBy:reverse">
<td>{{cust.name}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date:'longDate'}}</td>
</tr>
</table>
<br />
<span>Total customers: {{customers.length}}</span>
Я не вижу проблемы после удаления избыточного '(function() {...})();' вокруг определения 'app' в' app.js': http: // plnkr. co/edit/2E91sOIKmfql6IbLHQ0G? p = preview –
Iffe's друзья не лишние. http://benalman.com/news/2010/11/immediately-invoked-function-expression/ – DavidEdwards