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

이것은 접근 방식을 사용하면 데이터 처리를 컨트롤러와 별도로 유지할 수 있으므로 애플리케이션의 다양한 부분에서 데이터를 더 쉽게 관리하고 재사용할 수 있습니다.

위 내용은 AngularJS 컨트롤러 간에 데이터를 효율적으로 공유하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!