ホームページ >ウェブフロントエンド >jsチュートリアル >サービスを使用してAngularJSのコントローラー間でデータを共有するにはどうすればよいですか?

サービスを使用してAngularJSのコントローラー間でデータを共有するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-06 12:58:16303ブラウズ

How to Share Data Between Controllers in AngularJS Using a Service?

AngularJS でのコントローラー間データ転送

AngularJS の領域では、コントローラー間でデータを交換する必要性は、高度なアプリケーションを構築するために最も重要です。サービスを使用してこれを実現する方法を見てみましょう。

選択した製品をショッピング カートに追加するシナリオでは、仲介としてサービスを利用できます。

ProductService の作成Factory

AngularJS のファクトリーを使用してサービス ファクトリを初期化しますfunction:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };
});

コントローラーへのサービスの挿入

ProductController と CartController の両方に productService を含めます:

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

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

製品をクリックするとProductController で、productService の addProduct 関数を呼び出して、productList を設定します。 CartController は、サービスに保存されている最新の productList に常にアクセスできます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。