如何在AngularJS中乾淨地構建組件/結構邏輯

我在我的應用程序中有購物車組件。它住在一個控制器中。控制器被實例化爲按需加載到頁面的部分（菜單欄中的圖標）。現在如何在AngularJS中乾淨地構建組件/結構邏輯

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

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

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

我具有與本部分/控制器之外提供的功能，即使沒有被加載到頁面。我爲此使用了指令，所以例如我有一個指令來添加項目並顯示購物車中的項目數量。

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

你會怎樣的結構/設計有關最佳實踐這個組件？將「add-to-cart」-logic添加到指令中？在上述部分之外定義一個服務，並從部分的指令和控制器訪問它。

期待閱讀您的想法！

來源

2013-12-21 kernfrucht

在指令和控制器之間添加購物車邏輯的最佳實踐是使用服務並將其注入到控制器和指令中。下面是關於如何訪問來自一個服務的例子：

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); 
     } 
    });

這裏是一個鏈接：http://jsbin.com/IKadoYAK/4/edit

來源

2013-12-21 17:28:08