这是个啥?
ui-router是一个web客户端的路由解决方案。我觉得它最大的作用是将web界面的设计分块了。
分块分层
最初的web访问模型,是这样的:
我们访问page1,然后访问page2....
在新的模型中它变成了这个样子:
访问效果是一样的,但是从设计上已经有了变化。它变成了:只有一张网页,在网页中有不同的区域,每个区域都可擦写。仔细想想好像也挺常见的,不知道其他技术是不是也这样
代码实现
原理讲完再简述一下实现吧
- 下载js文件,引入到
index.html
文件中。 - 在html中,添加注入位置:
<div ui-view="">
。它是当被触发注入时,填充的位置。 - 在html中,添加触发器:
<ANY ui-sref="XXX">
。XXX是$state,它遵循xxx.xxx的树形结构,渲染时从根节点开始渲染。 - 在app.js中,配置路由函数
.config(function($stateProvider,$urlRouterProvider) {});
细说一下:
引入代码
没啥要细说的,要说就是路径别写错吧。
注入位置
对于多个分栏的结构,可以使用多个view的实现,然后反过来在config中使用bbb@AAA
的声明指定本state中子view对应的模板,例如:
这个代码中将form1.html 和 form2.html 填充到了对应的的view中。
添加触发器
如果在标签中添加了ui-sref="xxx"
,未激活状态时,它是看不到的。具体描述可以看下官网. 通常我们都是激活状态,但有时总想自己控制一下。可以参考: