示例:
<!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 12</title> <script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/angular-route.js"></script> </head> <body> <div ng-view></div> <script type="text/ng-template" id="show.html"> <div ng-controller="PhoneListCtrl"> <h2>{{title}}</h2> <a href="#/phones/:1">go to detail</a> </div> </script> <script type="text/ng-template" id="put.html"> <div ng-controller="PhoneDetailCtrl"> <h2>{{title}} - {{id}}</h2> <a href="#/phones">go to list</a> </div> </script> <script type="text/javascript"> var app = angular.module('MyApp', ["ngRoute"], function() { }); app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'show.html', controller: "PhoneListCtrl" }). when('/phones/:id', { templateUrl: 'put.html', controller: "PhoneDetailCtrl" }). otherwise({ redirectTo: '/phones' }); } ]); app.controller('PhoneListCtrl', function($scope) { $scope.title = 'List'; }); app.controller('PhoneDetailCtrl', function($scope, $routeParams) { $scope.title = 'Detail'; $scope.id = $routeParams.id; }); </script> </body> </html>