Comment initialiser les services AngularJS avec des données asynchrones ?

AngularJS : initialisation du service avec des données asynchrones

L'injection initiale de dépendances peut poser des défis lorsqu'il s'agit de sources de données asynchrones. Pour résoudre ce problème, AngularJS propose plusieurs approches pour intégrer des opérations asynchrones dans les services.

1. En utilisant $routeProvider.when('/path',{ solve:{...}

Cette méthode expose une promesse au sein du service, rendant l'approche de la promesse plus propre. La propriété solve dans la configuration de la route garantit que les dépendances sont résolues avant que le contrôleur ne soit instancié.

// Service
app.service('MyService', function($http) {
  var myData = null;
  return {
    promise: $http.get('data.json'),
    ...
  }
);

// Route Config
app.config(function($routeProvider){
  $routeProvider
    .when('/', {
      ...
      resolve: {
        MyServiceData: ['MyService', function(MyService) {
          return MyService.promise;
        }]
      }
    })
  });

// Controller
app.controller('MainCtrl', function($scope, MyService) {
  $scope.data = MyService.doStuff();
  // ...
});

2. Intercepteurs

Les intercepteurs HTTP vous permettent de vous connecter au processus de requête/réponse HTTP et d'effectuer des opérations asynchrones avant ou après chaque requête. Vous pouvez l'utiliser pour initialiser votre service une fois la réponse disponible.

// Interceptor
app.factory('MyInterceptor', function ($q, $rootScope) {
  var serviceData = null;

  return {
    response: function(response) {
      if (response.config.url === 'data.json') {
        serviceData = response.data;
        $rootScope.$broadcast('serviceDataReady', serviceData);
      }
      return response;
   }
});

// Apply interceptor
app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('MyInterceptor');
}]);

// Service
app.service('MyService', function($rootScope) {
  $rootScope.$on('serviceDataReady', function(event, data) {
    myData = data;
  });
  
  // ...
});

3. Utiliser des promesses et $q

Les promesses peuvent être utilisées pour représenter opérations asynchrones et résoudre les dépendances une fois qu'elles sont disponibles. Le service $q fournit des méthodes pour créer et manipuler des promesses.

app.service('MyService', function($http, $q) {
  var deferred = $q.defer();

  $http.get('data.json').then(function(response) {
    deferred.resolve(response);
  });

  // ...
  return {
    promise: deferred.promise,
    // ...
  };
});

En tirant parti de ces techniques, vous pouvez initialiser efficacement les services avec des données asynchrones dans AngularJS, garantissant ainsi que les dépendances sont correctement résolus avant l'instanciation du contrôleur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!