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 ...
随机推荐
- BZOJ 2956 模积和 (数学推导+数论分块)
手动博客搬家: 本文发表于20170223 16:47:26, 原地址https://blog.csdn.net/suncongbo/article/details/79354835 题目链接: ht ...
- 元素类型为 "session-factory" 的内容必须匹配 "(property*,mapping*,(class-cach....解决方法
http://www.cnblogs.com/kisso143/p/3642057.html property必须写在mapping的上面.
- 关于c对文件的操作
要求从键盘输入给定文件的路径,要求将他中的内容读取出来并输入到你需要建的一个文本文档中还要从键盘输入到建的一个文本文当中 #include <stdio.h> int main() { F ...
- 转载 - KMP算法
出处:http://www.cnblogs.com/dolphin0520/archive/2011/08/24/2151846.html KMP算法 在介绍KMP算法之前,先介绍一下BF算法. 一. ...
- 0923如何利用mysqlbinlog日志闪回
转自 https://github.com/danfengcao/binlog2sql,感谢作者的提供 binlog2sql 从MySQL binlog解析出你要的SQL.根据不同选项,你可以得到原始 ...
- Redis参数
phpredis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: Redis::__construct构造函数$redis ...
- eclipse快捷键深入理解
1.Eclipse 中的重构功能使其成为了一个现代的 Java 集成开发环境 (IDE),而不再是一个普通的文本编辑器.使用重构,您可以轻松更改您的代码,而不必担心对别处造成破坏. 2.Eclipse ...
- 经验总结18--EF改动关系,多对多
EF改动关系让我费事蛮多时间.能查的资料少,网上试了非常多方法都不正确. 最后还是自己研究出来了.在这里和大家分享下,有更好的方法也能够分享下. 首先说说我一般做改动功能时,前台传參数,后台使用对象接 ...
- iOS快速打企业包ipa
简 首页 专题 发钱啦 注册 登录 简首页专题下载手机应用 gege 2016.01.19 16:55 写了24604字,被92人关注,获得了152个喜欢 iOS快速打企业包ipa 字数256 阅读1 ...
- Problem G 宝石合成 (内蒙古14年省赛)
1117: Problem G 宝石合成 时间限制: 1 Sec 内存限制: 128 MB 提交: 18 解决: 4 [提交][状态][讨论版] 题目描写叙述 故事人物:豆豆强 走上致富之路的豆豆 ...