如何使用UI-rounter

大家好，我是IT修真院深圳分院第02期学员孙剑立，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网JS任务5中如何使用UI-rounter？

1.背景介绍

路由(route)，几乎所有的MVC(VM)框架都应该具有的特性，因为它是前端构建单页面应用(SPA)必不可少的组成部分。 那么，对于angular而言，它自然也有内置的路由模块：叫做ngRoute。 不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！ 于是，一个基于ngRoute开发的第三方路由模块，叫做ui.router，受到了大家的“追捧”。

2.知识剖析

ngRoute与ui.router的优劣

首先，无论是使用哪种路由，作为框架额外的附加功能，它们都将以模块依赖的形式被引入，简而言之就是：在引入路由源文件之后，你的代码应该这样写(以ui.router为例)：

angular.module("myApp", ["ui.router"]);

// myApp为自定义模块，依赖第三方路由模块ui.router

其实ui.router和ngRoute大体的设计思路，对应的模块划分都是一致的(毕竟是同一个团队开发)，不同的地方在于功能点的实现和增强。

那么问题来了：ngRoute弱在哪些方面，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”，允许我们将各个区块整合到一起，或者根据需求拆分。嵌入式视图，不仅能够让这些视图同时出现，还能让一个视图嵌入到另一个视图中。

3.常见问题

如何使用ui.router

4.解决方案

UI-ROUTER的使用a.引入两个文件，angular和angular-ui-router：b.主页面中设置容器ui-viewc.然后在ng-app中注入ui-routerd.最后配置路由表

一个简单的ui.router结构示例

UI-Router 引进了状态机设计模式，抽象高于传统的路由。路由成了状态，URL就成了状态的一个简单属性。

5.编码实战

demo

6.更多讨论

7.参考文献

菜鸟教程

UI-Router:为什么开发者都不喜欢Angular.js内置的路由

深入理解ANGULARUI路由_UI-ROUTER

8.视频资料

视频

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

请点击链接【修真院】

來源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。