按照传统的操作方式,一般是点击某个按钮或者某个菜单项,我们将页面通过指定URL的方式跳转,

在HTML中,使用的是传统的a标签的href属性作跳转,在使用ui-router的情况下,我们对一个按钮

添加ui-sref属性,即为该按钮对应的路由状态。注意,此处所说的路由URL,都与状态相关。就是之前

在state中配置的那些属性。

  关于ui-router的使用不过多详述,再此仅简单示例:

 .state('demoState', {
parent: 'site',
url: '/demo/{id}',
data: {
pageTitle: 'DEMO页面'
},
views: {
'content@': {
templateUrl: 'demo.html',
controller: 'DemoController.js'
}
},
resolve: {  
datas:['MyService',function(MyService){
return MyService.query({});    //这里通过resolve注入一些数据,可以将其注入到控制器中使用
}]
}
})
  demoState是我自定义的一个状态,如果当一个按钮中含有属性ui-sref="demoState({id:1})"时,那么点击这个按钮时候就会跳转到demoState这个路由,其中id:1是给该路由传递的参数
与state配置中的url中的{id}相对应,当点击这个按钮时浏览器上的URL将根据state中的url变更为/demo/1,而这个URL对应的视图模板为demo.html,对应的控制器为DemoController.js。
到了这一步,就可以在视图的控制器上写逻辑了。

0004-程序流程2之ui-router大意的更多相关文章

  1. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  2. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  3. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  4. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  5. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  6. Linux服务器模型及其对应的程序流程

    一.TCP循环服务器 TCP循环服务器一次只能处理一个客户端的请求,处理完成后,才能接受下一个客户端的请求,程序流程如下: socket(......);//创建套接字 bind(......);// ...

  7. [java学习笔记]java语言基础概述之运算符&程序流程控制&for循环嵌套

    一.运算符 算数运算符 +,-,*,/,%,++,-- 1.+,-,*,/ 整数除以整数的结果为舍弃了小数部分的整数. 2.%:取余 %左右都为正数,左边小于右边结果为左边值,如,4%5=4 %左边大 ...

  8. Java变量&&简单程序流程&&循环

    变量:强类型局部变量: 1.先赋值,后使用 2.作用范围:从定义开始,到所在代码块结束 3.重合范围内不允许重复命名 数据类型(8中基本类型) byte 1B -128~127 short 2B -3 ...

  9. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  10. Java 基础 程序流程控制 (下)

    Java 程序流程控制 (下) 此篇单独对循环结构的知识点进行整理: 之前讲到循环结构分为:for循环,while循环,do...while循环三种最基本的循环结构:在JDK1.5以后的版本还提供了f ...

随机推荐

  1. 深入理解Lambda

    概述 Lambda是一个表达式,也可以说它是一个匿名函数.然而在使用它或是阅读Lambda代码的时候,却显得并不那么容易.因为它匿名,因为它删减了一些必要的说明信息(比如方法名).下面就来说说Lamb ...

  2. grunt,gulp,webpack前端打包工具的特性

    1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...

  3. linux Centos7 下vsftpd 安装与配 FTP

    一.说明 linux 系统下常用的FTP 是vsftp, 即Very Security File Transfer Protocol. 还有一个是proftp(Profession ftp). 我们这 ...

  4. H264的start code是什么?

    H.264起始码 在网络传输h264数据时,一个UDP包就是一个NALU,解码器可以很方便的检测出NAL分界和解码.但是如果编码数据存储为一个文件,原来的解码器将无法从数据流中分别出每个NAL的起始位 ...

  5. lua基础---函数

    Lua的函数功能很强大,保留了C语言的一些基本的特性,但是也有C语言没有的特性,比如,lua可以在一个函数返回多个值,我们来看看下面这个案例: 解释运行: lua test5.lua --定义一个函数 ...

  6. 关于json解析和所需jar

    以解析字符串数组为例: String parameter= [{"id":"pdTNKcY1YS55oG2M",.......}] 1. 关于net.sf.js ...

  7. Java String 面试题以及答案

    String是最常使用的Java类之一,整理的了一些重要的String知识分享给大家. 作为一个Java新手程序员,对String进行更深入的了解很有必要.如果你是有几年Java开发经验,可以根据目录 ...

  8. 前端之css样式02

    一.float属性 block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度.block元素可以设置width.height.mar ...

  9. E: Could not get lock /var/lib/dpkg/lock解决

    ubuntu常见错误--Could not get lock /var/lib/dpkg/lock解决 通过终端安装或卸载程序sudo apt-get install/autoremove xxx时出 ...

  10. v-if和v-show的区别

    v-if 是“真实”的条件渲染,因为它会确保条件块(conditional block)在切换的过程中,完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件. v- ...