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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
JavaScript设计模式初探
Jan 07 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 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 array_multisort() 函数的深入解析
2013/06/20 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
javascript 写类方式之八
2009/07/05 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
vue实现城市列表选择功能
2018/07/16 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
培养联系人考察意见
2015/06/01 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js