Requirejs: Load Dependancies only when needed

Question

The dependancies defined in define block of app.js get loaded.

What I want to do is:

If I am going to load Dashboard controller it requires charts related dependancy,and any other controller never needs this dependancy.

Problem: When App loads, all dependancies getting loaded, that I don't want.

Note: Dependancies loaded means js files loaded.

main.js

require.config({ 
baseUrl: "http://localhost/ums/angular/js",
    paths: {
        'angular': 'lib/angular.min',
        'ngRoute': 'lib/angular-route.min',
        'flash': 'lib/angular-flash',
        'angular-loading-bar': 'lib/loading-bar.min',
        'ngAnimate': 'lib/angular-animate.min',
        'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
        'uniqueField': 'admin/directives/angular-unique',
        'input_match': 'admin/directives/angular-input-match',
        'uniqueEdit': 'admin/directives/angular-unique-edit',
        'angularAMD': 'lib/angularAMD.min',
        'googlechart':'lib/ng-google-chart',     
        'app': 'admin/app',
    },
    waitSeconds: 0,
     shim: { 
     'angular': { exports: 'angular'},
    'angularAMD': { deps: ['angular']},
     'googlechart': { deps: ['angular']},
    'ngRoute':{ deps: ['angular']},
    'angular-loading-bar':{ deps:['angular'] },
    'ngAnimate': { deps:['angular'] } ,
    'ui.bootstrap': {deps: ['angular'] },
    'uniqueField': {deps: ['angular'] },
    'input_match': {deps: ['angular'] },
    'uniqueEdit': {deps: ['angular'] },
    'flash': {deps: ['angular'] },
    },
    deps: ['app']
});

app.js

var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match',  'googlechart'  ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ,  'googlechart'  ]);  
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....

Example controller:

define(['app'], function (app) {
    app.controller('dashboardCtrl', ['$scope','$http', function($scope,$http){
    //I am able to use any of the dependancy here, (I don't need that all dependancies here )
    //only need charts

        }]); 

 });

score 1 · Accepted Answer · edited Oct 22 '15 at 12:23

In your case, all the dependencies are getting loaded at the time of module creation. If you want to load it at the time of controller, keep it in the controller and remove from the module definition. See example below

In your controller

define(['app','googlechart'], function (app) {//charts dependencies
  app.controller('dashboardCtrl', ['$scope','$http', function($scope,$http){
   //I am able to use any of the dependancy here, (I don't need that all dependancies here )
  //only need charts

  }]); 

 });

Remove it from the module definition app.js

 var base_url="http://localhost/ums/";
//remove it from the module definition
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','ui.bootstrap','uniqueField','input_match' ]);  
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
.....

`app.js`: Remove only from `define()` ? Not from `angular.module('myapp',['dependancies'])` ? — VBMali, Jul 15 '15 at 05:37
By 'charts' dependency I meant any of your charts dependencies.Be it 'googlecharts' or any 'XYZ' charts. So,I'm approving your answer.Please upvote and mark the answer as accepted — Mohit, Jul 15 '15 at 06:33

Requirejs: Load Dependancies only when needed

1 Answers1