我有一个使用 MapProvider
的现有应用程序,如下所示:
mapModule.factory('MapProvider', ['$injector', function($injector) {
return $injector.get('GoogleMapsService');
}]);
此 MapProvider 在应用程序中广泛使用,并被注入(inject)到各种其他 Controller 和服务中(正确或错误)。
我现在需要添加一个BaiduMapsService
,我已经能够将其用作测试:
mapModule.factory('MapProvider', ['$injector', function($injector) {
if(true) {
return $injector.get('GoogleMapsService');
} else {
return $injector.get('BaiduMapsService');
}
}]);
并相应地翻转 if
值。 (这两个服务都使用 TypeScript 接口(interface),因此具有相同的方法)。现在,我需要向 API 添加 $http
调用,该调用将根据提供的数据返回要使用的 map 。如何使我的工厂异步,无需将所有 MapProvider.someCallHere()
调用更改为 MapProvider.then(m => m.someCallHere() )
。
理想情况下,当在我的应用程序中注入(inject) MapProvider
时,它将能够使用异步数据进行解析(仅一次),然后注入(inject)必要的服务。
或者,有没有办法推迟/延迟加载 Angular,直到我进行 API 调用并在某处设置一些全局数据?
谢谢。
最佳答案
您可以推迟应用程序bootstrap
(另外,不要使用ng-app
,手动执行),直到从服务器获取数据。我之前已经回答过这个问题question但每个案例都有其具体细节。
我通常会在应用程序启动之前看到在应用程序上声明一个配置值,这对于 Multi-Tenancy 应用程序非常有用。这样这个首选项值就可以作为注入(inject)的提供程序在整个应用程序中使用。
例如:
var app = angular.module('app', []);
// retrieve the $http provider
var ngInjector = angular.injector(["ng"]);
var $http = ngInjector.get("$http");
// load config function. Returns a promise.
function loadConfig(){
return $http.get("/config.json").then(function(response) {
// declare the configuration value on your app
app.constant("Config", response.data);
}, function(err) {
console.error("Error loading the application config.", err)
});
}
// Call loadConfig then bootstrap the app
loadConfig().then(function () {
angular.element(document).ready(function() {
angular.bootstrap(document, ["app"]);
});
});
最后,您可以在工厂中使用 Config
常量来检索首选 map 。
mapModule.factory('MapProvider', ['$injector', 'Config', function($injector, Config) {
if(Config.preferedMap == 'GoogleMap') {
return $injector.get('GoogleMapsService');
} else {
return $injector.get('BaiduMapsService');
}
}]);
关于javascript - 如何更改 Angular 工厂以在注入(inject)前解决,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43890939/