这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【如何使用ui-router 】
【修真院web（职业）小课堂】如何使用ui-router
开场语：
大家好，我是IT修真院北京分院第36期的学员张新，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网js（职业）任务8，深度思考中的知识点——如何使用ui-router
（1）背景介绍：
Angular.js是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内置的路由模块。反而使用AngularUI项目的 UI-Router模块来代替之。
（2）知识剖析：
第一行，声明AngularJS模块,并把ui-router传入AngularJS主模块，所有的结合起来我们就得到了Angular模块。
与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。 和ngRoute一样，为特定状态指定的模板将会放在ui-view元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。
（3）常见问题：
如何激活状态？
（4）解决方案：
有三种方式来激活特定的状态: 使用ui-sref绑定的连接 直接导航到与状态关联的url 使用$state.go()方法
（5）编码实战：
.([]).config((){
.()
.().({
urltemplateUrl}).({
urltemplateUrl}).({
urltemplateUrl() {
.name }
}).({
urltemplateUrlcontroller}).({
urltemplateUrl() {
.books []}
}).()}
)
（6）拓展思考：
如何进行嵌套路由？
（7）参考文献：
AngularJS ui-router (嵌套路由) ui-router--登录页通过路由跳转到内页的demo
（8）更多讨论：
Q1：提问人：
为什么绑定标签src属性不解析ui-route嵌套路由？
A1：回答人（可以是分享人，也可以是其他学员）：
angular.js中出于安全考虑，将带有http://的网络地址 当做一个不安全的地址，所以需要对这个地址进行处理才能使用
Q2：提问人：
为什么总是说模块未注入?
A2：回答人（可以是分享人，也可以是其他学员）：
嵌套路由首先得引用ui-route.min.js文件.
Q3：提问人：
为什么使用ui-router而不是用ng-router
A3：回答人（可以是分享人，也可以是其他学员）：
ui-router可以实现嵌套的结构,简单来说就是父子路由问题,ng-router无法实现。
（9）鸣谢：
感谢师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地