How to avoid loading all the controllers at run time

Question

I am using require to avoid loading all the controllers at run time. But in my case all the controllers are loaded when application starts.Here is my code

App.js

define(['angular',
    'angular_route',
    'loginController',
    'modifierController',
    'bootstrap_ui_tpls',
    'xeditable'
],function(Angular){


Angular.module('App',['ui.router','App.loginCtrl','App.modifierCtrl'])

.config(['$stateProvider','$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/validIcd');
        $stateProvider             
                .state('login',{
                    url:'/login',                    
                    views:{
                        '':{
                            templateUrl:'templates/login/loginView.html',
                            controller:'loginCtrl',
                        },
                        'loginnav@login':{
                            templateUrl:'templates/assets/loginNavBar.html'
                        }
                    }
                })
                .state('modifier',{
                    url:'/modifier',
                    views:{
                        '':{
                            templateUrl:'templates/master/masterView.html',

                        },
                        'navbar@modifier':{
                            templateUrl:'templates/assets/navBar.html'
                        },
                        'sidebar@modifier':{
                            templateUrl:'templates/assets/sideBar.html'
                        },
                        'templateContainer@modifier':{
                            templateUrl:'templates/modifier/modifier.html',
                            controller:'modifierCtrl'
                        }
                    }
                })

I have created all my controllers in separate modules and included it in main module.

loginController.js

define(['angular'], function(angular){
angular.module('App.loginCtrl', [])
.controller('loginCtrl',function($scope,$window,$http,appConfig){

$scope.authenticate=function(Username,password)
{
    var inputparam ={
        sUserName: Username, 
        sPassword: password
    }

    $http({

        method:'POST',
        url:appConfig.rootUrl+'login',
        data:angular.toJson(inputparam)
    })
        .then(function successcallBack(response){
            $scope.login=true;
            var session = response.data;
            localStorage.setItem('sessionid',session.sSessionId);
            $window.location.hash="#Modifier"

        },function errorCallBack(response){
            $scope.login=false;
            if(response.data===null)
            {
                $scope.errorMessage="Network Error"
            }
            else if (response.data === 6) {
                $scope.errorMessage="Authentication failed";
            }
            else
            {
                $scope.errorMessage="Invalid Login";
            }

        });
}

});
});

modifierController.js

 define(['angular'], function(angular){
  angular.module('App.modifierCtrl', ['xeditable'])
   .controller('modifierCtrl',
   function($scope,$http,$window,appConfig,appService){
   if(appService.checkSession())
   {
    $scope.fetchModifier = function()
    {
        $scope.isData=false
       $http({
           method:'POST',
           url:appConfig.rootUrl+'Modifier',
           headers:{
                 iOffset:0,iCount:10,
                'sSessionId':localStorage.getItem("sessionid"),
           }
       })
        .then(function successcallBack(response){
            $scope.isData=true
           $scope.ModifierArray = response.data.modifier

        },function errorCallBack(response){
            $scope.isData=false


        });
    };
    $scope.updateModifier=function(modifier,code)
    {
        var modifier={
            id:modifier.id,
            sModifierCode:code,
            sModifierDesc:modifier.sModifierDesc
        }

            $http({
                method:'put',
                url:appConfig.rootUrl+'modifier',
                headers:{
                    'sSessionId':localStorage.getItem("sessionid"),
                },
                data:angular.toJson(modifier)
            })
            .then(function successcallBack(response){
                var data = response

            },function errorCallBack(response){
                var error = response
            });
        }


}else
{
$window.location.hash="#login"
}
});
});

Its working perfect now but my aim is to avoid loading all the controllers first time and needed only load them as they are needed.I am not sure am on the right path..

I hope that the modifier controller should be loaded only when the route changes. that is "/modifier"

Can somebody suggest me a better solution if i did anything unusual and please correct me is there any other issues you find in my code.

This may help you --- https://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs — sreeramu, Nov 22 '16 at 06:12
Thank you...Is there any other way to load controllers dynamically by using only angular's methods? — vivek vijayakumar, Nov 22 '16 at 06:36

score 0 · Answer 1 · answered Nov 22 '16 at 06:30

you should use lazy loading for loading controller when you need, for this please go with this link. and you can do following step

add reference of lazy loading js file to your project
add reference to you main module like this

var app = angular .module('Test', [ 'oc.lazyLoad'])

and in routing, you should use like this

      .state('page1', {
          caseInsensitiveMatch: true,
          templateUrl: 'app/Page1/Index',
          url: 'page1',
          controller: 'Page1Ctrl',
          resolve: {
              loadMyFile: function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: 'test',
                      files: ['scripts/controllers/Page1.js']
                  })
              }
          }
      })

you should add mulitple controller using comma(,) separater when you will need.

So you mean that angular not providing any built in method for lazy loading of controller?? — vivek vijayakumar, Nov 22 '16 at 06:35
no, you should use lazy loading, go through https://github.com/ocombe/ocLazyLoad link — Raju Detroja, Nov 22 '16 at 06:38

How to avoid loading all the controllers at run time

1 Answers1