这是个啥?

ui-router是一个web客户端的路由解决方案。我觉得它最大的作用是将web界面的设计分块了。

分块分层

最初的web访问模型,是这样的:

我们访问page1,然后访问page2....

在新的模型中它变成了这个样子:

访问效果是一样的,但是从设计上已经有了变化。它变成了:只有一张网页,在网页中有不同的区域,每个区域都可擦写。仔细想想好像也挺常见的,不知道其他技术是不是也这样 

代码实现

原理讲完再简述一下实现吧

  1. 下载js文件,引入到index.html文件中。
  2. 在html中,添加注入位置: <div ui-view="">。它是当被触发注入时,填充的位置。
  3. 在html中,添加触发器:<ANY ui-sref="XXX">。XXX是$state,它遵循xxx.xxx的树形结构,渲染时从根节点开始渲染。
  4. 在app.js中,配置路由函数 .config(function($stateProvider, $urlRouterProvider) {});

细说一下:

引入代码

没啥要细说的,要说就是路径别写错吧 

注入位置

对于多个分栏的结构,可以使用多个view的实现,然后反过来在config中使用bbb@AAA的声明指定本state中子view对应的模板,例如:

  1. //in js
  2. $stateProvider
  3. .state('index', {
  4. url: '/index',
  5. views: {
  6. '': {
  7. templateUrl: 'tpls/index.html'
  8. },
  9. 'main1@index': {
  10. templateUrl: 'tpls/form1.html'
  11. },
  12. 'main2@index': {
  13. templateUrl: 'tpls/form2.html'
  14. }
  15. }
  16. })
  17. //in html
  18. <div class="container">
  19. <div ui-view="main1"></div>
  20. <div ui-view="main2"></div>
  21. </div>

这个代码中将form1.html 和 form2.html 填充到了对应的的view中。

添加触发器

如果在标签中添加了 ui-sref="xxx",未激活状态时,它是看不到的。具体描述可以看下官网. 通常我们都是激活状态,但有时总想自己控制一下。可以参考:

  1. <ul>
  2. <li ui-sref-active="active" class="item">
  3. <a href ui-sref="app.user({user: 'fansy'})">@fansy</a>
  4. </li>
  5. </ul>

当user是fansy时,显示后面那行字。这个例子是官方的,我是没用明白这个功能,回头在研究吧。

配置路由

首先是 $urlRouterProvider

它通常用来配置非 $state 的额外的路由.例如:

  1. $urlRouterProvider.when("","/home");

将默认页设置为/home的URL。注意哦,这里用的是URL,别写错成state了。

当然也可以写一个任何额外页面的定向:

  1. $urlRouterProvider.otherwise("/home");

这样访问其他阿猫阿狗的页面,就都跑到/home那去了。

然后是 $stateProvider

触发点是按层级来的,它遵守的路由规则可以从官网的,这个页面 中找到。通过 $state.go 函数可以将状态位置强行切换,我们可以在任何一处写下面的js代码:

  1. $state.go('home.state1');

另外,你也可以在$stateProvider 中对应的state里面配置controller,当这种state被激活,就会调用对应的函数了,例如:

  1. $stateProvider
  2. .state("home",{
  3. url:"/home",
  4. templateUrl:"tmpls/home.html",
  5. controller:function($scope,$state) {
  6. console.log("enter home");
  7. }
  8. })

每当状态变为home时,都输出一条日志。

最后,渲染是按层级来的。因此改变同级节点并不会重新渲染父节点。并且不改变状态就不会重新渲染。比如一直按同一个按钮,就不会重新渲染;没更改跟节点,点一个"刷新"按钮,也不会刷新整个页面。

最后

其他详细可以看它的主页 ,另外有一篇 好文章 也值得借鉴.

如果你觉得这篇文章对你有帮助,可以顺手点个顶,不但不会喜当爹,还能让更多人能看到它... 

