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 ...
随机推荐
- Linux下使用Google Authenticator配置SSH登录动态验证码
1.一般ssh登录服务器,只需要输入账号和密码.2.本教程的目的:在账号和密码之间再增加一个验证码,只有输入正确的验证码之后,再输入密码才能登录.这样就增强了ssh登录的安全性.3.账号.验证码.密码 ...
- C++设计模式 - 命令模式(Command)
行为变化模式 在组件的构建过程中,组件行为的变化经常导致组件本身剧烈的变化."行为变化" 模式将组件的行为和组件本身进行解耦,从而支持组件行为的变化,实现两者之间的松耦合. 典型模 ...
- 数据库中间件ShardingSphere-Proxy(一)
1.现实中的问题 我们知道数据库的数据,基本80%的业务是查询,20%的业务涵盖了增删改,经过长期的业务变更和积累数据库的数据到达了一定的数量之后,直接影响的是用户与系统的交互,查询时的速度,插入数据 ...
- Struts2框架提供的结果类型?
已配置结果类型名 类 名 描 述 dispatcher org.apache.struts2.dispatcher.ServletDispatcherResult 默认结果类型,用来呈现JSP页面 c ...
- Spring如何处理线程并发问题?
在一般情况下,只有无状态的Bean才可以在多线程环境下共享,在Spring中,绝大部分Bean都可以声明为singleton作用域,因为Spring对一些Bean中非线程安全状态采用ThreadLoc ...
- Java 建造者Builder
import java.util.ArrayList; import java.util.List; import java.util.function.Consumer; import java.u ...
- 学习openstack(五)
OpenStackOpenStack介绍OpenStack是一种免费的开源平台,帮助服务提供商实现类似于亚马逊EC2和S3的基础设施服务.OpenStack当前有三个核心项目:计算(Nova),对象存 ...
- 数据库之“日期处理函数:date_add()与 date_sub()与 datediff()与 timedifff()与 date_format()”
一.加减某个时间间隔:date_add()与 date_sub()函数 1. date_add() :加 select date_add('2019-12-12', interval 1 day) d ...
- SphinxJS——把字符串编码成png图片的超轻量级开源库
体验地址:https://jrainlau.github.io/sp...项目地址:https://github.com/jrainlau/s... SphinxJS 一个能够把字符串编码成png图片 ...
- canvas离屏、旋转效果实践——旋转的雪花
效果展示理论基础--"常见的canvas优化--模糊问题.旋转效果" 用离屏canvas画基础部分 1.封装画线函数 function drawLine(ctx,x1,y1,x2, ...