AngularJS:用异步数据初始化服务我有一个AngularJS服务,我想用一些异步数据初始化它。就像这样:myModule.service('MyService', function($http) {
var myData = null;
$http.get('data.json').success(function (data) {
myData = data;
});
return {
setData: function (data) {
myData = data;
},
doStuff: function () {
return myData.getSomeData();
}
};});很明显,这是行不通的,因为如果有东西试图调用doStuff()以前myData获取返回,我将得到一个空指针异常。据我所知,从所问的其他问题中,我可以看出这里和这里我有几个选择,但没有一个看起来很干净(也许我遗漏了什么):带有“Run”的安装服务在设置我的应用程序时,请执行以下操作:myApp.run(function ($http, MyService) {
$http.get('data.json').success(function (data) {
MyService.setData(data);
});});那么我的服务应该是这样的:myModule.service('MyService', function() {
var myData = null;
return {
setData: function (data) {
myData = data;
},
doStuff: function () {
return myData.getSomeData();
}
};});这在某些情况下是可行的,但是如果异步数据碰巧花费的时间比初始化所用的时间更长,则当我调用时会得到一个空指针异常。doStuff()使用承诺对象这可能管用。唯一的缺点就是我在任何地方都调用MyService,我必须知道doStuff()返回一个承诺,所有的代码都必须返回给我们。then与承诺互动。我宁愿等到我的数据回来后再加载我的应用程序。手动引导angular.element(document).ready(function() {
$.getJSON("data.json", function (data) {
// can't initialize the data here because the service doesn't exist yet
angular.bootstrap(document);
// too late to initialize here because something may have already
// tried to call doStuff() and would have got a null pointer exception
});});全局Javascript Var我可以将JSON直接发送到全局Javascript变量:HTML:<script type="text/javascript" src="data.js"></script>data.js:var dataForMyService = { // myData here};当初始化时,它将是可用的。MyService:myModule.service('MyService', function() {
var myData = dataForMyService;
return {
doStuff: function () {
return myData.getSomeData();
}
};});这也是可行的,但是我有一个全局javascript变量,它闻起来很难闻。这是我唯一的选择吗?这些选择中有一个比其他的好吗?我知道这是一个很长的问题,但我想表明,我已经尝试探索我的所有选择。如有任何指导,将不胜感激。
3 回答

呼如林
TA贡献1798条经验 获得超3个赞
(function() { var initInjector = angular.injector(['ng']); var $http = initInjector.get('$http'); $http.get('/config.json').then( function (response) { angular.module('config', []).constant('CONFIG', response.data); angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); }); } );})();
单元测试
app.js
$http
.
index.html
添加回答
举报
0/150
提交
取消