AngularJS : asenkron veri hizmeti Başlatılamıyor
Bazı zaman uyumsuz veri ile başlatmak istiyorum AngularJS bir hizmeti var. Şöyle bir şey:
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();
}
};
});
Açıkçası bu bir şey myData
geri dönmeden doStuff()
aramak için çalışırsa, bir null işaretçi istisna alacağım çünkü işe yaramaz. Bildiğim kadarıyla söyleyebilirim okuma bazı diğer sorular here here ben birkaç seçenek vardır, ama hiçbiri çok temiz (belki de ben eksik bir şey):
Kurulum Servisi"" . run ile
Tuzak zaman benim app bunu yapmak için:
myApp.run(function ($http, MyService) {
$http.get('data.json').success(function (data) {
MyService.setData(data);
});
});
O zaman benim servis bu gibi görünecektir:
myModule.service('MyService', function() {
var myData = null;
return {
setData: function (data) {
myData = data;
},
doStuff: function () {
return myData.getSomeData();
}
};
});
Bu bazen çalışır ama eğer asenkron veri başlatılmış her şeyi elde etmek için gereken daha uzun olursa doStuff()
aradığımda null işaretçi istisna olsun
Kullanım nesneleri veriyorum
Bu muhtemelen işe yarar. Tek dezavantajı her yerde arayacağım doStuff bilmek zorunda kalacağım Başlatılıyor() bir söz verir ve bu kod bize then
vaadi ile etkileşim içinde olacak. Sadece benim bilgim uygulama yüklemeden önce geri kadar bekleyin tercih ederim.
Manuel Bootstrap
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
});
});
Global Javascript Var Doğrudan küresel bir Javascript değişkeni için benim JSON gönderebilirim:
HTML:
<script type="text/javascript" src="data.js"></script>
data.js:
var dataForMyService = {
// myData here
};
O zaman MyService
başlatırken kullanılabilir olacaktır:
myModule.service('MyService', function() {
var myData = dataForMyService;
return {
doStuff: function () {
return myData.getSomeData();
}
};
});
Bu çok işe yarar, ama sonra kötü kokan küresel bir javascript değişken var.
Bu benim tek seçenek mi var? Bu seçeneklerden biri de diğerlerinden daha iyi? Bu oldukça uzun bir soru olduğunu biliyorum, ama bütün seçeneklerimi Gözden denedim bunu göstermek istedim. Herhangi bir yardım büyük mutluluk duyacağız.
CEVAP
$routeProvider.when('/path',{ resolve:{...}
bir göz oldu mu? Söz yaklaşımı biraz daha temiz yapabilirsiniz:
Açığa hizmetiniz bir söz:
app.service('MyService', function($http) {
var myData = null;
var promise = $http.get('data.json').success(function (data) {
myData = data;
});
return {
promise:promise,
setData: function (data) {
myData = data;
},
doStuff: function () {
return myData;//.getSomeData();
}
};
});
Rotanızı config resolve
ekleyin:
app.config(function($routeProvider){
$routeProvider
.when('/',{controller:'MainCtrl',
template:'<div>From MyService:<pre>{{data | json}}</pre></div>',
resolve:{
'MyServiceData':function(MyService){
// MyServiceData will also be injectable in your controller, if you don't want this you could create a new promise with the $q service
return MyService.promise;
}
}})
}):
Kumandanız tüm bağımlılıkları çözülmüş önce örneği almazsınız:
app.controller('MainCtrl', function($scope,MyService) {
console.log('Promise is now resolved: ' MyService.doStuff().data)
$scope.data = MyService.doStuff();
});
Plnkr bir örnek yaptım: http://plnkr.co/edit/GKg21XH0RwCMEQGUdZKH?p=preview
Sunucu ve İstemci arasında Otomatik ol...
AngularJS $http veri geçen.istek olsun...
AngularJs $http.() post veri göndermez...
Veri bağlama Nasıl çalışır?AngularJS :...
Nasıl meta veri hizmeti bir web GERİSİ...