如何在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