ngRoute不支持嵌套路由
用法如下：
1 <!DOCTYPE html> 2 <html lang="en" ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" /> 6 <title>angular 路由</title> 7 </head> 8 <style> 9 ul li{ 10 list-style: none; 11 float: left; 12 padding: 10px; 13 } 14 </style> 15 <body> 16 <ul> 17 <li><a href="#page1">page1</a></li> 18 <li><a href="#page2">page2</a></li> 19 <li><a href="#page3">page3</a></li> 20 </ul> 21 <div ng-view></div> 22 </body> 23 <script src="./script/libs/angularjs.1.4.6.min.js"></script> 24 <script src="./script/libs/angular-route.js"></script> 25 <script> 26 angular.module('myApp',['ngRoute']) 27 .config(function($routeProvider){ 28 $routeProvider.when("/page1",{ 29 template:"this is page1" 30 }).when("/page2",{ 31 template:"this is page2" 32 }).when("/page3",{ 33 template:"this is page3" 34 }).otherwise({ 35 redirectTo:"/page1" //默认路由 36 }) 37 }); 38 </script> 39 </html>
uiRouter支持嵌套路由
用法如下：
1 <!DOCTYPE html> 2 <html lang="en" ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" /> 6 <title>angular路由</title> 7 </head> 8 <style> 9 ul li{ 10 list-style: none; 11 float: left; 12 padding: 10px; 13 } 14 </style> 15 <body> 16 <ul> 17 <li><a href="#page1">page1</a></li> 18 <li><a href="#page2">page2</a></li> 19 <li><a href="#page3">page3</a></li> 20 </ul> 21 <div ui-view></div> 22 </body> 23 <script src="./script/libs/angularjs.1.4.6.min.js"></script> 24 <script src="./script/libs/angular-ui-router.js"></script> 25 <script> 26 angular.module('myApp',['ui.router']) 27 .config(function($stateProvider,$urlRouterProvider){ 28 $stateProvider.state('page1',{ 29 url:"/page1", 30 template:"this is p1" 31 }).state('page2',{ 32 url:"/page2", 33 template:"this is p2" 34 }).state('page3',{ 35 url:"/page3", 36 template:"this is p3" 37 }); 38 $urlRouterProvider.otherwise('page1'); 39 }); 40 </script> 41 </html>