AngularJS sharing data stored in controller between different modules

Question

I'm completely new to AngularJS (version 1.6.9) and I've been trying to figure this out for a couple days now.

So, what I've been trying to achieve is a cart website in which you pick what you wish to buy, you click on checkout and you get to the checkout page where you can see what's in your cart and the total price. The problem is that when the user clicks on checkout and the checkout page loads, the products they picked and the total price of them should be presented. I have all this information stored in my cart module's controller but the question is how I can access that information from my checkout module's controller. I have tried creating a service, store the information there and then inject it to checkout controller but I can't properly store the information from my controller to the service.

'use strict';

//define CART module
angular.module('cart', ['ngRoute'])
//configuration for CART module
.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/cart', {
    templateUrl: '/public/cart/cart.html',
    controller: 'cartCtrl as vm'
  });
}])
.controller('cartCtrl', function(){
  this.chocolate =[
    {
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      pack: '10',
      price: 10,
      checkState: false
    }
  ]
  this.honey = [
    {
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      pack: '10',
      price: 10,
      checkState: false
    }
  ]
  this.candy = [
    {
      pack: '3',
      price: 5,
      checkState: false
    },
    {
      pack: '5',
      price: 7,
      checkState: false
    },
    {
      pack: '10',
      price: 10,
      checkState: false
    }
  ]

  this.totalCost = 0;
  this.calculateTotal = function (checked, price) {
    if (checked) {
      this.totalCost += price;
    } else {
      this.totalCost -= price;
    }
  }

});

'use strict';

angular.module('checkout', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/checkout', {
    templateUrl: 'public/checkout/checkout.html',
    controller: 'checkoutCtrl'
  });
}])
.controller('checkoutCtrl', ['$scope', function($scope){

}]);

Show us the code for the service that is not properly storing the data and how the controller is accessing that data. We can't help you with a problem with your code if you don't show us any of the buggy code. — georgeawg
– georgeawg, Commented Oct 6, 2018 at 16:38

Sajeetharan · Accepted Answer · 2018-10-06 15:43:49Z

1

First of all you should not inject ngRoute in both the modules, just have it in the main module.

angular.module('checkout', ['ngRoute']) //remove ngRoute from here

Second, just inject the second module to the first one as a dependency, add checkout here

angular.module('cart', ['ngRoute','checkout'])

answered Oct 6, 2018 at 15:43

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fotis Papadamis Over a year ago

Thanks for the tip about removing ngRoute, I can even see my pages loading faster than before. Now that I have injected checkout module in cart module do I just use cart's controller in checkout module?

Collectives™ on Stack Overflow

AngularJS sharing data stored in controller between different modules

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related