Pavel Zavrazhnov

Только лишь для одного виджета корзины Ангулар подключать конечно же не стоит :)

На Ангуларе это делается следующим образом — есть директива корзины (виджет) и есть сервис корзины. Добавление товаров в корзину идет через сервис, а директива слушает изменения сервиса и выводит у себя обновленную инфу.

Вот Директива:

angular.module('app').directive('shoppingCartWidget', function(shoppingCartService) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'shopping-cart.html',
        link: function(scope, element, attributes) {
            scope.items = [];

            // слушаем изменения в корзине
            scope.$watch(shoppingCartService.getItems, function(items) {
                scope.items = items;
            });
        }
    }
});

Вот сервис:

angular.module('app').directive('shoppingCartService', function(_) {
    var items = [];

    function add(itemData) {
        items.push(itemData);
    }

    function remove(itemID) {
        items = _.reject(items, {id: itemID});
    }

    function clear() {
        items = [];
    }

    function getItems() {
        return items;
    }

    return {
        add: add,
        remove: remove,
        clear: clear,
        getItems: getItems
    }
});

Вот контроллер:

angular.module('app').controller('myController', function(shoppingCartService) {

    // ну, тут будет не массив, а $resource, например

    $scope.items = [
        {
            id: 1,
            name: 'Клавиатура',
            price: 150
        },
        {
            id: 2,
            name: 'Кофе',
            price: 50
        }
    ];

    $scope.addToCart = addToCart;

    function addToCart(itemData) {
        shoppingCartService.add(itemData);
    }

});

Вот вьюха списка товаров:

<ul>
    <li ng-repeat="item in items">
        <span>{{item.name}}</span>
        <button ng-click="addToCart(item)">Добавить в корзину</button>
    </li>
</ul>