AngularJs Lazy Loadng without RequireJS

Question

In a large scale application, How do we lazy load modules, controllers, services whenever needed without loading those in the index.html. Here I'm referring to load the entire js in the relevant template html and not in the index.html. (It could be different js which has Module, multiple controllers, services, directives for a given functionality or individual js files which has multiple controllers or services)

I do not want to use RequireJs. However, I'm looking for a solution within angular itself.

angular.module( 'my-second-module', ['ui.router'])

.config(function config($stateProvider) {
    $stateProvider
        .state('mainscreen', {
            url: "/mainscreen",
            templateUrl: "app/MyMain.tpl.html"
        })
        .state('mainscreen.sub', {
            url: "/sub",
            controller: 'subCtrl',
            templateUrl: "app/sub.tpl.html"
        })
})
.controller( 'subCtrl', function contractCtrl
    ($scope,$http,$route,$location) {
})
.controller( 'subTwoCtrl', function newContractCtrl($scope,someService,$http,$templateCache) {
.filter('myTypeFilter',function(){
    return function (input,value){       
        return 'Normal';
   };
})
.service('newService', function () {
    var selectedContract = [];
    var hotelObject=[{}];
    return {
        notes:function () {
        },
        addNote:function (noteTitle) {
        }
    };
})
.directive('autocomplete', function($parse) {
return function(scope, element, attrs) {
    var setSelection = $parse(attrs.selection).assign;
    scope.$watch(attrs.autocomplete, function(value) {
        element.autocomplete({
            source: value,
            select: function(event, ui) {
                setSelection(scope, ui.item.value);
                scope.$apply();
            }
        });
    });
};
})
.factory('restService', function(commonService) {
return {
    setReturnMessage: function(res) {
};
})
});

Lenorelenox

check this solution github.com/vojtajina/ng-1.x-async-hack, basically you need to store providers from your app.config to be able to asynchronously attach more functionality to the existing application – Tempered

but generally, using requireJS with the same approach is a bit cleaner, since you doesn't need to check if code is loaded already when entering the path for the second time (github.com/doodeec/ng-1.x-async-hack) – Tempered

I have done the same with RequireJs. What I need is that load the module js when I access the particular template not the time I load the app js to load all the js files. – Lenorelenox

The links I sent are exactly for that purpose, it will load the scripts when you need to load a new route/path in your app – Tempered

Use $injecter to inject whenever you want to inject any service – Lepido

Can I Inject a module which has services, routers, controller, directive ect. this is what im looking for. – Lenorelenox

@Lenorelenox just fork one of those repositories I have send and take a look at demo (index.html). it does exactly what you need, you just define files you want to lazy-load when changing to any route and it will be loaded and added into running application with all the functionality(services, factories, directives, filters, values...) – Tempered

Answer 1

After doing some research identified that AngularJs is planing to implement above concept in their version 2.0. However, I'm not sure when that version will be released and also there is a long way to go for this version to be released.

Further, after doing much more research found out that there is a framework called Browserify which will be the next replacement for RequireJS. I believe we can use this for the modularization. However, I have not experimented this with AngularJs. Seems to be a good tool.

This has been discussed in the ng-conf as well. Angular with Browserify

PS. If anybody had done testing with Angular and Browserify you are mostly welcome to share your experience.

Lenorelenox

Answer 2

Once the Angular team will have released angular v2.0 it should be much easier, but in the mean time you can use my module to lazy load pretty much anything: ocLazyLoad

Don't hesitate to ask if you have any questions about it.

Urbai