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 相关文章推荐
理清apply(),call()的区别和关系
Aug 14 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
React组件生命周期详解
Jul 03 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 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
一个简单实现多条件查询的例子
2006/10/09 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
js实现随机点名
2021/01/19 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python 切片和range()用法说明
2013/03/24 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
美国家具网站:Cymax
2016/09/17 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
三年级评语大全
2014/04/23 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书