概述
最近一直在學習angular路由這一部分，angular的路由有兩種，在angular最先出來的ngRoute的時候，后續又有了uiRoute，具體有什么區別呢？今天就順便總結了一下。
簡單應用
1. 先分別創建出每個路由簡單的應用，首先引包下載我就不說了，然后直接開始寫一個簡單ngRoute的路由和使用。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="angular.js"></script>
7 <script src="angular-route.js"></script> //注意引包順序 必須在angular.js后面
8 </head>
9 <body ng-app="s1.app">
10 <div>
11 <a href="#/list">list</a>
12 <a href="#/detail/0">張三</a>
13 <a href="#/detail/1">李四</a>
14 <a href="#/detail/2">王五</a>
15 <a href="#/detail/3">趙六</a>
16 </div>
17 <div ng-view></div>
18 <script>
19 var app = angular.module('s1.app', ['ngRoute']);
20 app.service('DataService', function () { //創建DataService服務 21 this.getList = function () { 22 return [ 23 {name: '張三', tel: '13333333333'}, 24 {name: '李四', tel: '13433333333'}, 25 {name: '王五', tel: '13533333333'}, 26 {name: '趙六', tel: '18666666666'}, 27 ] 28 } 29 }); 30 app.controller('ListController', function ($scope) { //創建ListController控制器 用來指定路由中的控制器 31 $scope.msg = 'list controller' 32 }); 33 app.controller('DetailController', function ($scope, $routeParams, DataService) { //穿件Detail控制器 用法和上個一樣 34 var index = $routeParams.index; 35 $scope.data = DataService.getList()[index]; 36 }); 37 app.config(function ($routeProvider) { 38 $routeProvider 39 .when('/list', { 40 template: '<div>{{msg}}</div>', 41 controller: 'ListController' 42 }) 43 .when('/detail/:index', { 44 template: '<div>{{data}}</div>', //這里可以用templateUrl用來指定模板,模板中不可以有路由模塊嵌套 45 controller: 'DetailController' 46 } 47 ) 48 }) 49 </script> 50 </body> 51 </html>
2. 創建一個uiRoute 和使用
1 <!DOCTYPE html> 2 <html lang="en" ng-app="s9.app"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>簡單的例子：基礎路由</title> 6 <script src="../jquery.js"></script> 7 <script src="../angular.js"></script> 8 <script src="../angular-ui-router.js"></script> 9 <style> 10 .content{ 11 margin: 10px; 12 border-top:1px solid silver; 13 } 14 .view{ 15 border:1px solid orange; 16 min-height: 300px; 17 padding: 5px; 18 } 19 </style> 20 </head> 21 <body> 22 當前頁面狀態：{{getCurrentState()}} 23 <div class="nav"> 24 <a ui-sref="index">index</a> 25 <a ui-sref="about">about</a> 26 <a ui-sref="detail({id:1,name:'張三'})">detail</a> //這個是帶參數的路由 27 </div> 28 <div class="content"> 29 <div>ui-view:</div> 30 <div class="view" ui-view></div> 31 </div> 32 <script> 33 34 /** 35 * Created by GlassTea on 2016/9/24 0024. 36 */ 37 angular.module('s9.app', ['ui.router']) 38 .config(function ($stateProvider, $urlRouterProvider) { 39 $stateProvider 40 .state('index', { //路由匹配規則 41 url: '/index', 42 template: '<div>msg from index page: {{data.msg}}</div>', 43 controller: function ($scope) { 44 var data = $scope.data = {}; 45 data.msg = 'hello, this is index page.' 46 } 47 }) 48 .state('about', { 49 url: '/about/', 50 template: '<div>msg from about page: {{data.msg}}</div>', 51 controller: function ($scope) { 52 var data = $scope.data = {}; 53 data.msg = 'hello, this is about page.' 54 } 55 }) 56 .state('detail', { 57 url: '/about/:id/:name', 58 template: '<div>msg from detail page: {{data.msg}}</div>', 59 controller: function ($scope, $stateParams) { 60 var data = $scope.data = {}; 61 data.msg = $stateParams; 62 } 63 }) 64 65 $urlRouterProvider.otherwise('/index'); //沒有配置的狀態就可以跳到 ‘/index’狀態 66 }) 67 .run(function ($rootScope, $state, $stateParams) { 68 window.getState = function () { 69 return $state; 70 }; 71 window.getStateParams = function () { 72 return $stateParams; 73 }; 74 }); 75 </script> 76 </body> 77 </html>
3.ngRoute 和 ui-route 相比:
$when —> $state 路由狀態配置的時候
$routeParams —> $stateParams 帶參數的時候的配置
$routeProvider —> $stateProvider 依賴注入的模塊
<div ng-view></div> —> <div ui-view></div> 頁面中綁定的指令
4. 路由詳解
uiRoute中可以嵌套更深層次的路由，也就是路由中可以有路由（大致有兩種情況：1.橫向的 2.縱向的）。
（1）嵌套路由
- （2）多視圖路由
ngRoute中就不能嵌套更深的路由。
這就是我的一些心得，肯定有些不足，包括事件都沒有往上面寫，歡迎大家一起交流學習。