AngularJS Dynamic carregando um controlador

Eu li muito sobre carregamento lento, mas estou enfrentando um problema ao usar o $ routeProvider.

Meu objective é carregar um arquivo javascript que contenha um controlador e adicionar uma rota a este controlador que foi carregado anteriormente.

Conteúdo do meu arquivo javascript para carregar

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

Este arquivo não é incluído quando o bootstap angular é chamado. Isso significa que eu tenho que carregar o arquivo e criar uma rota para este controlador.

Primeiro, comecei a escrever uma function de resolução que tem que carregar o arquivo Javascript. Mas declarar meu parâmetro de controlador na declaração de rota me deu um erro:

‘MouseTestCtrlA’ não é uma function, ficou indefinido

Aqui está a chamada que estou tentando definir:

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

Pelo que li, o parâmetro do controlador deve ser um controlador registrado

controller – {(string | function () =} – Controlador fn que deve ser associado ao escopo recém-criado ou ao nome de um controlador registrado se passado como uma string.

Então, eu escrevo uma fábrica que deve ser capaz de carregar meu arquivo e, em seguida, (prometo estilo!) Eu deveria tentar declarar uma nova rota.

Isso me deu algo como abaixo, onde dependencies é uma matriz de caminhos de arquivos javascript para carregar:

Uso

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

Carregador de scripts

 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

Eu ainda tenho esse erro de javascript “‘MouseTestCtrlA’ não é uma function, ficou indefinido” o que significa Angular não conseguiu resolver ‘MouseTestCtrlA’ como um controlador registrado.

Alguém pode me ajudar neste ponto por favor?

Relendo este artigo http://ify.io/lazy-loading-in-angularjs/ sugeriu manter uma instância de $contentProvider dentro do Angular App.

Eu criei este código no meu app.js

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

Isso me permite escrever meu controlador como esperado em um arquivo javascript externo:

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

Espero que isso possa ajudar!