AngularJS: inicialize o serviço com dados assíncronos

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.

Você já deu uma olhada $routeProvider.when('/path',{ resolve:{...}? Pode tornar a promessa um pouco mais limpa:

Exponha uma promessa em seu serviço:

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();
      }
    };
});

Adicione resolveà sua configuração de rota:

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;
      }
    }})
  }):

Seu controlador não será instanciado antes que todas as dependências sejam resolvidas:

app.controller('MainCtrl', function($scope,MyService) {
  console.log('Promise is now resolved: '+MyService.doStuff().data)
  $scope.data = MyService.doStuff();
});

Fiz um exemplo em plnkr: http://plnkr.co/edit/GKg21XH0RwCMEQGUdZKH?p=preview

Com base na solução de Martin Atkins, aqui está uma solução completa e concisa de ângulo puro:

(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']);
        });
    }
  );
})();

Essa solução usa uma função anônima de execução automática para obter o serviço $ http, solicitar a configuração e injetar em uma constante chamada CONFIG quando estiver disponível.

Uma vez completamente, aguardamos até que o documento esteja pronto e inicializamos o aplicativo Angular.

Esse é um pequeno aprimoramento da solução de Martin, que adiou a busca da configuração até o final do documento. Tanto quanto eu sei, não há razão para adiar a chamada de $ http para isso.

Teste de Unidade

Nota: Descobri que esta solução não funciona bem ao testar a unidade quando o código está incluído no seu app.jsarquivo. A razão para isso é que o código acima é executado imediatamente quando o arquivo JS é carregado. Isso significa que a estrutura de teste (Jasmine no meu caso) não tem chance de fornecer uma implementação simulada de $http.

Minha solução, com a qual não estou completamente satisfeito, foi mover esse código para o nosso index.htmlarquivo, para que a infraestrutura de teste da unidade Grunt / Karma / Jasmine não o veja.

Usei uma abordagem semelhante à descrita por @XMLilley, mas queria ter a capacidade de usar os serviços AngularJS, como $httpcarregar a configuração e fazer uma inicialização adicional sem o uso de APIs de baixo nível ou jQuery.

O uso resolvede rotas também não era uma opção, porque eu precisava que os valores estivessem disponíveis como constantes quando meu aplicativo for iniciado, mesmo em module.config()blocos.

Criei um pequeno aplicativo AngularJS que carrega a configuração, os define como constantes no aplicativo real e o inicializa.

// define the module of your app
angular.module('MyApp', []);

// define the module of the bootstrap app
var bootstrapModule = angular.module('bootstrapModule', []);

// the bootstrapper service loads the config and bootstraps the specified app
bootstrapModule.factory('bootstrapper', function ($http, $log, $q) {
  return {
    bootstrap: function (appName) {
      var deferred = $q.defer();

      $http.get('/some/url')
        .success(function (config) {
          // set all returned values as constants on the app...
          var myApp = angular.module(appName);
          angular.forEach(config, function(value, key){
            myApp.constant(key, value);
          });
          // ...and bootstrap the actual app.
          angular.bootstrap(document, [appName]);
          deferred.resolve();
        })
        .error(function () {
          $log.warn('Could not initialize application, configuration could not be loaded.');
          deferred.reject();
        });

      return deferred.promise;
    }
  };
});

// create a div which is used as the root of the bootstrap app
var appContainer = document.createElement('div');

// in run() function you can now use the bootstrapper service and shutdown the bootstrapping app after initialization of your actual app
bootstrapModule.run(function (bootstrapper) {

  bootstrapper.bootstrap('MyApp').then(function () {
    // removing the container will destroy the bootstrap app
    appContainer.remove();
  });

});

// make sure the DOM is fully loaded before bootstrapping.
angular.element(document).ready(function() {
  angular.bootstrap(appContainer, ['bootstrapModule']);
});

Veja-o em ação (usando em $timeoutvez de $http) aqui: http://plnkr.co/edit/FYznxP3xe8dxzwxs37hi?p=preview

ATUALIZAR

Eu recomendaria usar a abordagem descrita abaixo por Martin Atkins e JBCP.

ATUALIZAÇÃO 2

Como eu precisava dele em vários projetos, acabei de lançar um módulo bower que cuida disso: https://github.com/philippd/angular-deferred-bootstrap

Exemplo que carrega dados do back-end e define uma constante chamada APP_CONFIG no módulo AngularJS:

deferredBootstrapper.bootstrap({
  element: document.body,
  module: 'MyApp',
  resolve: {
    APP_CONFIG: function ($http) {
      return $http.get('/api/demo-config');
    }
  }
});

O caso "inicialização manual" pode obter acesso aos serviços Angular criando manualmente um injetor antes da inicialização. Esse injetor inicial permanecerá sozinho (não será anexado a nenhum elemento) e incluirá apenas um subconjunto dos módulos carregados. Se tudo o que você precisa são serviços Angular básicos, basta carregar ng, desta forma:

