Только лишь для одного виджета корзины Ангулар подключать конечно же не стоит :)
На Ангуларе это делается следующим образом — есть директива корзины (виджет) и есть сервис корзины. Добавление товаров в корзину идет через сервис, а директива слушает изменения сервиса и выводит у себя обновленную инфу.
Вот Директива:
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>
