基本说明参考：AngularJS路由之ui-router（一）
模块创建时添加模块依赖“ui.router”
var app = angular.module('myApp', ['ui.router']);后就可以使用一个叫做$state的服务,使用$stateProvider来配置这个服务. $stateProvider和angualr内置的$routeProvider的用法类似,但是它是通过'状态'来管理路由的. 在整个应用的界面和导航中,状态对应了页面中的一个位置(也就是ui-view)状态通过controller,template,view等属性,描述了它对应位置的视图展示和行为.状态之间通常有一些共同点,把这些共同点从模型中分解出来的最好办法就是通过状态继承. 比如父/子状态(又名状态嵌套) 激活一个状态: 调用 $state.go().具体用法以后再讲. 点击一个带有ui-sref属性的a链接.ui-sref属性值就是状态值.具体用法以后再讲. 状态里定义对应url,当页面的url改变成对应状态的url时,就激活这个状态.具体用法以后再讲. 状态的模板: 有几种方法可以定义状态对应的视图模板: 1.定义template属性,属性值为字符串html: $stateProvider.state('contacts', { template: '<h1>My Contacts</h1>' })2.定义templateUrl属性,属性值一个函数,函数返回值为模板文件对应的url路径: 函数中可以注入$stateParams.$stateParams是url参数组成的键值对对象. 比如这里url里的name就是一个参数,那么,$stateParams就是{name:''} $stateProvider.state('contacts',{ url:'/contacts/:name', templateUrl: function($stateParams){ return 'partials/contacts.' + $stateParams.name + '.html' } })3.定义templateProvider属性.属性值是一个函数,函数的返回值为字符串html: 函数中同样可以注入$stateParams $stateProvider.state('contacts',{ url:'/contacts/:name', templateProvider: function($stateParams){ return '<h1>'+$stateParams.name+'</h1>' } }) 状态的控制器和状态控制器的重命名可以为每个视图模板分配一个控制器. 注意:如果模板没有被定义,那么控制器不会被实例化. 有以下几种方式可以定义控制器: 1.定义controller属性,属性值为模块下定义好的控制器, 在myapp模块下定义了'contact'控制器,然后controller属性就可以直接定义属性值为'contact'
app.config(function ($stateProvider, $urlRouterProvider) { //注册路由,使用控制器操作(使用外部控制器) //轻松实现多个视图使用一个控制器 $stateProvider.state('contacts', { url: '/contacts/:name', controller: 'contact', templateProvider: function ($stateParams) { return '<h1>{{text}},' + $stateParams.name + '</h1>'; } }); }); app.controller('contact', function ($scope) { $scope.text = "hi"; });2.controller属性，属性值就是控制器桉树 app.config(function ($stateProvider, $urlRouterProvider) { //注册路由,使用控制器操作(注册路由时，指定控制器) //轻松实现多个视图使用一个控制器 $stateProvider.state('contacts', { url: '/contacts/:name', controller: function ($scope) { $scope.text = 'hi'; }, templateProvider: function ($stateParams) { return '<h1>{{text}},' + $stateParams.name + '</h1>'; } }); });3.定义controller属性，属性为模块下定义好的控制器+‘as con’,并且定义controllerAd属性为'con'，然后在作用域中使用con作为controller对象 app.config(function ($stateProvider, $urlRouterProvider) { //使用as 重命名控制器 $stateProvider.state('contacts', { url: '/contacts/:name', controller: 'contact as con', templateProvider: function ($stateParams) { return '<h1>{{con.text}},' + $stateParams.name + '</h1>'; }, controllerAs: 'con' }); }); app.controller('contact', function () { this.text = "hi"; }); app.config(function ($stateProvider, $urlRouterProvider) { //使用as 重命名控制器 $stateProvider.state('contacts', { url: '/contacts/:name', controller: function () { this.text = "hi"; }, templateProvider: function ($stateParams) { return '<h1>{{con.text}},' + $stateParams.name + '</h1>'; }, controllerAs: 'con' }); });控制器会根据需要,在对应的作用域被创建的时候实例化. 比如: 当url被改变到和状态匹配的url时,$stateProvider会把对应的模板加载到视图里,然后把控制器绑定到模板的作用域下.
状态的resolve resolve属性非常重要,它是一个map对象(也就是json对象),它为状态的控制器提供了所需的依赖.这些依赖可以给状态对应的控制器提供所需要的内容或数据.如果resolve属性值中有promise对象,那么它会在控制器被实例化、$stateChangeSuccess事件触发之前被解析并且转换成值. resolve的属性和属性值应该是这样的: 属性名: 这个名字将会被作为依赖,注入到controller里. 属性值: 字符串|函数 字符串: 当前模型下既有的服务名 函数: 函数的返回值会作为依赖,可以被注入到控制器中.如果函数的返回值是一个promise对象,那么它会在控制器被实例化、$stateChangeSuccess事件触发之前被解析并且转换成值.这个值会被作为依赖注入. 下面这段代码介绍了常见的resolve的六种类型: var app = angular.module('myApp', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider) { //向controller注入服务 $stateProvider.state('contacts', { url: '/contacts/:name', templateUrl: function ($stateParams) { console.info($stateParams); return '/template/' + $stateParams.name + '.html' }, controller: 'ctrl', resolve: { //字符串格式，使用一个既有的服务 first: 'aService', //函数：函数的返回值就是将被注入的服务 send: function () { return { data: 'second的data ' } }, //函数：在函数中注入既有的服务 third: function (anotherService, $stateParams) { var data = anotherService.getName($stateParams.name); return { data: data } }, //函数：返回一个promise对象，最终得到的僵尸resolve里的内容 fourth: function ($q, $timeout) { //限制程序等待，当前view会出现显示阻塞 var defer = $q.defer(); $timeout(function () { defer.resolve({ data: '我是fourth的data' }); //注意,如果一个state的resolve里的某个promise被拒绝了,那这个state直接无法继续下去了. //defer.reject({data:'我是fourth的data'}) }, 10000); return defer.promise; }, //函数：返回$http返回的promise返回的promise，最终得到的事.then里面return的内容 fifth: function ($http) { return $http({ method: 'GET', url: '/contents/getName' }).then(function (res) { return { data: res.data } }, function () { console.error('请求失败'); }); }, //函数：返回$http返回的promise，最终得到的就是后台返回值 sixth: function ($http) { return $http({ method: 'GET', url: '/Contents/name' }); } } }); }); //注册服务 app.factory('aService', function () { return { data: 'first的data', getName: function () { console.info('aService服务下的getName方法触发'); } } }); app.factory('anotherService', function () { return { getName: function (data) { return data.toUpperCase(); } } }); //注册controller app.controller('ctrl', function ($scope, first, send, third, fourth, fifth, sixth) { first.getName(); console.info(first); $scope.data1 = first; $scope.data2 = send; $scope.data3 = third; $scope.data4 = fourth; $scope.data5 = fifth.data; $scope.data6 = sixth.data; }); 给状态添加自定义数据：$stateProvider.state('name',{})中的.state第二个参数对象可以添加自定义的属性和值,为了避免冲突,一般使用data属性来为它添加自定义属性. 自定义的属性可以通过$state.current.data来访问到.
app.config(function ($stateProvider, $urlRouterProvider) { //1.使用路由状态传递参数 //2.路由状态的onEnter和onExit回调处理 $stateProvider.state('contacts', { url: '/contacts/:name', templateUrl: function ($stateParams) { return '/template/' + $stateParams.name + '.html' }, data: { data: 1234 }, controller: function ($scope, $state) { //获取路由状态的参数 // console.info($state.current.data); $scope.data1 = $state.current.data; }, resolve: { title: function () { return 'contacts'; } }, onEnter: function (title) { console.log('进入' + title + '状态'); }, onExit: function (title) { console.log('推出' + title + '状态'); } }); }); 状态的onEnter和onExit回调: 状态的onEnter属性和onExit属性可以用来定义进入状态和退出状态所执行的回调: 注意,回调函数中可以注入resolve里定义的依赖,比如下面的'title': 状态改变事件：这些事件都是在$rootScope上触发的.测试证明在$scope中绑定也是管用的 $stateChangeStart: 当状态开始改变时触发, 接受5个参数:
event: 事件对象,使用event.preventDefault()可以阻止状态发生改变. toState: toState是定义.state时传入的第二个参数对象 toParams: toParams就是$stateParamsfromState: fromState是上一个状态(就是离开的状态).state时传入的第二个参数对象fromParams: fromParams是上一个状态(就是离开的状态)的$stateParams $stateChangeSuccess: 当状态改变结束时触发,可以接受5个参数,5个参数同'$stateChangeStart'的5个参数 $stateNotFound: 当状态没有找到时触发,接受4个参数: event: 事件对象,使用event.preventDefault()可以阻止js继续执行,否则会报错,卡住.unfoundState: 一个对象,这个对象有三个属性:to: 前往的状态名(也就是没有找到的这个状态名)toParams: 前往的状态的参数(在使用ui-sref或者$state.go()的时候可以传入)options: 使用$state.go()的时候传入的第三个参数fromState: 同上fromParams: 同上 $stateChangeError: 当状态改变失败时触发,需要注意,如果在状态的resolve过程中遇到了问题(比如js错误,服务找不到,请求得不到响应等),这些错误不会像传统的那样被抛出,而是会在$stateChangeError里被捕获.它可以接受6个参数 event: 事件对象toState: 同上toParams: 同上fromState: 同上fromParams: 同上error: 一个包含了错误信息的对象视图加载事件: $viewContentLoading: 当视图开始渲染的时候,$rootScope传播这个事件. 它接受2个参数 event: 事件对象 viewConfig: 包含一个属性:targetView $viewContentLoaded: 当视图渲染完毕的时候,视图所在的scope传播这个事件. 事件触发执行顺序: 下面来理一下一个状态被激活的过程是怎样的: 1. 触发$stateChangeStart事件,如果使用event.preventDefault(),会阻止状态改变. 如果没有找到对应状态,会触发$stateNotFound事件,然后中断. 2. 触发$viewContentLoading事件. 3. 如果在切换状态的过程中出错(比如resolve出错),触发$stateChangeError事件,无出错跳过此步. 4. 触发上一个状态(若有)的onExit回调事件 5. 触发当前状态的onEnter回调事件 6. 触发$stateChangeSuccess事件 7. 触发$viewContentLoaded事件
简单实例：
<div class="container" ng-app="myApp"> <h3>AngularJS Home Page Ui-router Test</h3> <ul class="nav nav-pills"> <li role="presentation" class="active"> <a href="#/contacts/index">首页</a> </li> <li role="presentation"> <a href="#/contacts/list">列表页</a> </li> <li role="presentation"> <a href="#/contacts/stop">被拒绝</a> </li> <li role="presentation"> <a ui-sref="lalala({a:1,b:2})">无</a> </li> </ul> <div data-ui-view="" loading>点击连接后内容被加载咋爱这里</div> </div>js： var app = angular.module('myApp', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider) { //1.使用路由状态传递参数 //2.路由状态的onEnter和onExit回调处理 $stateProvider.state('contacts', { url: '/contacts/:name', templateUrl: function ($stateParams) { return '/template/' + $stateParams.name + '.html' }, data: { data: 1234 }, controller: function ($scope, $state) { //获取路由状态的参数 // console.info($state.current.data); $scope.data1 = $state.current.data; } }); }); //注册指令 app.directive('loading', function ($rootScope) { return { restrict: 'EA', link: function (scope, iEle, iAttrs, ctrl) { console.log(scope == $rootScope); //状态事件 scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { console.log('状态开始改变'); /*toState是定义.state时传入的第二个参数对象*/ console.info(toState); /*toParams就是$stateParams*/ console.info(toParams); /*fromState是上一个状态.state时传入的第二个参数对象*/ console.info(fromState); /*fromParams就是上一个状态的$stateParams*/ console.log(fromParams); if (toParams.name == 'stop') { alert('阻止页面'); event.preventDefault(); } }); scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { console.log('状态改变结束'); /*参数同上*/ }); scope.$on('$stateNotFound', function (event, unfoundState, fromState, fromParams) { console.log('没有找到对应的状态'); /*unfoundState包含了三个属性:*/ /*1.to:前往的状态名(也就是没有找到的这个状态名) * 2.toParams:前往的状态的参数(在使用ui-sref或者$state.go()的时候可以传入,这个例子里就是{a:1,b:2}) * 3.options:使用$state.go()的时候传入的第三个参数. * */ /*最后两个参数同上*/ console.log(unfoundState); //如果不写这句,那么接下来就会报错,卡住js进程了. event.preventDefault() }); scope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) { console.log('切换状态出错'); /*error是一个包含了错误信息的对象*/ console.info(error); }); //视图事件 scope.$on('$viewContentLoading', function (event, viewConfig) { console.log('视图开始加载'); }); scope.$on('$viewContentLoaded', function (event) { console.log('视图渲染完毕'); }); } } });
博文内容来源：http://www.cnblogs.com/liulangmao/p/4155015.html