angular.element(document).ready(
    function() {
        var initInjector = angular.injector(['ng']);
        var $http = initInjector.get('$http');
        $http.get('/config.json').then(
            function (response) {
               var config = response.data;
               // Add additional services/constants/variables to your app,
               // and then finally bootstrap it:
               angular.bootstrap(document, ['myApp']);
            }
        );
    }
);

Você pode, por exemplo, usar o module.constantmecanismo para disponibilizar dados para o seu aplicativo:

myApp.constant('myAppConfig', data);

myAppConfigAgora isso pode ser injetado como qualquer outro serviço e, em particular, está disponível durante a fase de configuração:

myApp.config(
    function (myAppConfig, someService) {
        someService.config(myAppConfig.someServiceConfig);
    }
);

ou, para um aplicativo menor, você pode simplesmente injetar a configuração global diretamente no seu serviço, à custa de espalhar conhecimento sobre o formato de configuração em todo o aplicativo.

Obviamente, como as operações assíncronas aqui bloquearão a inicialização do aplicativo e, assim, a compilação / vinculação do modelo, é aconselhável usar a ng-cloakdiretiva para impedir que o modelo não analisado apareça durante o trabalho. Você também pode fornecer algum tipo de indicação de carregamento no DOM, fornecendo algum HTML que é mostrado apenas até a inicialização do AngularJS:

<div ng-if="initialLoad">
    <!-- initialLoad never gets set, so this div vanishes as soon as Angular is done compiling -->
    <p>Loading the app.....</p>
</div>
<div ng-cloak>
    <!-- ng-cloak attribute is removed once the app is done bootstrapping -->
    <p>Done loading the app!</p>
</div>

Criei um exemplo completo e funcional dessa abordagem no Plunker, carregando a configuração de um arquivo JSON estático como exemplo.

Eu tive o mesmo problema: eu amo o resolveobjeto, mas isso só funciona para o conteúdo da ng-view. E se você tiver controladores (para navegação de nível superior, digamos) que existem fora do ng-view e que precisam ser inicializados com dados antes que o roteamento comece a acontecer? Como evitamos mexer no lado do servidor apenas para fazer esse trabalho?

Use a inicialização manual e uma constante angular . Um XHR ingênuo obtém seus dados e você inicializa angular no retorno de chamada, o que lida com os problemas de async. No exemplo abaixo, você nem precisa criar uma variável global. Os dados retornados existem apenas no escopo angular como injetáveis ​​e nem estão presentes dentro de controladores, serviços etc., a menos que você os injete. (Por mais que você injete a saída do seu resolveobjeto no controlador para obter uma visão roteada.) Se você preferir interagir posteriormente com esses dados como um serviço, poderá criar um serviço, injetar os dados e ninguém será mais sábio. .

Exemplo:

//First, we have to create the angular module, because all the other JS files are going to load while we're getting data and bootstrapping, and they need to be able to attach to it.
var MyApp = angular.module('MyApp', ['dependency1', 'dependency2']);

// Use angular's version of document.ready() just to make extra-sure DOM is fully 
// loaded before you bootstrap. This is probably optional, given that the async 
// data call will probably take significantly longer than DOM load. YMMV.
// Has the added virtue of keeping your XHR junk out of global scope. 
angular.element(document).ready(function() {

    //first, we create the callback that will fire after the data is down
    function xhrCallback() {
        var myData = this.responseText; // the XHR output

        // here's where we attach a constant containing the API data to our app 
        // module. Don't forget to parse JSON, which `$http` normally does for you.
        MyApp.constant('NavData', JSON.parse(myData));

        // now, perform any other final configuration of your angular module.
        MyApp.config(['$routeProvider', function ($routeProvider) {
            $routeProvider
              .when('/someroute', {configs})
              .otherwise({redirectTo: '/someroute'});
          }]);

        // And last, bootstrap the app. Be sure to remove `ng-app` from your index.html.
        angular.bootstrap(document, ['NYSP']);
    };

    //here, the basic mechanics of the XHR, which you can customize.
    var oReq = new XMLHttpRequest();
    oReq.onload = xhrCallback;
    oReq.open("get", "/api/overview", true); // your specific API URL
    oReq.send();
})

Agora, sua NavDataconstante existe. Vá em frente e injete-o em um controlador ou serviço:

angular.module('MyApp')
    .controller('NavCtrl', ['NavData', function (NavData) {
        $scope.localObject = NavData; //now it's addressable in your templates 
}]);

Obviamente, o uso de um objeto XHR simples remove uma série de detalhes que o $httpJQuery cuidaria de você, mas este exemplo funciona sem dependências especiais, pelo menos para uma simples get. Se você deseja um pouco mais de energia para sua solicitação, carregue uma biblioteca externa para ajudá-lo. Mas não acho que seja possível acessar $httpferramentas angulares ou outras neste contexto.

( Postagem relacionada ao SO )

O que você pode fazer é no seu .config para o aplicativo, criar o objeto de resolução para a rota e, na função, passar em $ q (objeto da promessa) e o nome do serviço do qual você está dependendo, e resolver a promessa no função de retorno de chamada para o $ http no serviço da seguinte forma:

