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 ...
随机推荐
- 阿里云镜像站DNS——Chrome配置方法
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 DNS 简介 域名系统(服务)协议(DNS)是一种分布式网络目录服务,主要用于域名与 IP 地址的相互转换,以及控制因特网的电子邮件的发送. 阿 ...
- 嵌入式Linux应用开发完全手册之环境搭建
@ 目录 0.下载源配置 1.电脑BIOS启动虚拟化 2.linux网卡查看与IP设置 3.windows NAT虚拟网络配置 4.修改 Ubuntu 的 mountd 端口 5.vim设置 6.Mo ...
- Java基础——方法的调用
Java基础--方法的调用 总结: 1. 在同一个类中-- 对于静态方法,其他的静态和非静态方法都可以直接通过"方法名"或者"类名.方法名"调用它. 对 ...
- Java的http post请求01之HttpURLConnection
package com.ricoh.rapp.ezcx.iwbservice.webservice; import java.io.BufferedOutputStream; import java. ...
- noi.ac 字符串游戏
题面 Zhangzj和Owaski在玩一个游戏.最开始有一个空的01串,Zhangzj和Owaski轮流进行操作,Zhangzj先走.每次进行操作的人可以在串上任意位置加一个新的字符,由于串是01串, ...
- 变量 Java day 5
Java 第五天的学习 变量 变量注意事项 变量的底层 ASCII编码表 1.什么是变量? 概念:变量及代数. 在Java中,变量分为两种:基本类型的变量和引用类型的变量 1>基本类型的变量:必 ...
- Mysql学习笔记-临键锁实验
前言 昨天同事跟我聊到一个问题:InnoDB里面间隙锁锁住的数据可以update么?我们经常都说间隙锁是InnoDB在RR隔离级别下防止幻读的一种处理手段.它可以防止数据在间隙范围中insert数据, ...
- JVM内存模型——堆(heap)、栈(stack)和方法区(method)
JAVA的JVM的内存可分为3个区:堆(heap).栈(stack)和方法区(method) 堆区:堆内存用于存放由new创建的对象和数组.堆是JVM管理的内存中最大的一块,堆被所有线程共享,目的 ...
- eclipse启动指定jvm的版本
参阅:https://www.eclipse.org/forums/index.php/t/1105435/ https://wiki.eclipse.org/Eclipse.ini#-vm_valu ...
- vue使用svg,animate事件绑定无效问题及解决方法
由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...