angularjs 1.x lazyloading
2024-03-21 05:36:37
https://oclazyload.readme.io/docs
- 安装好后直接使用
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);
- 用来加载模块
myApp.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('testModule.js');
});
加载组件
如果组件在独立的模块中就和模块差不多, 否则将要加载的组件应该是属于已定义好的模块live examples
查看examples来了解更多的用法
在路由中的应用
$ocLazyLoad works well with routers and especially ui-router. Since it returns a promise, use the resolve property to make sure that your components are loaded before the view is resolved:
$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');
}]
}
});
If you have nested views, make sure to include the resolve from the parent to load your components in the right order:
$stateProvider.state('parent', {
url: "/",
resolve: {
loadMyService: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('js/ServiceTest.js');
}]
}
})
.state('parent.child', {
resolve: {
test: ['loadMyService', '$ServiceTest', function(loadMyService, $ServiceTest) {
// you can use your service
$ServiceTest.doSomething();
}]
}
});
It also works for sibling resolves:
$stateProvider.state('index', {
url: "/",
resolve: {
loadMyService: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('js/ServiceTest.js');
}],
test: ['loadMyService', '$serviceTest', function(loadMyService, $serviceTest) {
// you can use your service
$serviceTest.doSomething();
}]
}
});
Of course, if you want to use the loaded files immediately, you don't need to define two resolves, you can also use the injector (it works anywhere, not just in the router):
$stateProvider.state('index', {
url: "/",
resolve: {
loadMyService: ['$ocLazyLoad', '$injector', function($ocLazyLoad, $injector) {
return $ocLazyLoad.load('js/ServiceTest.js').then(function() {
var $serviceTest = $injector.get("$serviceTest");
$serviceTest.doSomething();
});
}]
}
});
最新文章
- 一不小心写了个WEB服务器
- NOPI读取模板导出（Excel中追加数据）
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）
- SQL Server R2 2008中的SQL Server Management Studio 阻止保存要求重新创建表的更改问题的设置方法
- hdu4462 Scaring the Birds
- 表达式求值 (栈) 用C++实现
- JS多选日期
- [LeetCode] Detect Capital 检测大写格式
- tomcat 网页管理tomcat
- 网络流24题——骑士共存问题 luogu 3355
- 【C++】实现一个简单的单例模式
- 【ichart】简单的统计图表ichart.js的使用
- 【RabbitMQ】5、RabbitMQ任务分发机制
- luogu4268 Directory Traversal (dfs)
- Hibernate注解开发、注解创建索引
- 标准C库函数
- matlab 画图参考小程序
- 团队作业6--展示博客（Alpha版本)
- Flask刷新问题
- Mac OS 10.12 - ”ln: /usr/bin/tclsh: Operation not permitted“错误的解决方法！！