Angular ocLazyLoad 与ui-router的配合使用
1.resolve
state(配置路由时)的resolve参数:
resolve:object,将会被注入controller去执行的函数,<string,function>形式。
基于uiRouter的resolve是在加载controller和template之前所执行的一系列操作,它帮助我们初始化我们所要前往的那一个视图。只有be solved(操作完成),controller才会被实例化。因此,我们可以在resolve步骤里面加载我们所需要的controller。
$stateProvider.state('index', {
url: "/", // root route
views: {
"lazyLoadView": {
controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
templateUrl: 'partials/main.html'
}
},
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('js/AppCtrl.js');
}]
}
});
resolve中加载AppCtrl.js,但是请求都是异步的,返回的顺序不是按照顺序来的。在loadMyCtrl中需要调用AppCtrl里面的getBookById()方法。这个时候虽然在load里面已经加载AppCtl.js,但是在loadMyctl中是无法使用get()方法,
所以在loadMyctl对象中,所以必须重新加载AppCtl.js。这个时候就需要$injector中的get()方法。
$stateProvider.state('index', {
url: "/",
resolve: {
loadMyCtl: ['$ocLazyLoad', '$injector', function($ocLazyLoad, $injector) {
return $ocLazyLoad.load('js/ServiceTest.js').then(function() {
var $serviceTest = $injector.get("$serviceTest");
$serviceTest.get();
});
}]
}
});
Angular ocLazyLoad 与ui-router的配合使用的更多相关文章
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
随机推荐
- [bzoj3507 Cqoi2014]通配符匹配 (hash+DP)
传送门 Solution 显然用哈希233 设\(f[i][j]\)表示第i个通配符和当前第j个字符是否匹配 考虑两种通配符的特性,直接转移即可 Code #include <cstdio> ...
- [bzoj2044] 三维导弹拦截 (二分图最大匹配+dp)
传送门 Description 一场战争正在A国与B国之间如火如荼的展开. B国凭借其强大的经济实力开发出了无数的远程攻击导弹,B国的领导人希望,通过这些导弹直接毁灭A国的指挥部,从而取得战斗的胜利! ...
- 继续聊WPF——为ListView的行设置样式
<Window x:Class="Wpf_GridHeaderStyle_sample.Window1" xmlns="http://schemas.microso ...
- django-celery-win10
setting初始化: 定时任务 增加tasks 启动:
- js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...
- springboot整合mybatis统一配置bean的别名
mybatis.type-aliases-package=cn.byzt.bean 只需要将 javaBean 的路径配置到 springboot 的配置文件中,这里如果是多个路径,用英文逗号分隔多个 ...
- web开发如何使用高德地图API(一)浏览器定位
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- 简述synchronized和java.util.concurrent.locks.Lock的异同
1.synchronized 用在方法和代码块的区别? a. 可以只对需要同步的使用 b.与wait(),notify()和notifyall()方法使用比较方便 2.wait() a.释放持有的对象 ...
- RubyMine快捷键
RubyMine快捷键 ctrl+shift+up/down 向上/向下移动代码段 alt+shift+up/down 向上/向下移动代码行 ctrl+y 删除一行 ctrl+shift+f10 运行 ...
- [React] Forward a DOM reference to another Component using forwardRef in React 16.3
The function forwardRef allows us to extract a ref and pass it to its descendants. This is a powerfu ...