<!doctype html> <html lang="en" ng-app="AMail"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/angular.js"></script> <script src="lib/angular-route.js"></script> </head> <body> <h1>A - Mail</h1> <div ng-view></div> <script type="text/ng-template" id="detail.html"> <div><strong>Subject:</strong>{{message.subject}}</div> <div><strong>Sender:{{message.sender}}</strong></div> <div><strong>Date:</strong>{{message.date}}</div> <div> <strong>To:</strong> <span ng-repeat="recipient in message.recipients">{{recipient}}</span> </div> <div>{{message.message}}</div> <a href="#/">Back to message list</a> </script> <script type="text/ng-template" id="list.html"> <table> <tr> <td><strong>Sender</strong></td> <td><strong>Subject</strong></td> <td><strong>Date</strong></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> </script> <script> 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: ‘jean@somecompany.com‘, subject: ‘Hi there, old friend‘,date: ‘Dec 7, 2013 12:32:00‘, recipients: [‘greg@somecompany.com‘],message: ‘Hey, we should get together for lunch ‘}, { id: 1, sender: ‘maria@somecompany.com‘,subject: ‘Where did you leave my laptop?‘,date: ‘Dec 7, 2013 8:15:12‘, recipients: [‘greg@somecompany.com‘],message: ‘I thought you were going to put it in my desk drawer.‘+‘But it does not seem to be there.‘}, {id: 2, sender: ‘bill@somecompany.com‘, subject: ‘Lost python‘,date: ‘Dec 6, 2013 20:35:02‘, recipients: [‘greg@somecompany.com‘],message: "Nobody panic, but my pet python is missing from her cage.‘+‘She doesn‘t move too fast, so just call me if you see her."}]; function ListController($scope) { $scope.messages = messages; } function DetailController($scope, $routeParams) { $scope.message = messages[$routeParams.id]; } </script> </body> </html>
angularjs ngRoute demo,布布扣,bubuko.com
原文：http://www.cnblogs.com/wangwenfei/p/ngRoute.html