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 ...
随机推荐
- JavaScript获取日期方法
var time = new Date(); //当前时间 var year = time.getFullYear();//当前年份 var month = time.getMonth()+1; // ...
- JS常见的四种设计模式
1 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; function CreatePerson(name,age,sex) { var obj = new Object(); obj.name ...
- supervisor---elasticsearch 采坑回顾
supervisor 是一个可以管理进程的软件,并监控进程状态,异常退出时能自动重启.它是通过fork/exec的方式把这些被管理的进程当作supervisor的子进程来启动,这样只要在supervi ...
- Redis启动出错 noauth authentication required.
输入认证过的密码即可. 在命令行中运行: auth password
- 【[Offer收割]编程练习赛10 B】出勤记录II
[题目链接]:http://hihocoder.com/problemset/problem/1482 [题意] [题解] 递推题. 每次增加3个字符中的一个;然后根据下面这个数组递推; 递推方式看程 ...
- myquant平台搭建及使用
1.主页 http://myquant.cn/ 点击“我要申请试用”,进入如下页面:http://myquant.cn/news/2015/03/25/try-gmsdk-v2.0/ 点击“试用注册” ...
- iOS GCD使用指南
Grand Central Dispatch(GCD)是异步运行任务的技术之中的一个. 一般将应用程序中记述的线程管理用的代码在系统级中实现.开发人员仅仅须要定义想运行的任务并追加到适当的Dispat ...
- mac 下作流程图工具omnigraffle
omnigraffle:http://www.uzzf.com/soft/91710.html 含盖激活码: Name: mojado Serial: JYFE-JRJN-GSOT-GRAG-EVJI ...
- VMware workstation虚拟机不能联网解决方法
以备后用. 第一步:先设置VMware的编辑——虚拟网络编辑器,启用VMnet8,NAT模式,如下图所示. 其实就是VMware默认的设置,无须更改,如果不小心改了,点击还原默认设置. 第二步:虚拟机 ...
- Linux - 目录结构与查看,复制,删除,剪切指令
Linux当中,一切皆文件. Linux目录结构 / 根分区,只有root用户对此目录拥有写权限. /etc 配置文件 /boot 启动文件 /var 可增长的目录 .日志,文件等. /root 管理 ...