Angularjs中UI Router的使用方法


Posted in Javascript onMay 14, 2016

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解;这里只是把填补的几个坑记录一下备忘:

1.abstract的使用:

$stateProvider
  .state('shop',{
    resolve:{
      "shoplist":function($http){
        return $http({
          url:"/bookApp/data/shoplist.php",
          method:"GET"
        })
      }
    },
    abstract: true,
    url:"/shop",
    templateUrl:"templates/shop/list.html",
    controller:"ShopListController"
})

使用abstract属性有什么用,官方说明:abstract: true 表明此状态不能被显性激活,只能被子状态隐性激活。不能显性激活即不能直接通过"/shop"访问此状态路由,那不就是一条死路吗?那要你何用。等等,我们再看看后面一句:能被子状态隐性激活,貌似还能活起来,怎么让他活起来?我们再看下面的代码:

.state('shop.main',{
    url:"/:id",
    abstract: true,
     templateUrl:"templates/shop/main2.html",
     controller:"ShopMainController"  
  })

状态:"shop.main"是shop的子状态,按理论shop.main可以激活shop,我们只需要这样去访问:/shop/1,这样我们可以激活shop状态,和"shop.main"

我们暂且不着急,我再再给加上abstract属性,玩点刺激的,我们再把激活点再往后一级看下面代码:

.state('shop.main.info',{
    url:"",
    templateUrl:"templates/shop/info.html",
    cache:'false',
    controller:"InfoController"
  })
  .state('shop.main.author',{
    url:"/author",
    template:"<div>authorauthorauthorauthorauthor</div>"
  })
  .state('shop.main.samebook',{
    url:"samebook",
    template:"<div>samebooksamebooksamebooksamebooksamebooksamebook</div>"
  })

我看状态"shop.main.info"这个状态 的url为""所以我们要激活这个状态只需要这样去访问"shop/1"所有可以做为"shop.main"的一个默认子状态。

此时模块的嵌套关系为:list.html嵌套main.html,main.html嵌套info.html。我们可以通过"shop/:id"的url激活这个三层嵌套。

2控制器中参数的使用:

这个没什么难点,在控制器中注入"$stateParams" url参数在这个对象里可以拿得到 :

shop.controller("ShopMainController",['$scope','$stateParams','$rootScope',function($scope,$stateParams,$rootScope){
  $scope.persons = [1,2,3,4,5,6];
  $scope.good = {
    id:$stateParams.id
  }
  cfpLoadingBar.start();

}]);

3.怎么防止模板缓存

在开发过程中,模板缓存严重影响我们调试,有时候代码修改了,模板却没有任何变化。很苦恼,其他我们只需要监听下stateChangeSuccess,然后再清除$templateCache就行,这里我们采用run方法添加监听:

bookApp.run(['$rootScope','$templateCache', function ($rootScope, $templateCache) { 

 var stateChangeSuccess = $rootScope.$on('$stateChangeSuccess', stateChangeSuccess); 

 function stateChangeSuccess($rootScope) { 
  $templateCache.removeAll();  
 } 
}]);

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
两种js监听滚轮事件的实现方法
May 13 #Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 #Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 #Javascript
AngularJS在IE8的不支持的解决方法
May 13 #Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 #Javascript
JavaScript String 对象常用方法详解
May 13 #Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 #Javascript
You might like
PHP中for循环语句的几种变型
2007/03/16 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP计数器的实现代码
2013/06/08 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
Linux上比较文件的命令都有哪些
2012/02/24 面试题
工程技术员岗位职责
2014/03/02 职场文书
药品营销策划方案
2014/06/15 职场文书
小学生作文评语集锦
2014/12/25 职场文书