Lazy load anything using ocLazyLoad

What is it ?

  • An Angular library to lazy load anything (js, css, templates)

  • Adapt the logic to your needs (router, service, directive, DI)

  • Many options (Change the loaders, use events, ...)

I know, the name isn't obvious...

Why lazy load ?

  • Load your website faster

  • Hide application logic from unprivileged users

  • Also, load your website faster (seriously, what better reason do you need ?)


Better, faster, faster

Why do you need a lib to do that ?

  • Easy to use
  • Handles run & config blocks
  • Deals with the cache
  • The directive works like a mix of ng-if & ng-include

My cousin knows a guy who does it with the providers and...

How does it work ?

As a service

    name: 'TestModule',
    files: ['testModule.js']
}).then(function(data) {
    // do what you want

With your router

$stateProvider.state('index', {
    url: "/",
    controller: 'AppCtrl'

    resolve: {
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
            // you can lazy load files for an existing module
             return $ocLazyLoad.load({
                name: 'app',
                files: ['js/AppCtrl.js']

As a directive

<div oc-lazy-load="{name: 'TestModule', files: ['js/testModule.js']}">
    <!-- Use a directive from TestModule -->

Bonus: DI

angular.module('MyModule', [{
        name: 'pascalprecht.translate',
        files: ['vendor/angular-translate.js']
).controller('MyCtrl', function($translate) { = $translate.instant('<3');

What's next ?

I'm working on it (once I'm legend in Hearthstone)

Check it out


By Olivier Combe


Lazy load anything using ocLazyLoad (for AngularJS)

  • 4,023