[AngularJS] Lazy loading Angular modules with ocLazyLoad
With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading of Angular modules in large applications.
Simple example:
angular.module("demo", ["oc.lazyLoad"])
.controller("AppCtrl", function ($injector, $ocLazyLoad) { var app = this;
app.click = function () {
$ocLazyLoad.load({
name: "store",
files: [
"store.js"
]
}).then(function () {
console.log($injector.get("cart"));
}) }
})
'use strict'; // Declare app level module which depends on filters, and services
var App = angular.module('app', ['ui.router', 'oc.lazyLoad'])
.config(function($stateProvider, $locationProvider, $urlRouterProvider, $ocLazyLoadProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.hashPrefix('!'); // You can also load via resolve
$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({
name: 'app',
files: ['js/AppCtrl.js']
});
}]
}
})
.state('modal', {
parent: 'index',
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadOcModal: ['$ocLazyLoad', '$injector', '$rootScope', function($ocLazyLoad, $injector, $rootScope) {
// Load 'oc.modal' defined in the config of the provider $ocLazyLoadProvider
return $ocLazyLoad.load({
name: 'oc.modal',
files: [
'bower_components/bootstrap/dist/css/bootstrap.css', // will use the cached version if you already loaded bootstrap with the button
'bower_components/ocModal/dist/css/ocModal.animations.css',
'bower_components/ocModal/dist/css/ocModal.light.css',
'bower_components/ocModal/dist/ocModal.js',
'partials/modal.html'
]
}).then(function() {
$rootScope.bootstrapLoaded = true;
// inject the lazy loaded service
var $ocModal = $injector.get("$ocModal");
$ocModal.open({
url: 'modal',
cls: 'fade-in'
});
});
}], // resolve the sibling state and use the service lazy loaded
setModalBtn: ['loadOcModal', '$rootScope', '$ocModal', function(loadOcModal, $rootScope, $ocModal) {
$rootScope.openModal = function() {
$ocModal.open({
url: 'modal',
cls: 'flip-vertical'
});
}
}]
}
}); // Without server side support html5 must be disabled.
$locationProvider.html5Mode(false); // We configure ocLazyLoad to use the lib script.js as the async loader
$ocLazyLoadProvider.config({
debug: true,
events: true,
modules: [{
name: 'gridModule',
files: [
'js/gridModule.js'
]
}]
});
});
lazy loading is more for projects that are huge with many people working on it, and you have tons and tons of files. Instead of concatenating every JavaScript file into a few megabytes loaded up front, it would make more sense to lazy load them.
But if you're just working on a small project it makes more sense just to concatenate everything and serve up one giant JavaScript file up front. That way you don't have to worry about files failing to load later on and things like that.
It's really a call on your end you have to make as to whether you need to lazy load or not. Typically I'd say you don't need to and you don't have to but if you're working on a large project and it's a huge load up front then lazy loading is something you should look into.
Read More: https://github.com/ocombe/ocLazyLoad/blob/master/examples/complexExample/js/app.js
[AngularJS] Lazy loading Angular modules with ocLazyLoad的更多相关文章
- [AngularJS] Lazy Loading modules with ui-router and ocLazyLoad
We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want ...
- [Angular Router] Lazy loading Module with Auxiliary router
Found the way to handle Auxiliary router for lazy loading moudle and erge load module are different. ...
- [Angular2 Router] Lazy Load Angular 2 Modules with the Router
Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start ...
- Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)
概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loa ...
- AngularJS: Dynamically loading directives
http://www.codelord.net/2015/05/19/angularjs-dynamically-loading-directives/ ----------------------- ...
- Lazyr.js – 延迟加载图片(Lazy Loading)
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- Can you explain Lazy Loading?
Introduction Lazy loading is a concept where we delay the loading of the object until the point wher ...
- [AngularJS] Sane, scalable Angular apps are tricky, but not impossible.
Read fromhttps://medium.com/@bluepnume/sane-scalable-angular-apps-are-tricky-but-not-impossible-less ...
- iOS swift lazy loading
Why bother lazy loading and purging pages, you ask? Well, in this example, it won't matter too much ...
随机推荐
- ASP.NET MVC+Bootstrap个人博客之修复UEditor编辑时Bug(四)
我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTML标签后的 ...
- 《C++ primer》--第11章
习题11.1 algorithm头文件定义了一个count的函数,其功能类似于find.这个函数使用一对迭代器和一个值做参数,返回这个值出现次数的统计结果.编写程序读取一系列int型数据,并将它们存储 ...
- CAKeyframeAnimation
之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样. 一般使用的时候 首先通过 animationWithKeyPath 方法 创建一 ...
- 【和我一起学Python吧】Python3.0与2.X版本的区别
做为一个前端开发的码农,却正在阅读最新版的<A byte of Python>.发现Python3.0在某些地方还是有些改变的.准备慢慢的体会,与老版本的<A byte of Pyt ...
- Python闭包与javascript闭包比较
实例一 python def line_conf(): def line(x): return 2*x+1 print(line(5)) # within the scope line_con ...
- (四面体)CCPC网络赛 HDU5839 Special Tetrahedron
CCPC网络赛 HDU5839 Special Tetrahedron 题意:n个点,选四个出来组成四面体,要符合四面体至少四条边相等,若四条边相等则剩下两条边不相邻,求个数 思路:枚举四面体上一条线 ...
- 从零教你如何获取hadoop2.4源码并使用eclipse关联hadoop2.4源码
从零教你如何获取hadoop2.4源码并使用eclipse关联hadoop2.4源码http://www.aboutyun.com/thread-8211-1-1.html(出处: about云开发) ...
- 新浪云sae 邮件服务 quicksend()
<?php header("Content-Type: text/html;charset=utf-8"); $mail = new SaeMail(); $form_Con ...
- 第八章、Linux 磁盘与文件系统管理
认识 EXT2 文件系统 Linux最传统的磁盘文件系统(filesystem)使用的是EXT2这个啦!所以要了解文件系统就得要由认识EXT2开始! 而文件系统是创建在硬盘上面的,因此我们得了解硬盘的 ...
- Spring入门(7)-自动检测Bean
Spring入门(7)-自动检测Bean 本文介绍如何自动检测Bean. 0. 目录 使用component-scan自动扫描 为自动检测标注Bean 1. 使用component-scan自动扫描 ...