大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，如何使用UI-ROUTER？
分享人：郭婷婷
1.背景介绍
Angular.js有内置的路由模块：叫做ngRoute。但是事实却是许多开发者却不使用其内置的路由模块，而是使用一个基于ngRoute开发的第三方路由模块
（UI-Router模块）来代替。
2.知识剖析
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('/');
});
});
3.常见问题
为什么大家更喜欢使用ui-router替代angular内置的ngroute
这是因为UI-Router有两个重要的特性：
* 多视图
* 嵌套视图
4.解决方案
多视图：页面可以显示多个动态变化的不同区块。
比如：页面一个区块用来显示页面状态，另一个区块用来显示页面主内容，当路由切换时，页面状态跟着变化，对应的页面主内容也跟着变化。
$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 parentI 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]中去，从而达到视图嵌套的效果。
5.编码实战
6.扩展思考
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)
})
7.参考文献
8.更多讨论
1、ui-sref 和 $state.go 的区别
ui-sref 一般使用在 <a> 标签上；而$state.go一般使用在 controller 里面。
2、$stateParams怎样获取参数？
在目标页面的controller里注入$stateParams，然后 "$stateParams.参数名" 获取传递的参数。
3、UI-ROUTER如何设置？
这里是如何设置一个基本url。
$stateProvider
.state('contacts', {
url:"/contacts",
templateUrl:'contacts.html'
})
当我们访问index.html/contacts时，'contacts'状态将被激活，同时index.html中的ui-view将被'contacts.html'填充。或者，通过transitionTo('contacts')方法将状态转变到'contacts'状态，同时 url 将更新为index.html/contacts。
鸣谢
感谢大家观看
BY :郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/js-06-ui-router-pek.html#/
视频链接:https://v.qq.com/x/page/o0527550hgl.html
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
