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 相关文章推荐
为超链接加上disabled后的故事
Dec 10 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
动态加载js文件简单示例
Apr 21 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
Python多进程同步简单实现代码
2016/04/27 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python实现石头剪刀布游戏
2021/01/20 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
师范学院教师自荐书
2014/01/31 职场文书
项目合作意向书范本
2014/04/01 职场文书
《凡卡》教学反思
2014/04/09 职场文书
会计电算化实训报告
2014/11/04 职场文书
先进党支部申报材料
2014/12/24 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书