Question

创建angularJS应用程序时，最好将几乎所有“组件”创建到指令中吗？当我说组件时，我指的是执行功能的任何HTML元素分组。示例：

登录：

 - <input type="text" name="username" />
 - <input type="password" name="password" />
 - <button>Login</button>

事件：

 - <h3>Title</h3>
 - <input type="date" name="eventStart" />
 - <p>This is an event description</p>

博客文章：

 - <h3>Title</h3>
 - <small>Blog meta - Blog Author</small>
 - <p>This is a post blah blah blah</p>

Answer 1

指令允许您重用代码。我当然会将重复使用的所有内容都放入指令中。为避免重复自己，您应该使用指令。我甚至会说，即使你没有重复自己，即代码只在一个地方，你也应该把它变成一个指令。

仅在一个地方使用的指令不会减少代码，但它会分开关注点。我认为指令类似于类。类范围不是一大块代码，而是强制该类是独立的块。同样，创建具有自己范围的指令使它们成为独立的块，以有限的方式与周围环境相互作用。

ngInclude有点不同。我认为它相当于eval或C的#include。你确实得到了一点点分离，但是所有东西都有相同的范围，而且很容易让部件交织在一起，但除非经过检查，否则它们看起来不一样。

至于YAGNI，我认为这是一个不同的问题。 YAGNI正在谈论添加功能。我更多地谈论代码结构而不是添加任何额外的东西。我看到相同的代码，但组织有点不同。肯定的指令需要花一些时间来编写，但是像类一样，它们也可以很轻，并且很容易创建（根据所需的思考量）。

Answer 2

除非存在可重复使用行为的元素，否则我将实现您提供的部分模板（ng-include + ng-template）和控制器的样本。

所以我的登录模板将成为

<script type="text/ng-template" class="template" id="login">
 <div ng-controller='LoginController'>
   <input type="text" name="username" />
   <input type="password" name="password" />
   <button>Login</button>
 </div>
</script>

现在可以使用

在任何地方重复使用

<div ng-include='login'>

我认为使用上述方法可以轻松实现登录和博客。对于event，我不确定取决于封装了多少行为。

我发现指令有用的一些地方是

包装jquery控件以使其在Angular中可用。
做DOM操作。
添加额外行为现有的html元素。例如，使html input元素支持自定义验证（UI +行为）
当然还要定义具有高度可用性的新html元素。

页面上的每个“组件”都应该是angularJS中的指令

2 个答案: