Saya memiliki layanan AngularJS yang ingin saya inisialisasi dengan beberapa data asinkron. Sesuatu seperti ini:
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();
}
};
});Jelas ini tidak akan berhasil karena jika sesuatu mencoba menelepon doStuff()sebelum myDatakembali saya akan mendapatkan pengecualian null pointer. Sejauh yang saya tahu dari membaca beberapa pertanyaan lain yang diajukan di sini dan di sini saya punya beberapa pilihan, tetapi tidak ada yang tampak sangat bersih (mungkin saya kehilangan sesuatu):
Setup Service dengan "run"
Saat menyiapkan aplikasi saya lakukan ini:
myApp.run(function ($http, MyService) {
$http.get('data.json').success(function (data) {
MyService.setData(data);
});
});Maka layanan saya akan terlihat seperti ini:
myModule.service('MyService', function() {
var myData = null;
return {
setData: function (data) {
myData = data;
},
doStuff: function () {
return myData.getSomeData();
}
};
});Ini berfungsi beberapa waktu tetapi jika data asinkron terjadi lebih lama dari yang dibutuhkan untuk semuanya untuk diinisialisasi, saya mendapatkan pengecualian null pointer ketika saya menelepon doStuff()
Gunakan benda janji
Ini mungkin akan berhasil. Satu-satunya downside di mana-mana saya sebut MyService saya harus tahu bahwa doStuff () mengembalikan janji dan semua kode harus kita thenuntuk berinteraksi dengan janji itu. Saya lebih suka menunggu sampai myData kembali sebelum memuat aplikasi saya.
Bootstrap Manual
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 Saya bisa mengirim JSON saya langsung ke variabel Javascript global:
HTML:
<script type="text/javascript" src="data.js"></script>data.js:
var dataForMyService = {
// myData here
};Maka akan tersedia saat menginisialisasi MyService:
myModule.service('MyService', function() {
var myData = dataForMyService;
return {
doStuff: function () {
return myData.getSomeData();
}
};
});Ini akan berhasil juga, tetapi kemudian saya memiliki variabel javascript global yang baunya buruk.
Apakah ini satu-satunya pilihan saya? Apakah salah satu opsi ini lebih baik daripada yang lain? Saya tahu ini adalah pertanyaan yang cukup panjang, tetapi saya ingin menunjukkan bahwa saya telah mencoba mengeksplorasi semua opsi saya. Bimbingan apa pun akan sangat dihargai.
$http, lalu menyimpan data dalam suatu layanan, lalu mem-bootstrap aplikasi.