Динамическая загрузка контроллера + фабрика в angularjs

Question

Я разрабатываю приложение angularjs, которое должно расширяться с помощью «добавок». В упрощенном случае addin представляет собой пару файлов js + html. Каждое дополнение должно иметь один или несколько контроллеров и один или несколько заводов. Ниже приведен пример добавления с одного контроллером и одного завода:

JS:

angular.module('addins.basic', []) 

angular.module('addins.basic').factory('BasicAddinFactory', [BasicAddinFactory]); 

function BasicAddinFactory() 
{ 
    var fact = 
    { 
     Invoke: function() 
     { 
      console.log('BasicAddinFactory.Invoke'); 
     }, 
     GetClients: function() 
     { 
      return ["aa", "bb"]; 
     } 
    } 

    return fact; 
} 

angular.module('addins.basic').controller('BasicAddinController', ['$scope', 'BasicAddinFactory', BasicAddinController]); 

function BasicAddinController($scope, $injector, addin) 
{ 
    //var injector = angular.injector(['ng', 'addins.basic']) 
    //var addin = injector.get('BasicAddinFactory'); 

    $scope.expr = 'BasicAddinFactory: ' + addin.GetClients()[0]; 
} 

HTML:

<div ng-controller="BasicAddinController"> 
    <input type="text" ng-model="expr"> 
    <span>{{ expr }}</span> 
</div> 

Загрузка надстройка динамически не проблема с использованием методов, широко описана в Интернете : добавив JS-скрипт и HTML в DOM. Все загружается нормально, пока я не попытаюсь ввести зависимость от BasicAddinFactory в BasicAddinController. После этого я получил ошибку во время динамической загрузки: Неизвестный поставщик: addinProvider < - addin.

Интересная часть состоит в том, что, если я не вставляю явную зависимость, все загружается нормально, и я даже могу получить доступ к заводскому экземпляру из контроллера (или из родительского кода, который загружает «добавление»), используя код комментария в примере выше. Но это довольно уродливо, и я действительно не хочу, чтобы так оно было.

Я был бы признателен, если бы кто-нибудь мог указать мне, где моя ошибка.

Спасибо.

UPDATE: Sample plunk

Answer 1

Это связано с тем, как Угловое фактически обрабатывает зависимости за кулисами. Обработчики bootstrap обрабатывают все ваши различные сервисы.

При динамическом добавлении модулей вам необходимо самостоятельно зарегистрировать эти новые модули. Один из способов сделать это, имеющий глобально доступную функцию регистров для каждого вида услуг, как так:

app.config(['$controllerProvider', 
    '$compileProvider', '$filterProvider', '$provide', 
    function($controllerProvider, 
    $compileProvider, $filterProvider, $provide) { 

    app.register = { 
     controller: $controllerProvider.register, 
     directive: $compileProvider.directive, 
     filter: $filterProvider.register, 
     factory: $provide.factory, 
     service: $provide.service 
    }; 
    } 
]); 

Вы затем изменить динамические модули зарегистрировать свои услуги, как так:

app.register.factory('BasicAddinFactory', [BasicAddinFactory]); 

A Plunker example.