我正在努力让自定义提供程序与注入(inject)的依赖项一起使用。我正在关注this blog这是我尝试让它工作的最新版本的提供程序。
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(/\w\S*/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;
});
到目前为止，我已经确定原始文章错误地将依赖项注入(inject)到 .provider() 而不是 $get 函数中。我已尝试纠正此问题，但当我注入(inject)提供程序时，我的“app”模块仍然收到“错误:[$injector:modulerr]”。如果我从“应用程序”配置中删除提供程序，错误就会消失。所以我确定实际上是我的提供商出了错。
更新
经过更多调试和隔离代码。我更新了上面的代码以反射(reflect)我的新发现，即注入(inject)的提供程序应在其名称末尾省略“提供程序”。我还发现 $injector 和 $provide 服务导致错误。你不能将这些服务注入(inject)到提供商中吗？当我的应用程序尝试调用 registerView 函数时，现在似乎出现了错误。我相信 $route.resolve 没有正确解析。
最佳答案
最初的问题是由于有 two injectors每个应用程序实例，分别属于“配置”和“运行”阶段。一个是服务提供者(由provider定义)，可以在那里注入(inject)其他服务提供者(即$controllerProvider)。另一种是服务实例(其工厂函数由factory或provider的$get定义)，只能注入(inject)服务实例那里(即$controller)。
对于服务实例中的惰性 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', ...);
});
关于javascript - 自定义提供程序 $injector :modulerr 的 Angular 依赖注入(inject)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34852395/