ui-route的一般用法 ,比较简单。在平时项目也用到,但是我也要记下来,虽然是'借鉴的',取其精华
这是个啥?
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对应的模板,例如:
- //in js
- $stateProvider
- .state('index', {
- url: '/index',
- views: {
- '': {
- templateUrl: 'tpls/index.html'
- },
- 'main1@index': {
- templateUrl: 'tpls/form1.html'
- },
- 'main2@index': {
- templateUrl: 'tpls/form2.html'
- }
- }
- })
- //in html
- <div class="container">
- <div ui-view="main1"></div>
- <div ui-view="main2"></div>
- </div>
这个代码中将form1.html 和 form2.html 填充到了对应的的view中。
添加触发器
如果在标签中添加了 ui-sref="xxx"
,未激活状态时,它是看不到的。具体描述可以看下官网. 通常我们都是激活状态,但有时总想自己控制一下。可以参考:
- <ul>
- <li ui-sref-active="active" class="item">
- <a href ui-sref="app.user({user: 'fansy'})">@fansy</a>
- </li>
- </ul>
当user是fansy时,显示后面那行字。这个例子是官方的,我是没用明白这个功能,回头在研究吧。
配置路由
首先是 $urlRouterProvider
它通常用来配置非 $state
的额外的路由.例如:
- $urlRouterProvider.when("","/home");
将默认页设置为/home的URL。注意哦,这里用的是URL,别写错成state了。
当然也可以写一个任何额外页面的定向:
- $urlRouterProvider.otherwise("/home");
这样访问其他阿猫阿狗的页面,就都跑到/home那去了。
然后是 $stateProvider
触发点是按层级来的,它遵守的路由规则可以从官网的,这个页面 中找到。通过 $state.go
函数可以将状态位置强行切换,我们可以在任何一处写下面的js代码:
- $state.go('home.state1');
另外,你也可以在$stateProvider 中对应的state里面配置controller,当这种state被激活,就会调用对应的函数了,例如:
- $stateProvider
- .state("home",{
- url:"/home",
- templateUrl:"tmpls/home.html",
- controller:function($scope,$state) {
- console.log("enter home");
- }
- })
每当状态变为home时,都输出一条日志。
最后,渲染是按层级来的。因此改变同级节点并不会重新渲染父节点。并且不改变状态就不会重新渲染。比如一直按同一个按钮,就不会重新渲染;没更改跟节点,点一个"刷新"按钮,也不会刷新整个页面。
最后
如果你觉得这篇文章对你有帮助,可以顺手点个顶,不但不会喜当爹,还能让更多人能看到它...
ui-route的一般用法 ,比较简单。在平时项目也用到,但是我也要记下来,虽然是'借鉴的',取其精华的更多相关文章
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)
iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
- 创建一个可用的简单的SpringMVC项目,图文并茂
转载麻烦注明下来源:http://www.cnblogs.com/silentdoer/articles/7134332.html,谢谢. 最近在自学SpringMVC,百度了很多资料都是比较老的,而 ...
- QT编写TCP入门+简单的实际项目(附源程序)
我个人感觉学习QT不需要那么深入的了解,因为我就是编写一下界面来实现理想的功能而已,我不是靠这个吃饭,当然以后要是从事这个方向那就好好深入底层好好学了. 学习QT的TCP:第一步:去百度看看TCP的介 ...
- 一个简单的nodejs项目(cat-names)分析
https://github.com/sindresorhus/cat-names 一个非常简单的nodejs项目,用来方便的获取猫猫的名字: 安装: npm install --save cat-n ...
- 一个简单的NetCore项目:1 - 搭建框架,生成数据库
1- 启动项目 安装.NETCORE SDK,教程在网上可以搜索的到,这里就不讲述了.简单粗暴的方式就是安装最新的VS2015. 2-搭建框架 2.1 打开VS新建一个项目,在弹出的新建项目对话框中, ...
- 通过myclipse建立一个简单的Hibernate项目(PS:在单元测试中实现数据的向表的插入)
Hibernate的主要功能及用法: Ⅰ.Hibernate封装了JDBC,使Java程序员能够以面向对象的思想对数据库进行操作 Ⅱ.Hibernate可以应用于EJB的J2EE架构,完成数据的持久化 ...
- 使用spring 4.0 + maven 构建超简单的web项目
一.需求 使用spring去管理web项目,是目前非常流行的一种思路,本文将介绍使用maven+spring 4.0.2 来构建一个简单的web项目. 二.实现 1.新建一个maven项目,如下图所示 ...
- 三、使用Maven构建简单的java项目
前边,我刚搭建了Maven环境,还有给大家推荐了学习资源,这个小节,我们来就来,,简单的玩玩maven. 1.所需工具: 1.Eclipse 2.apache-maven-3.3.9 3. ...
- 一个简单的JUnit项目
本人一直很喜欢JAVA,可是真正接触到JUnit也不过半年.由于公司进行网页测试,采用的是 JUnit+selenium的方式搭建的测试框架,然后采用JAVA语言编写,所以本人也好好研究了一下JUni ...
随机推荐
- ubuntu20 源码安装nginx以及常用命令
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 ubuntu下安装nginx 个人建议还是不要自己apt-get安装,反正最后加模块还是得用源码编译安装那一套流程 下的慢的该换源换源,该换网换网 ...
- 《Java多线程编程核心技术》知识梳理
<Java多线程编程核心技术> @author ergwang https://www.cnblogs.com/ergwang/ 文章末尾附pdf和png下载链接 第1章 Java多线程技 ...
- JS的Event各种属性级target/currentTarget/relatedTarget各种目录的解释
1.Event属性解释:https://developer.mozilla.org/zh-CN/docs/Web/API/Event 2.Event.target/currentTarget/rela ...
- Java 中的 TreeMap 是采用什么树实现的?
Java 中的 TreeMap 是使用红黑树实现的.
- 1.时任务XXL_Job框架踩过的坑
遇到的问题 问题1:执行器地址为空 原因-->执行器中 没有地址 解决方案-->输入地址:http://IP地址:端口 IP地址 端口 问题2:异常信息unknown code for r ...
- 攻防世界baby_web
baby_web 题目提示想想初始页,但我们一访问就会跳转到1.php我们使用bp抓包分析,我们发送到repeater模块修改请求访问1.php内容看看 发现flag隐藏了我们去hex中看看 这样我们 ...
- Proxy相比于defineProperty的优势
本文原链接:https://www.jianshu.com/p/860418f0785c https://blog.csdn.net/sinat_17775997/article/details/83 ...
- HTML5标签速查
HTML5标签速查,助你快速了解HTML 5. HTML 5新加入的标签以黑体标识,HTML 5不支持的以斜体标识. 标签 描述 <!--...--> 评论 <!DOCTYPE> ...
- 前端webpack workflow(二)——Webpack基本使用
作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 前一篇文章介绍了webpack以及安装方法,这次将会介绍web ...
- java中当static块和构造函数同时出现,顺序是?
静态块先于构造函数执行 class Student { int age; String name; static int count; public Student() { ...