AngularJS系列——ui-router
引言
上篇博客讲了使用AngularJs开发一个App项目的目录结构，这次我们来深入讲解一下AngularJs的路由机制。
来源
首先，我们先要知道为什么要使用路由机制。
我们都知道传统的URL是：http://…….com。浏览器会向这个地址发送服务器请求来获取相关的html和js,当我们想跳到第二个页面的时候，浏览器就会再发起一个完整的服务器请求来获取整个html内容。而在单页面应用中，url是:http://…….com/#login……。关键在于#，浏览器对于带有#的url处理方式有所不同，浏览器会向#之前的地址发送服务器请求，忽略#之后的内容。客户端可以根据URL中剩余的部分来进行后续的处理。当用户从第一个页面迁移到第二个页面的时候，浏览器不会发送额外的请求，页面也不会重新加载。只是加载相应数据以及html片段而不是重新获取整个html，尤其是当页面中的大部分内容没有发生变化时。
我们知道Angularjs是一种富客户端单页面应用，所以要在一个页面呈现不同的视图，路由是非常重要的。
AngularUI在不断发展的过程中被划分成了几个模块，今天我们来了解一下ui—router。这是一个独立的模块。
原理
Ui-router只关注状态，根据状态的变化去导航到不同的视图，视图通过ng-contorller指令找到对应的controller控制器，然后在控制器内容处理各种业务逻辑，根据指令把模型加载绑定到视图，最后呈现出来。
过程
url——>路由状态变化——>加载制定视图——>找到controller——>逻辑处理——>根据指令绑定视图——>呈现
可以去github下载指定版本：https://github.com/angular-ui/ui-router 之后在我们的页面中进行引用。
使用
下面开始展示我们在项目中是怎么使用ui-router的!
1、建立app.js文件和router.js文件
首先我们在js目录下建立app.js文件.将我们的ui-router模块注入，还有其他的全局模块。
接着在js目录下建立routes.js文件。
<span style="font-size:18px;">angular.module('itoo-exam-evaluation.routes', ['ui-router'])
</span><pre name="code" class="javascript"><span style="font-size:18px;">.config(function($stateProvider, $urlRouterProvider) {
</span>
$stateProvider .state("login",{ url:"/login", templateUrl:"templates/login.html", controller:"userCtrl" }) .state("studentEvaluate", { url: "/studentEvaluate", templateUrl: "templates/studentEvaluate.html" })
<span style="font-size:18px;">$urlRouterProvider.otherwise("/login"); </span>
});
2、代码解析
第一行：声明AngularJs模块。告诉HTML页面这是一个Angularjs作用的页面，他的内容由AngularJS引擎来解释。
<span style="font-size:18px;">angular.module('itoo-exam-evaluation.routes', ['ui-router'])</span>
第二行：我们注入了$stateProvider和$urlRouterProvider2个服务，这样就可以为这个应用程序配置路由了。
<span style="font-size:18px;">.config(function($stateProvider, $urlRouterProvider) {
</span>
语句块1：$stateProvider.state是定义了会在主页面上第一个显示出来的状态，作为母版页加载好之后第一个被使用的路由。
<span style="font-size:18px;"> $stateProvider
.state("login",{
url:"/login",
templateUrl:"templates/login.html",
controller:"userCtrl"
})</span>
默认路由：当没有路由路径能匹配当前的导航状态，会默认将路径路由到这个页面
<span style="font-size:18px;">$urlRouterProvider.otherwise("/login"); </span>
State配置参数
url：默认相对路径（以^开头的是绝对路径）views：每个子视图可以包含自己的模板、控制器和预载入数据。 (后2项选填,控制器可以在view中绑定)
abstract：抽象模板不能被激活
templateUrl: HTML模板的路径或者返回HTML模板路径的函数
controller、controllerProvider：指定任何已经被注册的控制器或者一个作为控制器的函数
<span style="font-size:18px;"> .state('tab.selectedCourses', {
url: '/selectedCourses',
views: {
'tab-selectedCourses': {
templateUrl: 'templates/tab-selectedCourses.html',
controller: "selectedCoursesCtrl"
}
}，
abstract: true,
templateUrl: "templates/tabs.html",
controller: "selectedCoursesCtrl"
})</span>
template: HTML字符串或者返回HTML字符串的函数
templateProvider：返回HTML字符串的函数
resolve：在路由到达前预载入一系列依赖或者数据，然后注入到控制器中。
data：数据不会被注入到控制器中，用途是从父状态传递数据到子状态。
onEnter/onExit：进入或者离开当前状态的视图时会调用这两个函数
总结