如何在 AngularJS 中干净地构建组件/结构逻辑答案

【问题标题】：How to build components cleanly/structure logic in AngularJS如何在 AngularJS 中干净地构建组件/结构逻辑
【发布时间】：2014-01-10 06:20:12
【问题描述】：

我的应用中有一个购物车组件。它存在于控制器中。控制器在部分实例化，按需加载到页面（菜单栏中的图标）。

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>

您将如何根据最佳实践构建/设计此组件？ 将“添加到购物车”逻辑添加到指令中？在上面提到的部分之外定义一个服务并从部分的指令和控制器中访问它？

期待阅读您对此的看法！

【问题讨论】：

标签： javascript oop angularjs components angularjs-directive

【解决方案1】：

在指令和控制器之间添加购物车逻辑的最佳做法是使用服务并将其注入到控制器和指令中。以下是如何从两者访问服务的示例：

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

【讨论】：

【解决方案2】：

参考 AngularJS 文档，状态应该通过服务共享。 http://docs.angularjs.org/guide/controller#using-controllers-correctly

可以在指令或控制器中操作状态。您可以选择，但我建议您仅在确实需要 DOM 交互时才使用指令。如果不是这种情况，只需使用控制器即可。

当你加载你的 Partial 时，处理状态的服务必须被注入到控制器/指令中。

【讨论】：

【解决方案3】：

我已经回答了一个类似的问题。这个问题有 2 个部分。请参考第二部分，你会有答案！

Spring MVC or Rest Services with spring + AngularJS

享受 Angular 的乐趣！！

【讨论】：

我的问题更像是“在哪里放置逻辑以从应用程序的不同区域访问它？”而不是关于目录/文件结构。