angular 系列七 ui-router路由控制器介绍

angularUI 在不断发展过程中已经被划分成了几个模块,你可以选择你需要的模块载入,我们今天要了解一下路由控制器 ui-router,它就是angularUI划分出出来的一个独立模块.

此模块只关注状态,在整个用户界面导航中,一个状态对应一个视图,开发者可以根据URL状态来组织控制界面UI渲染.

这里和后端开发有一点点区别需要注意:

后端: 以node.js使用express框架的web开发为例,当我们定位一个路由,对应的会去服务端请求相应资源,服务器端接收请求,解析路由,然后做一系列逻辑处理,最后指定一个视图返回客户端.

url —> 路由 —> 逻辑处理 —> 替换视图 —> 返回客户端 —> 呈现

angular:浏览器定位一个路由,ui-router会触发状态改变,状态改变加载对应的视图,视图通过ng-controller 指令找到对应的controller控制器,然后控制器处理各种业务逻辑,然后根据指令把模型加载绑定到视图,最后在浏览器呈现.

url —> 路由状态改变 —> 加载指定视图 —> 找到controller控制器 —> 处理逻辑 —> 模型根据指令绑定视图 —> 呈现

该模块提供了视图嵌套的功能,同一个页面使用多个视图,让多个视图控制某个视图等复杂web应用.

你可以去github下载指定版本:https://github.com/angular-ui/ui-router

或者也可以通过 bower 来安装前端包,关于 bower 前端包管理器使用回头我们可以单独分享.

zhangzhi@moke:~/code/work/Client/vender$bowerinstallangular-ui-router—save

它会把新版本下载到你当前所在目录下面.(当前最新版是 0.2.13 )

页面使用的时候直接引用:

<scriptsrc="./vender/angular-ui-router-0.2.13.js"></script>

我们在上一篇angular系列六 module类的介绍及模块化依赖中介绍了几个常用模块,而今天学习的 ui-router 是我们在整个应用中全局必须用到的.所以我们可以把它注册在 module.config 方法中.

我们在Client 根目录下新建了main.js 文件,用来加载 module.config 方法.

angular.module('YIJIEBUYI',['ui.router'])
.config(['$locationProvider','$urlRouterProvider',function($locationProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/blog/index");
}]);

以后我们用到的常用全局模块会陆续放到此函数注册,目前只需要 ui-router 模块.

接着在routes 目录中创建一个路由配置文件 blog.js

angular.module('YIJIEBUYI').config(['$stateProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider
.when('/blog','/blog/index')
.otherwise('/blog/index');

$stateProvider.state('blog',{
url:'/blog',views:{
'container':{templateUrl:'templates/blog/layout.html'}
}
}).state('blog.index',{
url:'/blog/index',views:{
'container':{templaterUrl:'templates/blog/index.html'}
}
})
}]);

因为main.js 中我们已经注册 ui-router 模块,所以我们上面配置的路由文件中,注入了 $stateProvider,$urlRouterProvider 2个服务.angular.js 的服务注入机制会根据参数名称自动去已经定义的服务列表里查询并注入.

上面的路由定义中有 $urlRouterProvider,此服务主要是设置默认otherwise 路由.

路由定义全部由 $stateProvider 服务来提供,state 支持多层嵌套,子类继承父类的特性,下一篇我们主要分享一下 stateProvider 内容.