ui-route的一般用法 ,比较简单。在平时项目也用到,但是我也要记下来,虽然是'借鉴的',取其精华的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

    iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...

  3. 创建一个可用的简单的SpringMVC项目,图文并茂

    转载麻烦注明下来源:http://www.cnblogs.com/silentdoer/articles/7134332.html,谢谢. 最近在自学SpringMVC,百度了很多资料都是比较老的,而 ...

  4. QT编写TCP入门+简单的实际项目(附源程序)

    我个人感觉学习QT不需要那么深入的了解,因为我就是编写一下界面来实现理想的功能而已,我不是靠这个吃饭,当然以后要是从事这个方向那就好好深入底层好好学了. 学习QT的TCP:第一步:去百度看看TCP的介 ...

  5. 一个简单的nodejs项目(cat-names)分析

    https://github.com/sindresorhus/cat-names 一个非常简单的nodejs项目,用来方便的获取猫猫的名字: 安装: npm install --save cat-n ...

  6. 一个简单的NetCore项目:1 - 搭建框架,生成数据库

    1- 启动项目 安装.NETCORE SDK,教程在网上可以搜索的到,这里就不讲述了.简单粗暴的方式就是安装最新的VS2015. 2-搭建框架 2.1 打开VS新建一个项目,在弹出的新建项目对话框中, ...

  7. 通过myclipse建立一个简单的Hibernate项目(PS:在单元测试中实现数据的向表的插入)

    Hibernate的主要功能及用法: Ⅰ.Hibernate封装了JDBC,使Java程序员能够以面向对象的思想对数据库进行操作 Ⅱ.Hibernate可以应用于EJB的J2EE架构,完成数据的持久化 ...

  8. 使用spring 4.0 + maven 构建超简单的web项目

    一.需求 使用spring去管理web项目,是目前非常流行的一种思路,本文将介绍使用maven+spring 4.0.2 来构建一个简单的web项目. 二.实现 1.新建一个maven项目,如下图所示 ...

  9. 三、使用Maven构建简单的java项目

    前边,我刚搭建了Maven环境,还有给大家推荐了学习资源,这个小节,我们来就来,,简单的玩玩maven. 1.所需工具: 1.Eclipse     2.apache-maven-3.3.9   3. ...

  10. 一个简单的JUnit项目

    本人一直很喜欢JAVA,可是真正接触到JUnit也不过半年.由于公司进行网页测试,采用的是 JUnit+selenium的方式搭建的测试框架,然后采用JAVA语言编写,所以本人也好好研究了一下JUni ...

随机推荐

  1. ubuntu20 源码安装nginx以及常用命令

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 ubuntu下安装nginx 个人建议还是不要自己apt-get安装,反正最后加模块还是得用源码编译安装那一套流程 下的慢的该换源换源,该换网换网 ...

  2. 《Java多线程编程核心技术》知识梳理

    <Java多线程编程核心技术> @author ergwang https://www.cnblogs.com/ergwang/ 文章末尾附pdf和png下载链接 第1章 Java多线程技 ...

  3. JS的Event各种属性级target/currentTarget/relatedTarget各种目录的解释

    1.Event属性解释:https://developer.mozilla.org/zh-CN/docs/Web/API/Event 2.Event.target/currentTarget/rela ...

  4. Java 中的 TreeMap 是采用什么树实现的?

    Java 中的 TreeMap 是使用红黑树实现的.

  5. 1.时任务XXL_Job框架踩过的坑

    遇到的问题 问题1:执行器地址为空 原因-->执行器中 没有地址 解决方案-->输入地址:http://IP地址:端口 IP地址 端口 问题2:异常信息unknown code for r ...

  6. 攻防世界baby_web

    baby_web 题目提示想想初始页,但我们一访问就会跳转到1.php我们使用bp抓包分析,我们发送到repeater模块修改请求访问1.php内容看看 发现flag隐藏了我们去hex中看看 这样我们 ...

  7. Proxy相比于defineProperty的优势

    本文原链接:https://www.jianshu.com/p/860418f0785c https://blog.csdn.net/sinat_17775997/article/details/83 ...

  8. HTML5标签速查

    HTML5标签速查,助你快速了解HTML 5. HTML 5新加入的标签以黑体标识,HTML 5不支持的以斜体标识. 标签 描述 <!--...--> 评论 <!DOCTYPE> ...

  9. 前端webpack workflow(二)——Webpack基本使用

    作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 前一篇文章介绍了webpack以及安装方法,这次将会介绍web ...

  10. java中当static块和构造函数同时出现,顺序是?

    静态块先于构造函数执行 class Student {    int age;    String name;    static int count;    public Student() {   ...