ng-route

ng-route实现了路由功能
在引入angular.js之后还要引入angular-route.js,之前版本不需要,早期的书代码无法运行
ng-view区域表示路由变动的区域
aMailServices 还要注入一股[ngRoute]才能运行
具体路由情况看a.js
比较清晰
index.html

<!DOCTYPE html>
<html ng-app="aMail">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>
  <script src="a.js"></script>
</head>
<body>
  <h1>A-Mail</h1>
  <div ng-view></div>
</body>
</html>

list.html

<table> <tr> <td>Sender</td> <td>Subject</td> <td>Date</td> </tr> <tr ng-repeat="message in messages"> <td>{{message.sender}}</td> <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td> <td>{{message.date}}</td> </tr> </table>

detail.html

<div>Subject:{{message.subject}}</div> <div>Sender:{{message.sender}}</div> <div>Date:{{message.date}}</div> <div> To: <span ng-repeat="recipient in message.recipients">{{recipient}}</span> <div>{{message.message}}</div> <a href="#/">Back to message list</a>

a.js

var aMailServices = angular.module('aMail', ['ngRoute']);
function emailRouteConfig($routeProvider) {
  $routeProvider.when('/', {
    controller: ListController,
    templateUrl: 'list.html'
  }).when('/view/:id', {
    controller: DetailController,
    templateUrl: 'detail.html'
  }).otherwise({redirectTo: '/'});
}
aMailServices.config(emailRouteConfig);
messages = [{id:0, sender:'123', subject:'test', date:'123', recipients:['123'],
            message:'hehe'},
            {id:0, sender:'123', subject:'test', date:'123', recipients:['123'],
            message:'hehe'},
            {id:0, sender:'123', subject:'test', date:'123', recipients:['123'],
            message:'hehe'}];
function ListController($scope) {
  $scope.messages = messages;
}
function DetailController($scope, $routeParams) {
  $scope.message = messages[$routeParams.id];
}

你可能感兴趣的:(ng-route)