详解angularjs 关于ui-router分层使用


Posted in Javascript onJune 12, 2017

最近感觉有很多学angular 的童鞋在路由问题中还不清楚怎么使用。其实我之前也是一直晕晕的不懂怎么用,现在要好得多了。在这里就记录下ui-router使用。

就已目前做的这个项目来介绍下怎么使用吧。Note:最好是按照层次规则来设置路由名,好处是容易看懂,也便于管理。

我这里是以总state到模块state再到下一层模块state(再到下一层模块state)最后到详细页面的state来分层。

首先我们先定义一个总的state如:

.state('home', {
      url: '/home?backKey',
//     abstract: true,
      templateUrl:'home/home.html',
      controller:'homeCtrl'
    })

在homeCtrl中可以为空,看需求吧。因为这个是最顶层的state所以在angular.module中一定要把下一层的路由angular.module依赖进来。如果有多个模块那就分别依赖进来,用逗号隔开,这里就依赖一个模块来说明下。如var m = angular.module("ms.homeRouter", ['ms.hrRouter']);

而在home.html中必须要存在一个<ui-view/> 作为祖模板。好了到这里就已经把最顶层的工作内容完成了,现在开始各个模块路由分配。

上面已经说到一个ms.hrRouter的模块依赖进来,现在就已这个为例来说明下配置:在这个模块中新建个js文件,定义一个angular.module,名字就是ms.hrRouter。

var m = angular.module("ms.hrRouter", [
  'ms.hrDismissionRouter']);

这个就是hr的模块,在这模块中又有该模块的子模块。angular.module名依赖进来,在这模块的路由中先配置下总路由,然后再在该路由下分下一层模块(或者子页面)路由。

.state('home.hr', {
        url: '/hr',
        template: '<ui-view />',
        controller: 'hrCtrl'
      })
      .state('home.hr.dismission', {
        url: '/dismission',
        template: '<ui-view />',
        controller: 'hrNextCtrl'
      })
      });

说明下上面的代码:state名为home.hr说明这个是在hr模块中的顶层路由。其template为'<ui-view />' 意思是抽象的,如果路由定位这里其显示内容其实是在home层页面中的ui-view中,这里的hrCtrl内容也可以为空,看需求,但必须要定义出这个控制器否则会报错(上面home的也是一样)。接着来解释下下面state名为home.hr.dismission路由:从名字就可以看出来这个路由就是hr模块的下一层模块,名为dismission。而url对象也是这模块的名字,以便在浏览器地址中可以直接看出是在哪模块哪层哪里。template、controller两个属性跟上面解释是一样的。

到现在已经完成了顶层路由home到hr模块路由再到dismission模块路由说明。

now到dismission模块中的详情页面的路由配置:在dismission模块中也新建一个路由js文件。这个模块的angular.module配置为var m = angular.module("ms.hrDismissionRouter", []);

因为这个是最底层的路由了已经再也没有子路由依赖了,所以后面的[]中是空的。在这页面中的state配置如:

.state('home.hr.dismission.commonApproval', {
      url: '/commonApproval?taskId&openid&doType',
      templateUrl: 'hr/dismissionAppl/dismissionAppl.html',
      resolve: {
        dismRsl: getResolve()
      },
      controller: 'dismissionApplCtrl'
    })
]);

从state名字也可以看出,这个是在dismission模块的子层。url也是这个页面的路由名,以及这个页面需要带的参数。这里的resolve的作用是在页面加载前先执行getResolve()方法。该方法的目的是获取数据,达到进该页面前先获取到该页面的数据,等到该页面的所有数据都获取完后再跳转到该页面。这个resolve属性不懂的可以百度,或者我博客中也有篇介绍的,可以看看。

好了!可能说得不是太明白但总体思路就是这样。

Note: 最好是在每层模块中都新建两个js文件,一个是router.js一个是controller.js这样好管理。详解angularjs 关于ui-router分层使用 这是模块分层对应的文件分层。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 #Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 #Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
AngularJS自定义指令详解(有分页插件代码)
Jun 12 #Javascript
前端构建工具之gulp的语法教程
Jun 12 #Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 #Javascript
微信小程序 自定义Toast实例代码
Jun 12 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP检测用户语言的方法
2015/06/15 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
在Python中表示一个对象的方法
2019/06/25 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
家具促销活动方案
2014/02/16 职场文书
出纳岗位职责范本
2015/03/31 职场文书
结婚幸福感言
2015/08/01 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
Redis实战高并发之扣减库存项目
2022/04/14 Redis
MySQL 字符集 character
2022/05/04 MySQL