先看文件的摆放
不废话,直接上代码.
detail.html:
1 <hr/> 2 <h3>路由 <span style="color: red;">{{id}}</span>: detail.html </h3>
list.html:
1 <hr> 2 <h1>List.html</h1> 3 <h2>{{myName}}</h2> 4 <ul> 5 <li ng-repeat="id in [1,2,3]"> 6 <a href="#/list/{{id}}">链接{{id}}</a> 7 </li> 8 </ul>
demo-route.html
1 <!DOCTYPE html> 2 <html ng-app="routeModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="../js/angular1.4.3.js"></script> 7 <script type="text/javascript" src="../js/angular-route.js"></script> 8 </head> 9 <body> 10 <h1>Angular的路由案例</h1> 11 <div ng-view></div> 12 <script> 13 var routeApp = angular.module('routeModule',['ngRoute']); 14 routeApp.config(['$routeProvider',function ($routeProvider) { 15 $routeProvider 16 .when('/list', { 17 templateUrl: 'views/route/list.html', 18 controller: 'ListRouteController' 19 }) 20 .when('/list/:id', { 21 templateUrl: 'views/route/detail.html', 22 controller: 'DetailRouteController' 23 }) 24 .otherwise({ 25 redirectTo: '/list' 26 }); 27 }]); 28 29 routeApp.controller('ListRouteController',function($scope) { 30 $scope.myName="思思博士"; 31 }); 32 routeApp.controller('DetailRouteController',function($scope, $routeParams) { 33 $scope.id = $routeParams.id; 34 }); 35 </script> 36 </body> 37 </html>
注意看我引入的js版本.现在的route模块从angular中提取出来了.所以需要单独引用.
单击链接或修改id好,就能看到神奇的效果了.