AngularJS:表单的组件化

Question

我有两种形式在视觉上是90%相同的，和支持代码的形式是90%相同。因此，我在这两者之间有大约90%的重复代码，我想消除这一点。

在我的设计中，我有另外两个模型扩展的一个模型。表单(视图)只是这些模型的投影，它们的输入元素映射到每个模型的字段。

图示：

 ____________________________
|          Base Model        |
------------------------------
      |                |
      |                |
 _____________    _____________
| Sub Model A |  | Sub Model B |
---------------  ---------------
      |                |
      |*projected with*|
 _____________    _____________
| Form A      |  | Form B      |
---------------  ---------------

正如我前面提到的，模型A和B大约有90%相同(这就是为什么它们从基本模型开始继承的原因)。模型实现了save()、load()和destroy()方法，这些方法会自动与我的后端对话，以正确更新表示对象的持久化状态。

模型A和B各有一个控制器，实现修改模型上数据的方法。模型A有一个控制器，B模型有一个控制器--这些控制器就像模型一样，90%是相同的。这些控制器驱动表单的核心功能(例如设置下拉列表、获取附加数据、初始化单击处理程序等)。它们都实现了一个save()，它只是在相应的模型上调用save()方法。

重申一下，我的问题是90%的代码是重复的，因为这两个模型是90%相同的

简短示例：

假设我有一个输入元素组，它有两个输入：First Name和Last Name。还假设我希望检查我的数据库，以确保Last Name值已经存在。

模型A的save()方法如下：

• 检查数据库中的Last Name值，如果它不存在，则创建它
• 将名称保存为<First Name> <Last Name>

模式B的save()方法将：

• 检查数据库中的Last Name值，如果它不存在，则创建它
• 将名称保存为<Last Name>, <First Name>

现在，我已经在Last Name的查找或创建中复制了代码。随着更大、更复杂的表单字段的出现，这种代码复制就会失控。这甚至不考虑控制器，控制器也有重复的代码，这些代码可以做一些事情，比如为Last Name输入设置一个自动完成的提前输入框。

还有多种类型的重叠：

1. 在上述情况下，模型是相同的字段名，但可以以不同的格式和处理方式进行处理。
2. 其中一个模型具有另一个模型没有的字段。
3. 其中，两个模型具有相同的字段，并以相同的方式处理。

我最初的尝试是为表单的每个组件创建一个视图和控制器，结果失败了。我有两个主要视图(每个模型一个)，它们使用ng-include来包含每个表单组件。ng-include将指定实现save()和load()的控制器，父控制器将调用这些控制器。

示例：

<ng-include
  src="'app/forms/name.htm'"   <--- view HTML for the name component
  ng-controller="FormNameController"   <--- controller for the name component
></ng-include>

我的想法是让每个组件控制器实现：

• 一个save()方法，它知道如何持久化它所知道的信息
• 一个load()方法，它知道如何加载它需要知道的信息

然后我将使用整个页面的控制器来调用所有组件控制器的save()和load()方法。

使用这种方法我有两个主要问题(在许多小问题中)：

1. 我想不出一种让父控制器自动意识到组件控制器存在的优雅方法。对于broadcast、emit和on，似乎有一些奇怪的方法，但这似乎很麻烦(因为我还需要组件控制器上的save()、load()方法来返回承诺。
2. 让(许多)组件控制器自己保存/加载数据，然后让它们更新主控制器所支持的模型是很麻烦的。

由于我使用的是一个框架(AngularJS)，我会假设有某种“角度”的方法可以有效地做到这一点。我四处寻找一个很好的方法来做这件事很长时间，但什么也找不到。

任何帮助，投入，或推动正确的方向将是非常感谢的。我不确定是在这里还是在programmers.stackexchange.com上发布这篇文章；希望这是正确的地方。

Answer 1

这样做的角度是使用服务。您可以将大部分控制器逻辑分解到服务中，以保持控制器整洁并保持代码可重用性。

例如，不要过多地假设您的实现。

app.factory('baseService', [function(){
  var base = {};
  base.save = function(data){
    //persist data      
  };    
  base.findOrCreate = function(value){
    //...
  }
  return base;
}]);

app.factory('aService', ['baseService', function(baseService){
  var a = {};
  a.save = function(aModel){
    baseService.findOrCreate(aModel.lastName);
    //do something
    baseService.save(aModel);
  };
  return a;
}]);

app.controller('aController', ['$scope', 'aService', function($scope, aService){
  //...
  $scope.save() = function(){
    //...
    aService.save($scope.aModel);
  };
}]);