1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
Angular.js有内置的路由模块：叫做ngRoute。但是事实却是许多开发者却不使用其内置的路由模块，而是使用一个基于ngRoute开发的第三方路由模块 （UI-Router模块）来代替。
1.知识剖析
var myApp = angular.module("myApp", [ui.router]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/PageTab");
第一行，声明AngularJS模块, 并把ui-router传入AngularJS主模块，所有的结合起来我们就得到了Angular模块。
第二行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了.
第三行，如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 PageTab.html, 这个页面就是状态名称被声明的地方。
.state("PageTab", {
url: "/PageTab",
templateUrl: "PageTab.html"
})
.state("Page", {
url: "/Page",
template: 'hello world'
})
template, 字符串方式的模板内容，或者是一个返回 HTML 的函数
templateUrl, 模板的路径，或者返回模板路径的函数
url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态。
$state / $stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的 url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。
$urlRouter / $urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。
ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。
Views 视图
开发者可以在同一个模板中改变和切换不同的视图。如果设置了视图选项，则该状态的‘template’，‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板，就需要创建一个包含模板的抽象模板。例如:
state('PageTab.uitest', {
url: '/',
views: {
'': {
template: 'hello world'
},
'status': {
template: 'home page'
}
}
});
when()
该函数需要两个参数：1.当前的路径，2.需要重定向到的路径（或者是需要在路径被访问是运行的函数）。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如，当希望重定向一个空的路由到/inbox：
$urlRouterProvider.when("","/pagedata");
otherwise()
和ngRoute的otherwise()函数相似，在用户提交的路径没有被定义的时候它将重定向到指定的页面。这是个创建’默认‘路径的好方法。 otherwise()只接受一个参数，要么函数要么字符串，字符串必须为合法的url路由地址，函数则会在没有任何路径被匹配的时候被运行。
.config(function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
// or
$urlRouterProvider.otherwise(
function($injector, $location) {
$location.path('/');
});
});
为什么大家更喜欢使用ui-router替代angular内置的ngroute
这是因为UI-Router有两个重要的特性：
* 多视图
* 嵌套视图
多视图：页面可以显示多个动态变化的不同区块。
比如：页面一个区块用来显示页面状态，另一个区块用来显示页面主内容，当路由切换时，页面状态跟着变化，对应的页面主内容也跟着变化。
$routeProvider
.when("/ngtest", {
template: 'hello world'
})
html中利用ng-view指令定义了两个区块，于是两个div中显示了相同的内容，这很合乎情理，但却不是我们想要的，但是又不能为力，因为，在ngRoute中：
1、视图没有名字进行唯一标志，所以它们被同等的处理;
2、路由配置只有一个模板，无法配置多个。
state('PageTab.uitest', {
url: '/',
views: {
'': {
template: 'hello world'
},
'status': {
template: 'home page'
}
}
});
两个区块，分别显示了不同的内容，原因在于，在ui.router中：
1、可以给视图命名，如：ui-view=”status”。
2、可以在路由配置中根据视图名字(如：status)，配置不同的模板。
嵌套视图：页面某个动态变化区块中，嵌套着另一个可以动态变化的区块。
比如：页面一个主区块显示主内容，主内容中的部分内容要求根据路由变化而变化，这时就需要另一个动态变化的区块嵌套在主区块中。
其实，嵌套视图，在html中的最终表现就像这样：
I am parent
I am child
转成javascript，我们会在程序里这样写：
$routeProvider
.when('/', {
template: 'I am parent I am child'
});
倘若，你真的用ngRoute这样写，你会发现浏览器崩溃了，因为在ng-view指令link的过程中，代码会无限递归下去。 造成这种现象的最根本原因：路由没有明确的父子层级关系！
$stateProvider
.state('parent', {
abstract: true,
url: '/',
template: 'I am parent '
})
.state('parent.child', {
url: '',
template: 'I am child'
});
1、通过parent与parent.child来确定路由的父子关系，从而解决无限递归问题。
2、另外子路由的模板最终也将被插入到父路由模板的div[ui-view]中去，从而达到视图嵌套的效果。
state.go传参
state.go跳转页面
angular.module("myApp").controller("pagectrl",function ($scope,$state) {
$scope.test = function () {
$state.go('PageTab.Page1')
}
})
state.go传参
//路由配置页面
.state("PageTab.Page1", {
url:"/Page1:id",
templateUrl: "Page1.html"
})
//跳转页面
angular.module("myApp").controller("pagectrl",function ($scope,$state) {
$scope.test = function () {
$state.go('PageTab.Page1',{"id":"test"})
}
})
//跳转目标页
angular.module("myApp").controller("page1ctrl",function ($scope,$stateParams) {
console.log($stateParams.id)
})
感谢大家观看
By 郭健锋丨曾健