AngularJS コントローラー間でデータを効率的に共有するにはどうすればよいですか?

AngularJS コントローラー間でのデータの共有

コントローラー間でのデータの受け渡しは、AngularJS アプリケーションの一般的なタスクです。このニーズに対応するには、サービス、ブロードキャスト、$rootScope サービスなどの複数のオプションがあります。

サービスの使用

サービスは、集中管理する方法を提供します。複数のコンポーネント間でデータを状態および共有します。サービスを作成するには、アプリ モジュールの Factory() メソッドを呼び出し、その中にサービス ロジックを定義します。たとえば、次のような製品サービスを作成できます。

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

サービスの挿入とデータの共有

ProductCtrl と CartCtrl の両方で、productService を次のように挿入します。依存性。次に、ProductCtrl で、選択した製品をサービスの製品リストに追加するアクションを定義します。

app.controller('ProductCtrl', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

CartCtrl で、サービスから製品を取得します。

app.controller('CartCtrl', function($scope, productService) {
    $scope.products = productService.getProducts();
});

Thisこのアプローチにより、データ処理をコントローラーから分離できるため、アプリケーションのさまざまな部分でのデータの管理と再利用が容易になります。

以上がAngularJS コントローラー間でデータを効率的に共有するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。