How to build components cleanly/structure logic in AngularJS

Question

I have a shopping cart component in my app. It lives in a controller. The controller is instantiated in a partial which is loaded to the page on demand (icon in menu bar).

app.controller('CartCtrl', function($scope, $http, storage) {
    $scope.options = {
        freeShipmentFrom: 180,
        shipmentCosts: 6
        ...
    };

    $scope.init = (function(){ ... }());

    $scope.addItem = function(){ ... };
    ...
    // more methods
    ...
});

Now I have to provide functionality outside of this partial/controller, even if that is not loaded to the page. I use directives for that, so for example I have a directive for adding items and for displaying the number of items in cart.

<button add-to-cart="productId">Add to cart</button>

How would you structure/design this component concerning best practices? Adding the "add-to-cart"-logic to the directive? Define a service outside of the partial mentioned above and accessing it from the directive and the controller of the partial?

Looking forward to read your thoughts on that!

score 3 · Accepted Answer · answered Dec 21 '13 at 17:28

Best practices to add shopping cart logic between a directive and controller is to use a service and inject it into a controller and directive. Here is an example on how to access a service from both:

var module = angular.module('app', [])
.controller('CartCtrl', function($scope, cartService){
  $scope.cartName = "My Cart"; 
  $scope.productId = 123; 
  $scope.addItem = function(productId){
    cartService.addProductId(productId); 
  };
})         
.factory('cartService', function(){
  var products = []; 
  return {
    addProductId : function(productId){
      products.push(productId); 
    }
  };
})
.directive('addToCart', function(cartService){
  function link($scope, element, attrs){
    $scope.$watch('productId', function(value){
      if(value){
      cartService.addProductId(value);
      }
    });

Here is a link : http://jsbin.com/IKadoYAK/4/edit

score 1 · Answer 2 · answered Dec 21 '13 at 15:31

Referring to the AngularJS documentation, state should be shared via services. http://docs.angularjs.org/guide/controller#using-controllers-correctly

Manipulating the state could be done in directives or controllers. There you have the choice, but I recommend that you only use directives if there is really DOM interaction required. If this is not the case use simply the controller for that.

The service handling the state has to be injected into the controller/directive then, when you load your Partial.

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

I have answered a similar question. This question has 2 parts. Please refer to the second part and you will have your answer!

Spring MVC or Rest Services with spring + AngularJS

Have fun with Angular!!

edited May 23 '17 at 12:21

Community

1
1

answered Dec 21 '13 at 15:01

Abilash

6,089
6
25
30

My question is more meant like "where to put the logic to access it from different areas in the app?" than about directory/file structure. – kernfrucht Dec 21 '13 at 15:25

How to build components cleanly/structure logic in AngularJS

3 Answers3