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 ?)

DEMO TIME !

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

$ocLazyLoad.load({
    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 -->
    <test-directive></test-directive>
</div>

Bonus: DI

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

What's next ?

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

Check it out

ng-nl

By Olivier Combe

ng-nl

Lazy load anything using ocLazyLoad (for AngularJS)

  • 2,293
Loading comments...

More from Olivier Combe