CONFIGURAÇÃO DE ROTA

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
          templateUrl: 'home.html',
          controller: 'homeCtrl',
          resolve:function($q,MyService) {
                //create the defer variable and pass it to our service
                var defer = $q.defer();
                MyService.fetchData(defer);
                //this will only return when the promise
                //has been resolved. MyService is going to
                //do that for us
                return defer.promise;
          }
      })
}

Angular não renderizará o modelo nem disponibilizará o controlador até que defer.resolve () seja chamado. Podemos fazer isso em nosso serviço:

SERVIÇO

app.service('MyService',function($http){
       var MyService = {};
       //our service accepts a promise object which 
       //it will resolve on behalf of the calling function
       MyService.fetchData = function(q) {
             $http({method:'GET',url:'data.php'}).success(function(data){
                 MyService.data = data;
                 //when the following is called it will
                 //release the calling function. in this
                 //case it's the resolve function in our
                 //route config
                 q.resolve();
             }
       }

       return MyService;
});

Agora que o MyService possui os dados atribuídos a sua propriedade de dados e a promessa no objeto de resolução de rota foi resolvida, nosso controlador para a rota entra em ação e podemos atribuir os dados do serviço ao objeto de controlador.

CONTROLADOR

  app.controller('homeCtrl',function($scope,MyService){
       $scope.servicedata = MyService.data;
  });

Agora toda a nossa ligação no escopo do controlador poderá usar os dados originados no MyService.

Então eu encontrei uma solução. Criei um serviço angularJS, vamos chamá-lo de MyDataRepository e criei um módulo para ele. Em seguida, sirvo esse arquivo javascript do meu controlador do lado do servidor:

HTML:

<script src="path/myData.js"></script>

Lado do servidor:

@RequestMapping(value="path/myData.js", method=RequestMethod.GET)
public ResponseEntity<String> getMyDataRepositoryJS()
{
    // Populate data that I need into a Map
    Map<String, String> myData = new HashMap<String,String>();
    ...
    // Use Jackson to convert it to JSON
    ObjectMapper mapper = new ObjectMapper();
    String myDataStr = mapper.writeValueAsString(myData);

    // Then create a String that is my javascript file
    String myJS = "'use strict';" +
    "(function() {" +
    "var myDataModule = angular.module('myApp.myData', []);" +
    "myDataModule.service('MyDataRepository', function() {" +
        "var myData = "+myDataStr+";" +
        "return {" +
            "getData: function () {" +
                "return myData;" +
            "}" +
        "}" +
    "});" +
    "})();"

    // Now send it to the client:
    HttpHeaders responseHeaders = new HttpHeaders();
    responseHeaders.add("Content-Type", "text/javascript");
    return new ResponseEntity<String>(myJS , responseHeaders, HttpStatus.OK);
}

Posso injetar MyDataRepository sempre que precisar:

someOtherModule.service('MyOtherService', function(MyDataRepository) {
    var myData = MyDataRepository.getData();
    // Do what you have to do...
}

Isso funcionou muito bem para mim, mas estou aberto a qualquer feedback, se alguém tiver algum. }

Além disso, você pode usar as seguintes técnicas para provisionar seu serviço globalmente, antes da execução dos controladores reais: https://stackoverflow.com/a/27050497/1056679 . Basta resolver seus dados globalmente e depois passá-los para o seu serviço em runbloco, por exemplo.

Você pode usar JSONPpara carregar dados de serviço de forma assíncrona. A solicitação JSONP será feita durante o carregamento da página inicial e os resultados estarão disponíveis antes do início do aplicativo. Dessa forma, você não precisará inchar seu roteamento com resoluções redundantes.

Você html ficaria assim:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>

function MyService {
  this.getData = function(){
    return   MyService.data;
  }
}
MyService.setData = function(data) {
  MyService.data = data;
}

angular.module('main')
.service('MyService', MyService)

</script>
<script src="/some_data.php?jsonp=MyService.setData"></script>

A maneira mais fácil de buscar qualquer diretório inicializado é usar o ng-init.

Basta colocar o escopo ng-init div onde você deseja buscar dados init

index.html

<div class="frame" ng-init="init()">
    <div class="bit-1">
      <div class="field p-r">
        <label ng-show="regi_step2.address" class="show-hide c-t-1 ng-hide" style="">Country</label>
        <select class="form-control w-100" ng-model="country" name="country" id="country" ng-options="item.name for item in countries" ng-change="stateChanged()" >
        </select>
        <textarea class="form-control w-100" ng-model="regi_step2.address" placeholder="Address" name="address" id="address" ng-required="true" style=""></textarea>
      </div>
    </div>
  </div>

index.js

$scope.init=function(){
    $http({method:'GET',url:'/countries/countries.json'}).success(function(data){
      alert();
           $scope.countries = data;
    });
  };

NOTA: você pode usar essa metodologia se não tiver o mesmo código em mais de um local.