AngularJS路由之ui-router（二）

基本说明参考：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就是$stateParams
fromState: 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