Question

我正在学习AngularJS，这真的很酷，但有时我会遇到一些架构问题。让我用一个例子来解释。

假设我们有一个允许用户创建帐单的应用。每张账单本身都有一些线条。每条线代表某种商品或服务，并具有如下属性标题，数量，成本和总和。所以在JSON中它可以表示如下：

"goods": [
    {
        "title": "Apple",
        "quantity": 3,
        "cost": 5.00,
        "sum": 15.00 // 5.00 × 3
    },
    {...}
]

账单的总金额通常是所有项目金额的总和。因此，如果我们有3个价值15.00美元的苹果和5个价值10.00美元的香蕉，那么我们的账单总额为25美元。

问题是什么是计算每个范围内金额的更好方法。一种方法是只有一个范围（对于账单），使用一些定义的方法来计算每个步骤中的总和。例如（伪代码）：

$scope.getTotalInItem = function(item) {
    return item.quantity * item.cost
}

$scope.getTotal = function() {
    amount = 0
    for item in $scope.items
    amount += $scope.getTotalInItem(item)
        return amount
}

我不喜欢这种方法，因为它将所有逻辑混合在一个地方。但是允许简单地从服务器获取数据并在没有准备的情况下使用它。

另一种方法是为每个计算级别创建一个类。像这样：

function Good(title, quantity, cost){
    this.total = function(){
        return this.quantity * this.cost
    }
}

function Bill(goods){
    this.goods = goods
    this.total = function(){
        amount = 0
        for good in this.goods
            amount += good.total()
        return amount
    }
}

我更喜欢这种方法，因为它具有逻辑级别分离。但我不知道如何更好地使用它与Angular。这种方法不允许我简单地从服务器获取JSON并更改它。

以下是这两种方法的演示：http://plnkr.co/edit/7t56sIUY83Rnowe8Zb3z?p=preview

我想我会在每次数据提取之后和每次数据推送之前准备我的模型。所以我需要一些辅助函数，如toJSON（）和fromJSON（）。使用Angular进行此类操作的最佳做法是什么？

Answer 1

您需要考虑的一件事是脏检查。最近我编了发票，发现了一些令人讨厌的东西。我有产品表，我使用value="{{ IVACalc().toFixed(2) }}"这个问题是每次用户修改输入时，在页面的任何地方（假设你只有一个主控制器），你将要执行这个计算再次。

按键时，有2个事件：onkeydown和onkeyup。每个键2个计算，你需要处理它。在这种情况下，为发票行创建特定控制器并使用服务共享数据是一个很好的决定。

这是我自己的代码我的angularjs项目。

我创建了一个init.js文件，我在其中声明了我的应用程序，依赖项，服务和一些帮助程序。我在服务中包装外部插件（例如：toastr），一些程序员可能会创建一个指令。

    var ViewModule = angular.module('ViewModule',[]);

    ViewModule.factory('ViewService', function($rootScope){
      var sharedService = {};
      sharedService.message = '';


      sharedService.init = function(message){
        switch (message){
          case 'productPickView':
            $rootScope.$broadcast('productPickInit');
          break;
          case 'loginView':
            $rootScope.$broadcast('loginViewInit');
          break;
          default :
        }
      };

   //using toastr 
   var NotificationCenterModule = angular.module('NotificationCenterModule', []);
   NotificationCenterModule.factory('NotificationCenter', function($rootScope){
   var sharedService = {};
   ...

   var app = angular.module('TouchApp',['ViewModule',
                                     'ConfirmationModule',
                                     'ui.bootstrap',
                                     'ngGrid',
                                     'appConfig',

对于控制器是

app.controller("productPickCtrl", function($scope, $http, ViewService, 
ConfirmationService, appConfig, NotificationCenter){

我希望我的代码易于阅读，这就是我编码风格的基础。您的队友更容易理解并让您的生活更轻松。不要忘记使用javadoc或类似的东西。

使用AngularJS进行逻辑分离的最佳方法是什么？

1 个答案: