index.html がロードされたときにビューに表示されるように、ngRoute を使用して customers.html と customersController.js を結合しようとしています。
他のいくつかのプロパティとともに、テーブルに顧客のリストを表示する必要があります。
表示されているのは部分的なビューです。
コードのリンク: 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>