How Can I Efficiently Share Data Between AngularJS Controllers?

Sharing Data Between AngularJS Controllers

Passing data between controllers is a common task in AngularJS applications. To address this need, you have multiple options, such as services, broadcasts, and the $rootScope service.

Using a Service

Services provide a centralized way to manage state and share data between multiple components. To create a service, call the factory() method of the app module and define your service logic inside it. For instance, you could create a product service like this:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Injecting the Service and Sharing Data

In both your ProductCtrl and CartCtrl, inject the productService as a dependency. Then, in ProductCtrl, define an action that adds the selected product to the product list in the service:

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

In CartCtrl, retrieve the products from the service:

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

This approach allows you to keep the data handling separate from the controllers, making it easier to manage and reuse the data in different parts of your application.

The above is the detailed content of How Can I Efficiently Share Data Between AngularJS Controllers?. For more information, please follow other related articles on the PHP Chinese website!