AngularJS Reloaded: How to lazy loading files

Also available in portuguese

In this article I will show you how to lazy loading your scripts and styles using AngularJS and UI router resolve just when it’s needed.

Let’s face the problem:

You have a page “A” that uses jqGrid plugin and two other pages “B” and “C” that does not use that plugin. And you normally references jqGrid plugin in your master page, so pages “A”, “B” and “C” will load that script plugin but only page “A” will need it. This is a network performance issue and it becomes complex with many scripts.

The Solution:

Use a combination of lazy loading AngularJS plugin and AngularJS UI router resolve to do all stuff before page load.

Let’s see the code:

File: app.definition.ts:

var definitions = function () {
    var baseFolder = '';
    return {
        grid: {
            devDependencies: [
                baseFolder + 'Css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css',
                baseFolder + 'Css/plugins/jqGrid/ui.jqgrid.css',
                baseFolder + 'Css/style.jqGrid.css',
                baseFolder + 'Scripts/plugins/jqGrid/i18n/grid.locale-pt.js',
                baseFolder + 'Scripts/plugins/jqGrid/jquery.jqGrid.min.js',
                baseFolder + 'Scripts/plugins/jquery-ui/jquery-ui.min.js'
            ]
        }
    };
} ();

The “definitions” holds a configuration for any plugin and scripts/css dependencies.

File: app.routes.ts:

(function () {

    class AppRoutes {

        constructor(
            private utilProvider: App.Util,
            private $stateProvider: ng.ui.IStateProvider,
            private $urlRouterProvider: ng.ui.IUrlRouterProvider
        ) {
            let genericRoute = new App.Core.State.GenericState(this.utilProvider);

            this.$urlRouterProvider.otherwise("/login");
            this.$stateProvider.state('homemenu', genericRoute.getState({
                url: '/',
                views: {
                    root: {
                        template: 'The page does not use GRID scripts. Go to <a ui-sref="homeperson">Person Page</a>'
                    }
                }
            }));
            this.$stateProvider.state('homeperson', genericRoute.getState({
                url: '/person',
                dependencies: ['grid'],
                views: {
                    root: {
                        template: 'That page uses GRID scripts. Back to <a ui-sref="homemenu">Home Page</a>'
                    }
                }
            }));
        }
    }

    AppRoutes.$inject = [
        'utilProvider',
        '$stateProvider',
        '$urlRouterProvider'
    ];

    angular
        .module('app')
        .config(AppRoutes);

})();

The code above I configured the routes for this article. Just the “/person” route uses “grid” plugin as a dependency. The “getState” method your configure the lazy loading for that dependency and verify in “definition” object to know which scripts and styles will load.

Try it yourself:

Access the home page:

AngularJS Reloaded: How to lazy loading files

Check in fiddler, no scripts and styles for GRID has been loaded:

AngularJS Reloaded: How to lazy loading files

Click Person Page link, it will navigate to person page:

AngularJS Reloaded: How to lazy loading files

Check in fiddler, for that route, our GRID scripts styles has been loaded successfully.

AngularJS Reloaded: How to lazy loading files

This is it. I hope it helped you.

AngularJS Reloaded: lazy loading files

Lazy loading in AngularJS: Questions, suggestions and feedbacks will be appreciated. Good luck!

Do complete download of the source code on github.

Try demo online of that application on codefinal.
About the Author:
He works as a solution architect and developer, has more than 16 years of experience in software development on several platforms and more than 14 years only for the insurance market.