AngularJS:“深层”应用程序与“广泛”应用程序? AKA许多组件/指令与许多控制器相比

时间:2013-09-04 14:44:32

标签: angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

哪个更好:将应用程序拆分为许多不同的指令/组件或分成许多不同的控制器?

将应用程序拆分为许多不同的指令/组件会创建“深层”应用程序。 “深度”应用程序中有更多文件,但本质上更模块化。优点:在团队环境中工作,两个人的努力相互碰撞的可能性较小(导致痛苦的合并)。在项目之间共享代码很容易。缺点:如果您想查看问题,您必须遵循一系列代码才能到达您需要的位置。示例:无线电指令存在问题。你必须先去模板,弄清楚无线电指令可能在哪个组件,在那里查看指令定义,然后最后转到指令文件。

极端示例:想象一个包含10个问题的表单。每个问题都是一个指令。表单本身就是一个组件。表单被加载到一个可视部分,该部分是一个组件。组成页面的各个部分将加载到模板中。如果您是该项目的新手,并且表单问题7存在问题,您必须从模板中“挖掘”以找到该指令。

将应用程序拆分为许多不同的控制器会创建“wide”应用程序。 “宽”应用程序中的文件较少,但每个控制器负责模板的一个方面。优点:您可以轻松查看模板并查找定义的所有内容。每个责任区域由控制器接管。缺点:在团队环境中,多个人将在同一个文件中工作。与项目共享代码更为复杂。

极端示例:想象一个包含10个问题的表单。每个问题都有一个控制器(用于验证)。表单有一个控制器(检查所有问题何时有效)。表单位于一个具有控制器的部分中。如果您是项目新手,并且表单问题7出现问题,则必须找到控制的控制器。

那么您认为哪个更好?为什么? “深度”应用程序还是“广泛”应用程序?

词汇(据我所知,请随时纠正我)

  • 指令:由HTML模板和javascript指令文件组成。您将DOM操作逻辑放在这里,或任何其他复杂的逻辑。示例:下拉列表,日期选择器,jQuery UI中的任何内容。

  • 组件:一段可重用的代码,用于抽象共性。你可以直观地做到这一点;想象一下漫画书页面。有很多框架由排水沟隔开。每一帧都是一个组件,意在保存一件艺术品。

  • 模板:汇集所有部分,组件和指令。模板将以角度呈现在视图中。

  • 部分:一段静态HTML,旨在将其拉入模板。

  • 查看:模板的编译版本。在角度编译之前,视图不存在。

1 个答案:

答案 0 :(得分:1)

我投票支持“深层”变体。代码重用是一件非常重要的事情。

  

你必须先去模板,找出哪个组件   无线电指令可能在

为什么呢?只需查看指令的名称并打开相应的文件即可。当您可以通过指令或控制器或服务的名称找到任何必要的文件时,创建可预测的文件夹结构。

例如,您的指令名为acme-radio,其中acme是您的供应商前缀,因此文件应位于文件夹vendor/acme/directives/radio.js中。
其他指令仅适用于某些应用并命名为acme-appName-radio - 文件应位于appName/directives/radio.js 这只是一个粗略的例子。