Ho un servizio AngularJS che voglio inizializzare con alcuni dati asincroni. Qualcosa come questo:
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();
}
};
});Ovviamente questo non funzionerà perché se qualcosa tenta di chiamare doStuff()prima di myDatatornare, riceverò un'eccezione puntatore null. Per quanto ne so leggendo alcune delle altre domande poste qui e qui ho alcune opzioni, ma nessuna di queste sembra molto pulita (forse mi manca qualcosa):
Servizio di installazione con "Esegui"
Quando configuri la mia app, procedi come segue:
myApp.run(function ($http, MyService) {
$http.get('data.json').success(function (data) {
MyService.setData(data);
});
});Quindi il mio servizio sarebbe simile a questo:
myModule.service('MyService', function() {
var myData = null;
return {
setData: function (data) {
myData = data;
},
doStuff: function () {
return myData.getSomeData();
}
};
});Questo funziona un po 'del tempo ma se i dati asincroni impiegano più tempo di quanto ci vuole per inizializzare tutto ottengo un'eccezione puntatore null quando chiamo doStuff()
Usa oggetti promettenti
Questo probabilmente funzionerebbe. L'unico aspetto negativo è che ovunque io chiamo MyService, dovrò sapere che doStuff () restituisce una promessa e tutto il codice che dovremo per noi theninteragire con la promessa. Preferirei solo aspettare che myData torni prima di caricare la mia applicazione.
Bootstrap manuale
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
});
});Var globale Javascript Potrei inviare il mio JSON direttamente a una variabile Javascript globale:
HTML:
<script type="text/javascript" src="data.js"></script>data.js:
var dataForMyService = {
// myData here
};Quindi sarebbe disponibile durante l'inizializzazione MyService:
myModule.service('MyService', function() {
var myData = dataForMyService;
return {
doStuff: function () {
return myData.getSomeData();
}
};
});Funzionerebbe anche questo, ma poi ho una variabile javascript globale che ha un cattivo odore.
Queste sono le mie uniche opzioni? Una di queste opzioni è migliore delle altre? So che questa è una domanda piuttosto lunga, ma volevo dimostrare che ho cercato di esplorare tutte le mie opzioni. Qualsiasi consiglio sarebbe molto apprezzato.
$http, quindi salva i dati in un servizio, quindi avvia un'app.