非同期データを使用して AngularJS サービスを初期化する方法は?

AngularJS: 非同期データを使用したサービスの初期化

非同期データ ソースを扱う場合、最初の依存関係注入で問題が発生する可能性があります。この問題に対処するために、AngularJS は非同期操作をサービスに統合するためのいくつかのアプローチを提供しています。

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

このメソッドを使用すると、サービス内の Promise が公開され、Promise アプローチがよりクリーンになります。ルート設定内のsolveプロパティにより、次のことが保証されます。依存関係はコントローラーがインスタンス化される前に解決されること。

// 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. $http を使用する。インターセプター

HTTP インターセプターを使用すると、HTTP リクエスト/レスポンス プロセスにフックし、各リクエストの前後に非同期操作を実行できます。レスポンスが利用可能になったら、これを使用してサービスを初期化できます。

// 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. Promise と$q

Promise を利用して、非同期操作を表し、依存関係が利用可能になったら解決することができます。$q サービスは、Promise を作成および操作するためのメソッドを提供します。

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

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

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

を活用することで。これらのテクニックを使用すると、AngularJS の非同期データを使用してサービスを効果的に初期化し、コントローラーの前に依存関係が適切に解決されるようにすることができます。インスタンス化。

以上が非同期データを使用して AngularJS サービスを初期化する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。