Javascript 应每；“组件”；在一个页面上有一个angularJS指令

在创建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>

-标题
-博客元-博客作者
-这是一篇废话

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

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

包括有点不同。我认为它相当于eval，或C's#include。你确实会有一点分离，但所有的东西都有相同的范围，很容易有相互交织的部分，但除非经过检查，否则看起来不像

---

至于雅格尼，我认为这是一个不同的问题。雅格尼正在谈论添加功能。我谈论的更多的是代码结构，而不是添加任何附加内容。我看到了相同的代码，但组织方式有点不同。当然，指令的编写需要一些工作，但与类一样，它们也可以很轻，并且很容易创建（就所需的思想量而言）。

除非有可重用行为的元素，否则我将实现您提供的部分模板（ng include+ng模板）和控制器示例

因此，我的登录模板将成为

<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'>

我认为使用上述方法可以很容易地实现登录和blogpost。对于

事件

我不确定这取决于封装了多少行为

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

• 包装jquery控件以使其在Angular中可用
• 做DOM操作
• 添加现有html元素的额外行为。例如，生成

  html输入

  元素以支持自定义验证（UI+行为）
• 当然，还要定义新的html元素，这些元素具有很高的可用性

---

指令是angularjs最令人兴奋的功能之一，有助于减少编写的代码量。对于您可以编写指令的每一个可重用代码块。@vipulsharma，我认为OP非常熟悉什么和什么时候，并且对为什么很感兴趣。关于DRY原则的观点很好，但它是如何分离关注点的？另外，你们应该警惕雅格尼（你们不会使用它）。@EliranMalka说得好。我已经更新了我的答案，以解决关注点分离问题和YAGNI问题。