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的更多相关文章

  1. [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 ...

  2. [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. ...

  3. [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 ...

  4. Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)

    概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loa ...

  5. AngularJS: Dynamically loading directives

    http://www.codelord.net/2015/05/19/angularjs-dynamically-loading-directives/ ----------------------- ...

  6. Lazyr.js – 延迟加载图片(Lazy Loading)

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  7. Can you explain Lazy Loading?

    Introduction Lazy loading is a concept where we delay the loading of the object until the point wher ...

  8. [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 ...

  9. iOS swift lazy loading

    Why bother lazy loading and purging pages, you ask? Well, in this example, it won't matter too much ...

随机推荐

  1. java web 学习八(HttpServletResponse对象2)

    一.HttpServletResponse常见应用——生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类,

  2. 1、ListView自定义控件下拉刷新(一)

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layo ...

  3. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

  4. A Blind Watermarking for 3-D Dynamic Mesh Model Using Distribution of Temporal Wavelet Coefficients

    这周看了一篇动态网格序列水印的论文,由于目前在网格序列上做水印的工作特别少,加之我所看的这篇论文中的叙述相对简洁,理解起来颇为困难.好在请教了博士师兄,思路明朗了许多,也就把这思路整理在此了. 论文作 ...

  5. oracle文件管理OMF

    OMF是为了简化对数据文件的管理,靠参数DB_CREATE_FILE_DEST实现: 如果定义了DB_CREATE_FILE_DEST,则创建表空间就不需要制定数据文件位置.文件名称,数据文件会按照固 ...

  6. qqmap 的一些操作

    ; var mapcontorl = "mapContainer"; var fullscreen = false; function qqMap(options) { var t ...

  7. CentOS6 搭建git

    rpm -qa | grep zlib-devel  查看是否安装过 ----------------------------------------------------------------- ...

  8. Hbase 基本命令

    启动Hbase:./start-hbase.sh 进入Hbase shell控制台:./hbase shell   查看所有表 list   查看数据库状态:status   查看数据库版本:vers ...

  9. VB IE 清除历史记录

    VB删除Cookie,仅适用于IE7版本 IE7版本为我们提供了命令行删除Cookie,清除临时文件缓存,清除历史记录表单的方法,下面是详细的命令运行方式. '注:以下代码仅支持IE7. '清除Int ...

  10. fx-experience-tools

    http://fxexperience.com/2012/03/announcing-fx-experience-tools/ I have some cool new stuff for you t ...