我正在努力让自定义提供程序使用注入其中的依赖项。我正在关注这个博客，这是我的最新版本的提供商，我试图让它工作。
define([
'angular',
'ngRoute',
'require'
], function(angular) {
return angular.module('pluggableViews', ['ngRoute'])
.provider('$pluggableViews', function() {
var providers = {};
var $injector = angular.injector(['ng']);
this.views = [];
this.registerModule = function(moduleName) {
console.log(moduleName);
var module = angular.module(moduleName);
if (module.requires) {
for (var i = 0; i < module.requires.length; i++) {
this.registerModule(module.requires[i]);
}
}
angular.forEach(module._invokeQueue, function(invokeArgs) {
var provider = providers[invokeArgs[0]];
provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
});
angular.forEach(module._configBlocks, function(fn) {
$injector.invoke(fn);
});
angular.forEach(module._runBlocks, function(fn) {
$injector.invoke(fn);
});
};
this.toTitleCase = function(str) {
return str.replace(/wS*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
};
this.registerView = function(viewConfig) {
if (!viewConfig.viewUrl) {
viewConfig.viewUrl = '/' + viewConfig.ID;
}
if (!viewConfig.templateUrl) {
viewConfig.templateUrl = 'views/' + viewConfig.ID + '/' + viewConfig.ID + '.html';
}
if (!viewConfig.controller) {
viewConfig.controller = this.toTitleCase(viewConfig.ID) + 'Controller';
}
if (!viewConfig.navigationText) {
viewConfig.navigationText = this.toTitleCase(viewConfig.ID);
}
if (!viewConfig.requirejsName) {
viewConfig.requirejsName = viewConfig.ID;
}
if (!viewConfig.moduleName) {
viewConfig.moduleName = viewConfig.ID;
}
if (!viewConfig.cssId) {
viewConfig.cssId = viewConfig.ID + "-css";
}
if (!viewConfig.cssUrl) {
viewConfig.cssUrl = 'views/' + viewConfig.ID + '/' + viewConfig.ID + '.css';
}
this.views.push(viewConfig);
$route.when(viewConfig.viewUrl, {
templateUrl: viewConfig.templateUrl,
controller: viewConfig.controller,
resolve: {
resolver: ['$q', '$timeout', function($q, $timeout) {
var deferred = $q.defer();
if (angular.element("#" + viewConfig.cssId).length === 0) {
var link = document.createElement('link');
link.id = viewConfig.cssId;
link.rel = "stylesheet";
link.type = "text/css";
link.href = viewConfig.cssUrl;
angular.element('head').append(link);
}
if (viewConfig.requirejsConfig) {
require.config(viewConfig.requirejsConfig);
}
require([viewConfig.requirejsName], function() {
this.registerModule(viewConfig.moduleName);
$timeout(function() {
deferred.resolve();
});
});
return deferred.promise;
}]
}
});
};
this.$get = [
'$controller',
'$compile',
'$filter',
// '$provide',
// '$injector',
'$route',
function(
$controller,
$compile,
$filter,
//$provide,
//$injector,
$route
) {
providers.$controller = $controller;
providers.$compile = $compile;
providers.$filter = $filter;
providers.$route = $route;
}];
});
});
下面是配置提供程序：
define([
'angular',
'ngRoute',
'views/nav/nav',
'scripts/providers/pluggableViews'
], function (angular) {
var app = angular.module('app', ['ngRoute', 'pluggableViews', 'app.nav']);
app.directive('navbar', function () {
return {
restrict: 'E',
templateUrl: '../views/nav/nav.html'
};
});
app.config([
'$routeProvider',
'$locationProvider',
'$pluggableViewsProvider'
], function($routeProvider, $locationProvider, $pluggableViewsProvider){
$pluggableViewsProvider.registerView({
ID: 'home',
moduleName: 'app.home',
requirejsConfig: {paths: {'home': 'views/home/home'}},
viewUrl: '/'
});
}]);
return app;
});
到目前为止，我已经确定原始文章错误地将依赖项注入 .provider（） 而不是 $get 函数。我试图纠正此问题，但是当我注入提供程序时，我的"应用程序"模块仍然收到"错误：[$injector：modulerr]"。如果我从我的"应用程序"配置中删除提供程序，错误就会消失。所以我确定实际上是我的提供者有误。
更新
经过更多调试和隔离代码。我已经更新了上面的代码，以反映我的新发现，即注入的提供程序应在其名称末尾省略"提供程序"。我还发现$injector和$provide服务会导致错误。您不能将这些服务注入提供商吗？现在看来，当我的应用程序尝试调用 registerView 函数时，事情出现了错误。我相信 $route.resolve 没有正确解析。
最初的问题源于每个应用程序实例有两个注入器，分别属于"配置"和"运行"阶段。一个是针对服务提供商（由provider定义），其他服务提供者可以在那里注入（即 $controllerProvider ）。另一个是服务实例（它的工厂函数由factory或provider的$get定义），只有服务实例可以注入在那里（即 $controller ）。
对于服务实例中的惰性控制器注册，它将是
app.provider('...', function($controllerProvider) {
this.$get = function ($controller) {
$controllerProvider.register('LazyController', ...);
var lazyControllerInstance = $controller('LazyController', ...);
};
})
可以执行类似的技巧，使用 $routeProvider 懒惰地定义新路由，使用 $compileProvider 定义新指令。
另一方面，您尝试接近的东西在 Angular 中是不可能的。
一旦应用程序被引导并且配置阶段已经开始，就无法定义新的 Angular 模块（从技术上讲，它们可以，但不能在此应用程序实例中使用）。必须在应用中使用的每个模块都必须在定义模块时加载。这些可以是虚拟模块，但它们必须存在才能使用，例如
angular.module('dummy', []);
angular.module('app', ['dummy'])
.config(($provide, $controllerProvider) => {
// these ones are necessary to register new items after config phase
$provide.value('$controllerProvider', $controllerProvider);
$provide.value('$provide', $provide);
})
.run(() => {
require(['dummy'], ...);
});
// dummy.js
angular.module('dummy').run(($provide, $controllerProvider) => {
$provide.factory('lazy', ...)
$controllerProvider.register('LazyController', ...);
});
经过更多的研究，试图解决这个问题，我发现了一个可以为我解决动态注册问题的库。AngularAMD与AMDefine/RequireJS合作，实现角度模块的动态配准。它解决了我试图通过这篇文章完成的事情（我的代码更少！由于这花了我很长时间才弄清楚这一切，我继续为我尝试使用我的 Web 应用程序做的所有基础内容创建了一个模板，以便其他人可以看到我最终是如何做到的。你可以在这里找到它。
更新
@estus对AngularAMD提出了一些合理的担忧。我将不得不进一步研究这个问题。