use a shared controller to handle common html behaviours

Question

I'm a newbie on angularjs so I have a question for you. In my "standard html template" I have some html for the shopping cart summary, this html is on all the pages (like a popup to manage the cart quickly). So I was thinking to use a shared contoller to handle the common html pieces, something like:

app.controller ('SharedCtrl', function ($ brooms, cartService) {
    ...
    $ scope.cart = myBagService.get(); // get items from local store
    $scope.removeCartItem = function(key){
        myBagService.remove(key){..}; //remove stored item
        myBagService.add(item){..}; //store item
        $scope.cart = myBag.get(); //update binding items
    }
    ...
}

Is this a correct way to accomplish this task? if yes, how I can call the above methods from other controllers ? for example on the product detail page I have to call the add method.

We don't care if you are a newbie, and we already know you have a question. So no need to include that first sentence at all please — musefan, Aug 03 '15 at 11:10
Have you looked at using `driectives`? - https://docs.angularjs.org/guide/directive — Tjaart van der Walt, Aug 03 '15 at 11:12
The easiest way to define common code in angular is through Services. — Nagesh Sanika, Aug 03 '15 at 11:15

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

There are many ways to do it. Hope this will help to find the right method.

http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.html

Angularjs sharing methods between controllers

Also you can read this: https://docs.angularjs.org/guide/controller

edited May 23 '17 at 12:06

Community

1
1

answered Aug 03 '15 at 11:13

andrey

1,867
3
21
34

score 1 · Accepted Answer · answered Aug 03 '15 at 11:34

Yes you can easily share functions/common code by using angular services, but I think sharing the functions/common code is only half your problem, as you noted you need to share "common html pieces", thus why not use a directive:

(function () {
   'use strict';
    app.directive('shoppingCart', function () {
        return {
            restrict: 'E',
            controller: 'ShoppingCartController as vm',            
            template: function (element, attrs) {
            return '<div data-ng-click="vm.onViewShpooingCart()">Click here to view shopping cart</div>';
            }
        };
    });
})();

The controller to the shopping-cart directive:

(function () {
   'use strict';
       app.controller('ShoppingCartController', ['$scope', 'sharedService'], function ($scope, sharedService) {
           var self = this;
           self.onViewShpooingCart = function () {
           sharedService.fetchShppingCart();
         };
    });
})();

The shared service:

(function () {
   'use strict';
    app.services.factory('sharedService', [function () {
        var service = {
           fetchShppingCart: fetchShppingCart
        };

        return service;

        function fetchShppingCart() {
            //code to fetch shopping cart
        }
    }]);
})();

By doing this you don't end up repeating your cart html on each page, its all rendered via the directive, you can then use the directive like below:

<shopping-cart></shopping-cart>

use a shared controller to handle common html behaviours

2 Answers2