Как работать с .component() Angular.js?

Question

[Valeriy Donika]

Делаю интернет магазин. Бекенд на Laravel 5.2 +
LaravelShoppingcart
Решил попробовать делать всё через .component()
Есть два вопроса:
1) Как организовать cart. Я понимаю что это будет .factory()
В компоненте продукт-лист и продукт-дитейл будет кнопка add to cart. Данные будут идти на бекенд + сохранятся в ангуляр-куках (как я думаю). Но допустим как в большинстве магазинов в header будет мини-корзина. Которая должна обновляться. И при смене роута всегда показывать кол-во товаров. А так же будет роут аля /checkout/ где будет список товаров в корзине и т.д.
И так вопрос, что для этого нужно? Один сервис который будет инжектиться в компоненты продукта и в отдельные компоненты cart-component и checkout-component ?
Подскажите правильно ли я мыслю и что я упустил.
2) Можно ли использовать directive внутри компонента? К примеру пагинация. Сейчас у меня это так

'use strict';

angular.
module('productList').
component('productList', {
    templateUrl: 'views/app/product-list/product-list.template.html',
    controller: ['Product',
        function ProductsListController(Product) {
            var self = this;
            self.products = [];
            self.getPosts = function(pageNumber){
                if(pageNumber===undefined){
                    pageNumber = '1';
                }
                Product.get({page: pageNumber},function(response){
                    self.products     = response.data;
                    self.totalPages   = response.last_page;
                    self.currentPage  = response.current_page;

                    // Pagination Range
                    var pages = [];

                    for(var i=1;i<=response.last_page;i++) {
                        pages.push(i);
                    }

                    self.range = pages;

                });

            };
            this.getPosts();
            this.orderProp = 'price';
        }
    ]
});

И во вьюхе ng-include такое

<ul class="pagination">
    <li ng-show="$ctrl.currentPage != 1"><a ng-click="$ctrl.getPosts(1)">&laquo;</a></li>
    <li ng-show="$ctrl.currentPage != 1"><a ng-click="$ctrl.getPosts($ctrl.currentPage-1)">&lsaquo; Prev</a></li>
    <li ng-repeat="i in range" ng-class="{active : currentPage == i}">
        <a ng-click="$ctrl.getPosts(i)">{{i}}</a>
    </li>
    <li ng-show="$ctrl.currentPage != $ctrl.totalPages"><a ng-click="$ctrl.getPosts($ctrl.currentPage+1)">Next &rsaquo;</a></li>
    <li ng-show="$ctrl.currentPage != $ctrl.totalPages"><a ng-click="$ctrl.getPosts($ctrl.totalPages)">&raquo;</a></li>
</ul>

Но подобное будет во многих местах. В категории, в новостях и т.д. Хотелось бы просто подключить внутри темлейта компонента что-то вроде <

pagination-view data=$ctrl.products></pagination-view>

Но по клику в директиве чтоб компонента функция юзалась.
Спасибо.