大家好，我是IT修真院深圳分院第04期学员，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网 js任务中会使用到的知识点：
如何使用ui-router？
1.背景介绍
Angular.js是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内置的路由模块。反而使用AngularUI项目的
UI-Router模块来代替之。
这是因为UI-Router有两个重要的特性：
*多样化视图
*嵌入式视图
多样化视图
大多数的应用程序都可以分解为一个一个区块。最简单的情况，一个应用程序有头部（header）,主体内容（main content
area），以及一个尾部（footer）。通常一个应用程序会有一个额外的侧边栏（sidebar）在页面的左边或者右边,大多数用例中，这些区块将同时显示在页面上。
Angular.js的内置路由ngRoute只允许一个视图（ng-view）出现在页面上。这样限制的情况下，人们可以使用包含页面（ng-include）或者
其他的变通方法为应用创建一个布局（layout）或主页（master page）。
UI-Router支持多样化视图，并且每一个视图都有自己相应的控制，所以每个区块都是封装好，可以复用到整个应用程序需要的地方。
嵌入式视图
常见的例子中，一个应用的嵌入式页面一般是主页的详情页面，更具体的说，就是列表的详情页面。许多应用程序，都有列表页面，点击其中一个列表元素，可以进入到列表的详情页面。更进一步说，你点击列表中一个行的连接，进入一个可查看详情页面或是一个可编辑的表单。
如果列表页面和详情页面是单独分开的（或者他们被Angujar.js回调），使用Angular.js的内置路由ngRoute是非常容易完成的。然而，如果你想要保持列表不变，而详情页面出现在列表的右边或者下面，这样就变得非常具有挑战性了。
需要澄清的是，这样的要求可以使用ngRoute来完成。但是你需要让两个控制器（一个用于列表，一个用于显示和隐藏详情）共享一个视图。这样的结果不是理想的，因为我们想要列表和详情页面有各自的控制器和视图，并且职责单一（显示列表或者显示列表项目的详情）。封装这些用户接口模块到它们各自的视图，这样我们就有更多的“可组合UI”，允许我们将各个区块整合到一起，或者根据需求拆分。嵌入式视图，不仅能够让这些视图同时出现，还能让一个视图嵌入到另一个视图中。
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。
$stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。
$urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的url占位符规则。
ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。
模板，模板路径，模板Provider
上述代码在设置对象上定义了一个叫start的状态。设置对象stateConfig和路由设置对象的选项是非常相似的。开发者可以在每个视图下使用如下方式来设置模板template -
HTML字符串，或者是返回HTML字符串的函数templateUrl - HTML模板的路径，或者是返回HTML模板路径的函数templateProvider,返回HTML字符串的函数.
url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态。这样当在浏览该应用的时候便能实现深度链接的效果。
Views视图
开发者可以在同一个模板中改变和切换不同的视图。如果设置了视图选项，则该状态的‘template’，‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板，就需要创建一个包含模板的抽象模板。例如:
该函数需要两个参数：1.当前的路径，2.需要重定向到的路径（或者是需要在路径被访问是运行的函数）。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如，当希望重定向一个空的路由到/inbox：
otherwise()
和ngRoute的otherwise()函数相似，在用户提交的路径没有被定义的时候它将重定向到指定的页面。这是个创建’默认‘路径的好方法。
otherwise()只接受一个参数，要么函数要么字符串，字符串必须为合法的url路由地址，函数则会在没有任何路径被匹配的时候被运行。
3.常见问题
如何激活状态？
有三种方式来激活特定的状态
使用ui-sref绑定的连接
直接导航到与状态关联的url
使用$state.go()方法
4.解决方案
5.编码实战
6.扩展思考
如何进行嵌套路由？
7.参考文献
AngularJS ui-router (嵌套路由)
8.更多讨论
为什么绑定标签src属性不解析ui-route嵌套路由？
angular.js中出于安全考虑，将带有http://的网络地址 当做一个不安全的地址，所以需要对这个地址进行处理才能使用
嵌套路由首先得引用ui-route.min.js文件
使用$sce.trustAsResourceUrl('xxx') 方法把这个字符串地址声明为受信任的地址就可以
小课堂【深圳第342期】如何使用ui-router？
网友评论