ng-lazy-module

    1.2.1 • Public • Published

    ng-lazy-module

    Does the same things you would normally do with angular.module('...') but in a leisurely manner.

    Description

    This tiny zero-overhead Angular patch provides a set of lazy.… methods for each Angular module that reflects module's own methods but can be used after the modules have been bootstrapped.

    E.g. a new directive angular.module('...').lazy.directive(...) can be defined within existing app components and compiled then.

    The exceptions are config and run which cannot be used to define new config/run blocks when the respective phases are over.

    Install

    NPM

    npm install --save ng-lazy-module
    

    Bower

    bower install --save ng-lazy-module
    

    Usage

    ng-lazy-module.js is loaded after angular.js and before Angular modules.

    Let the example speak for itself.

    angular.module('lazy', []);
     
    var app = angular.module('app', ['lazy']);
     
    app.controller('AppController', function ($scope, $element, $compile, $q, lazyLoader, appService) {
      appService.value = appService.value.replace('%s', 'early controller');
     
        lazyLoader.then(function (lazyState) {
            // so long, recursive compilation compilation compilation!
            return lazyState.defined ? $q.reject(lazyState) : lazyState;
        })
        .then(function (lazyState) {
            lazyState.defined = true;
            $compile($element)($scope);
        });
    });
     
    app.value('appService', {
      value: '%s gets the worm'
    });
     
    app.factory('lazyLoader', function ($q, $compile, $timeout) {
        var lazyModuleChunk = $timeout(function () {
            var lazyModule = angular.module('lazy');
     
            // it is hard to steal the worm from early bird when you're lazy
            lazyModule.lazy.decorator('appService', function ($delegate) {
                return { 
                  value: $delegate.value.replace('%s', 'lazy decorator')
                };
            });
     
            lazyModule.lazy.provider('lazyService', function () {
                this.value = 'lazy service';
     
                this.$get = function () {
                    return this.value;
                };
            });
     
            lazyModule.lazy.constant('lazyConstant', 'lazy constant');
        }, 2000);
     
        var lazierModuleChunk = $timeout(function () {
            var lazyModule = angular.module('lazy');
     
            lazyModule.lazy.directive('lazyDirective', function (lazyService) {
                return {
                    template: 'lazy directive<br>{{appService.value}}',
                    controller: 'LazyController',
                };
            });
     
            lazyModule.lazy.controller('LazyController', function ($scope, lazyConstant, appService) {
                $scope.appService = appService;
            });
        }, 3000);
     
        var lazyState = {};
     
        return $q.all([lazyModuleChunk, lazierModuleChunk]).then(function () {
            return lazyState;
        });
    });

    Pitfalls

    Precedence

    lazy.run won't be available before run phase and the rest of lazy methods won't be available before config phase.

    The things can become too messy and complicated when there are several lazy modules that depend on each other. Although solid promise chains may minimize the possibility of having missing dependencies and maintain app design in a good shape.

    Lazy config

    lazy.config can be used to get to service providers even when config phase is over. Existing service instances may or may not be affected with changes made to corresponding providers. And modified provider $get property takes effect only if the service hasn't been instantiated yet.

    Decoration

    lazy.decorator was introduced as well, but its usage could be justified rarely. It won't have an effect on the services which were injected into advance module components and thus, instantiated (as the example shows).

    Chaining

    lazy.… methods return another lazy object, not module. The proper chaining syntax for lazy components is

    angular.module('...').lazy
        .directive(...)
        .controller(...);

    Install

    npm i ng-lazy-module

    DownloadsWeekly Downloads

    13

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • ex-machine