详解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 相关文章推荐
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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 查找字符串常用函数介绍
2012/06/07 PHP
PHP微信红包API接口
2015/12/05 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
prototype1.4中文手册
2006/09/22 Javascript
通用JS事件写法实现代码
2009/01/07 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
jquery replace方法去空格
2017/05/08 jQuery
JavaScript面向对象精要(上部)
2017/09/12 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
小学教研工作制度
2014/01/15 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
教师自我反思材料
2014/02/14 职场文书
财产公证书
2014/04/10 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书