Eu tenho um serviço AngularJS que desejo inicializar com alguns dados assíncronos. Algo assim:
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();
}
};
});Obviamente, isso não funcionará porque se algo tentar chamar doStuff()antes de myDatavoltar, receberei uma exceção de ponteiro nulo. Pelo que sei ao ler algumas das outras perguntas feitas aqui e aqui , tenho algumas opções, mas nenhuma delas parece muito limpa (talvez esteja faltando alguma coisa):
Serviço de instalação com "executar"
Ao configurar meu aplicativo, faça o seguinte:
myApp.run(function ($http, MyService) {
$http.get('data.json').success(function (data) {
MyService.setData(data);
});
});Então, meu serviço ficaria assim:
myModule.service('MyService', function() {
var myData = null;
return {
setData: function (data) {
myData = data;
},
doStuff: function () {
return myData.getSomeData();
}
};
});Isso funciona algumas vezes, mas se os dados assíncronos levarem mais tempo do que o necessário para que tudo seja inicializado, recebo uma exceção de ponteiro nulo quando ligo doStuff()
Use objetos de promessa
Provavelmente isso funcionaria. A única desvantagem em todos os lugares que eu chamo de MyService, terei que saber que doStuff () retorna uma promessa e todo o código precisará de nós thenpara interagir com a promessa. Prefiro esperar até que myData esteja de volta antes de carregar o meu aplicativo.
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 de Javascript Var eu poderia enviar meu JSON diretamente para uma variável global Javascript:
HTML:
<script type="text/javascript" src="data.js"></script>data.js:
var dataForMyService = {
// myData here
};Em seguida, ele estará disponível ao inicializar MyService:
myModule.service('MyService', function() {
var myData = dataForMyService;
return {
doStuff: function () {
return myData.getSomeData();
}
};
});Isso funcionaria também, mas então eu tenho uma variável javascript global que cheira mal.
Essas são minhas únicas opções? Uma dessas opções é melhor que as outras? Sei que essa é uma pergunta bastante longa, mas queria mostrar que tentei explorar todas as minhas opções. Qualquer orientação seria muito apreciada.
$http, salvar dados em um serviço e inicializar um aplicativo.