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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javascript定义函数的方法
Dec 06 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
详解Vue slot插槽
Nov 20 Vue.js
两种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
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
详解Document.Cookie
2015/12/25 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python sorted函数原理解析及练习
2020/02/10 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python mock测试的示例
2020/10/19 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
教师简历自我评价
2014/02/03 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
西式结婚主持词
2014/03/14 职场文书
初三新学期计划书
2014/05/03 职场文书
博士生导师推荐信
2014/07/08 职场文书
司考复习计划
2015/01/19 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
详解MySQL的半同步
2021/04/22 MySQL
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server