Requirejs: загружать зависимости только при необходимости

Question

Зависимости, определенные в блоке define файла app.js, загружаются.

Что я хочу сделать, это:

Если я собираюсь загрузить контроллер Dashboard, он требует зависимости, связанной с диаграммами, и любой другой контроллер никогда не нуждается в этой зависимости.

Проблема: когда загружается приложение, загружаются все зависимости, чего я не хочу.

Примечание. Загруженные зависимости означают, что загружены файлы js.

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 *************** */
.....

Пример контроллера:

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

        }]); 

 });

Answer 1

В вашем случае все зависимости загружаются во время создания модуля. Если вы хотите загрузить его во время контроллера, сохраните его в контроллере и удалите из определения модуля. Смотрите пример ниже

В вашем контроллере

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

  }]); 

 });

Удалите его из определения модуля 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 *************** */
.....