AngularJS Dynamic caricamento di un controller

Question

Ho letto molto sul caricamento lazzy, ma sto riscontrando un problema durante l'utilizzo di $ routeProvider.

Il mio obiettivo è caricare un file javascript che contiene un controller e aggiungere un percorso a questo controller che è stato caricato in precedenza.

contenuto del mio file JavaScript da caricare

angular.module('demoApp.modules').controller('MouseTestCtrlA', ['$scope', function ($scope) { 
    console.log("MouseTestCtrlA"); 
    $scope.name = "MouseTestCtrlA"; 
}]); 

Questo file non è incluso quando bootstap angolare viene chiamato. Significa che devo caricare il file e creare un percorso per questo controller.

In primo luogo, ho iniziato a scrivere una funzione di risoluzione che deve caricare il file Javascript. Ma dichiarando il mio parametro controller nella dichiarazione di percorso mi ha dato un errore:

'MouseTestCtrlA' non è una funzione, ha definito

Ecco la chiamata Sto cercando di impostare:

demoApp.routeProvider.when(module.action, {templateUrl: module.template, controller: module.controller, resolve : {deps: function() /*load JS file*/} }); 

Da quello che ho letto, il parametro controller dovrebbe essere un controller registrato

con troller - {(string | function() =} - Controller fn che dovrebbe essere associato all'ambito appena creato o al nome di un controller registrato se passato come stringa.

Così scrivo una fabbrica che dovrebbe essere in grado di caricare il mio file e quindi (prometto stile!) Dovrei provare a dichiarare una nuova rotta.

Mi ha dato qualcosa di simile sotto dove le dipendenze è un array di percorsi file javascript a carico:

Uso

ScriptLoader.load(module.dependencies).then(function() { 
    demoApp.routeProvider.when(module.action, {templateUrl: 'my-template', controller: module.controller}); 
}); 

script loader

angular.module('demoApp.services').factory('ScriptLoader', ['$q', '$rootScope', function ($q, $rootScope) { 
     return { 
      load: function (dependencies) 
      { 
       var deferred = $q.defer(); 
       require(dependencies, function() { 
        $rootScope.$apply(function() { 
         deferred.resolve(); 
        }); 
       }); 
       return deferred.promise; 
      } 
     } 
    }]); 

Problema

Ho ancora questo errore javascript "'MouseTestCtrlA' non è una funzione, non definito" il che significa che Angular non ha risolto 'MouseTestCtrlA' come controller registrato.

Qualcuno può aiutarmi su questo punto per favore?

Answer 1

La rilettura di questo articolo http://ify.io/lazy-loading-in-angularjs/ suggerisce di mantenere un'istanza $contentProvider all'interno dell'App Angular.

Ho trovato questo codice nella mia app.js

demoApp.config(function ($controllerProvider) { 
    demoApp.controller = $controllerProvider.register; 
}); 

mi Esso consente di scrivere il mio controller come previsto in un file JavaScript esterno:

angular.module("demoApp").controller('MouseTestCtrlA', fn); 

Spero che questo può aiutare!