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) {
};
})
});

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.

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.