angular中ngRoute和uiRoute的区别
概述
最近一直在学习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中就不能嵌套更深的路由。
这就是我的一些心得，肯定有些不足，包括事件都没有往上面写，欢迎大家一起交流学习。
