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 ...
随机推荐
- cat和cp的神奇用法:制作U盘安装盘
使用U盘安装debian,U盘的制作方法: 方法一: https://www.debian.org/doc/manuals/debian-handbook/installation.zh-cn.htm ...
- BZOJ 2956 模积和 (数学推导+数论分块)
手动博客搬家: 本文发表于20170223 16:47:26, 原地址https://blog.csdn.net/suncongbo/article/details/79354835 题目链接: ht ...
- 组合数性质求K个数选取i*j个数分成j组的方案数
分析:设方案数为ANS,C代表组合数: ANS=(C[K,I]*C[K-I,I][K-2*I,I]*...*C[K-(J-1)*I,I])/(J!); 也即: ANS=C[K,I*J]*(C[I*J, ...
- SIM300命令参考
开机命令 AT+CFUN=1,1 //此命令可以开启simcom模块的大部分功能,一般在初始化模块的时候都要写上: AT&F ...
- 0823关于整理MySQL死锁
-- 更多的是需要理解 http://hedengcheng.com/?p=577 -- 何登成 关于WHERE的提取http://www.cnblogs.com/metoy/p/5545580.ht ...
- 【ACM】nyoj_103_A+BII_201307291022
A+B Problem II时间限制:3000 ms | 内存限制:65535 KB 难度:3描述 I have a very simple problem for you. Given two ...
- [bzoj1614][Usaco2007Jan]Telephone Lines 架设电话线_二分答案_最短路
Telephone Lines bzoj-1614 Usaco-2007Jan 题目大意:给你一个n个点m条边的带边权无向图,求最短路.可以选取k条边免费. 注释:$1\le n\le 10^3$,$ ...
- Eclipse在Project Explorer项目归组及分模块显示
普通项目: 1.[Package Explorer]->[filter]->[Top Level Elements]->[Working Sets] 2.[Package Explo ...
- Spring Boot错误:Unable to start embedded container...的问题解决
解决方法: 1.用错了注解,改用以下注解: @SpringBootApplication 相当于:@Configuration.@ServletComponentScan.@EnableAutoCon ...
- Linux文件查找命令find(转)
Linux find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录 ...