AngularJS : Initialiser le service de transmission de données asynchrones

Avez-vous eu un coup d'oeil à $routeProvider.lorsque('/path',{ résoudre:{...}? Il peut faire la promesse approche un peu plus propre:

Exposer une promesse à votre service:

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

Ajouter resolve à votre itinéraire config:

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

Votre contrôleur ne pas obtenir instancié avant que toutes les dépendances sont résolues:

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

J'ai fait un exemple à plnkr: http://plnkr.co/edit/GKg21XH0RwCMEQGUdZKH?p=preview

J'ai utilisé une approche similaire à celle décrite par @XMLilley mais je voulais avoir la possibilité d'utiliser AngularJS services comme $http de charger la configuration et de poursuivre l'initialisation sans l'utilisation de bas niveau de l'Api jQuery.

À l'aide de resolve sur les routes a aussi pas une option, car j'avais besoin de valeurs disponibles en tant que constantes lorsque mon application est démarrée, et même dans module.config() blocs.

J'ai créé une petite application AngularJS qui se charge de la configuration, définit comme constantes sur l'application et l'amorce il.

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

Le voir en action (à l'aide de $timeout au lieu de $http) ici: http://plnkr.co/edit/FYznxP3xe8dxzwxs37hi?p=preview

Mise à JOUR

Je vous recommande d'utiliser l'approche décrite ci-dessous par Martin Atkins et JBCP.

Mise à JOUR 2

Parce que j'avais besoin dans de multiples projets, je viens de publier une charmille module qui s'occupe de cela: https://github.com/philippd/angular-deferred-bootstrap

Exemple qui charge les données à partir du back-end et définit une constante appelée APP_CONFIG sur le AngularJS module:

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

J'ai eu le même problème: j'aime la resolve objet, mais cela ne fonctionne que pour le contenu de ng-view. Si vous avez des contrôleurs de premier niveau, nav, disons) qui existent en dehors de ng-view et qui a besoin d'être initialisé avec les données avant le routage même commence à se produire? Comment pouvons-nous éviter de coucher sur le côté serveur juste pour faire ce travail?

Manuel d'utilisation de bootstrap et angulaire constante. Un naiive XHR vous permet de vous vos données, et vous bootstrap angulaire dans son rappel, qui concerne votre async questions. Dans l'exemple ci-dessous, vous n'avez même pas besoin de créer une variable globale. Les données renvoyées n'existe que dans angulaire portée comme un produit injectable, et n'est même pas présent à l'intérieur de contrôleurs, services, etc. à moins que vous l'injecter. (Comme vous injecter de la sortie de votre resolve objet dans le contrôleur pour une acheminé vue.) Si vous préférez, par la suite, d'interagir avec ces données en tant que service, vous pouvez créer un service, d'injecter des données, et personne ne pourra jamais l'être le plus sage.

Exemple:

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

Maintenant, votre NavData constante existe. Aller de l'avant et à l'injecter dans un contrôleur ou d'un service:

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

Bien sûr, à l'aide d'un nu XHR objet élimine un certain nombre de subtilités qui $http ou JQuery permettrait de prendre en charge pour vous, mais cet exemple fonctionne avec aucun des dépendances, au moins pour un simple get. Si vous voulez un peu plus de puissance pour votre demande, charger une bibliothèque externe pour vous aider. Mais je ne pense pas qu'il est possible d'accéder angulaire du $http ou d'autres outils dans ce contexte.

(DONC related post)

J'ai donc trouvé une solution. J'ai créé un service angularJS, nous allons l'appeler MyDataRepository et j'ai créé un module pour cela. J'ai ensuite servir de ce fichier javascript de mon côté serveur contrôleur:

HTML:

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

Côté serveur:

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

Je peux ensuite l'injecter MyDataRepository où jamais j'en ai besoin:

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

Cela a très bien fonctionné pour moi, mais je suis ouvert à tout commentaires si quelqu'un a des.
}

Vous pouvez utiliser JSONP pour charger de manière asynchrone de données de service.
Le JSONP demande sera faite lors du chargement initial de la page, et les résultats seront disponibles avant votre application démarre. De cette façon, vous n'aurez pas à le gonfler votre routage redondant résout.

Vous html ressemblerait à ceci:

<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>