angular 1.5 中的组件和指令答案

【问题标题】：Components and directives in angular 1.5angular 1.5 中的组件和指令
【发布时间】：2016-05-16 14:43:58
【问题描述】：

Angular 1.5 的重大功能变化都围绕着components 的支持。

component('myComponent', {
  template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>',
  bindings: { firstName: '<', lastName: '<' },
  controller: function() {
    this.getFullName = function() {
      return this.firstName + ' ' + this.lastName;
    };
  }
});

虽然这一切都很好，但我不确定这与指令有何不同。与传统的自定义指令相比，使用components 有什么好处？ Angular 1.5 和 Angular 2 中的组件是否相同？

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

.component 不会像@rek Żelechowski 所说的那样替换 .directive。所以..

你可以用 .component() 做任何你不能用 .directive() 做的事情。它旨在简化我们创建“组件”的方式——这大致意味着 UI 指令。

什么时候可以/应该使用它？

显然，在某些情况下您不能/不应该使用它：

如果您需要链接功能（尽管您很少需要）
如果您想要一个无模板指令，例如没有模板或单独作用域的 ng-click

对于所有其他指令，这应该有效。而且因为它节省了样板文件并且不易出错，所以使用起来更好。

尽管有很多新的好东西，.component() 不能完全取代 .directive()。

【讨论】：

【解决方案2】：

.component 现在是编写代码的首选方式，因为它有利于良好的实践并让开发人员能够编写像 angular 2 中的代码（类似于 Web 组件）。基本上，当您使用component 编写代码时，升级到 Angular 2 会更容易。功能几乎保持不变。您应该尽可能使用.component总是。

更改（摘录）

组件是使用对象而不是函数声明的
使用binding 属性简化了隔离范围
组件始终具有隔离范围
一些不好的做法是不可能的
更简单、更易于理解的配置
生命周期钩子：（$onInit()，$onChanges(changesObj)，$doCheck()，$onDestroy()，$postLink()）

很棒的文章在这里： https://toddmotto.com/exploring-the-angular-1-5-component-method

何时不使用组件（来自文档）：

用于需要在编译和预链接函数中执行操作的指令，因为它们不可用

当您需要优先级、终端、多元素等高级指令定义选项时

当您想要一个由属性或 CSS 类而不是元素触发的指令时。

我相信，您能找到的最佳描述是官方指南：https://docs.angularjs.org/guide/component。它涵盖了所有更改、更改原因，并让您深入了解组件。

编辑 01-2020：

至少一年后我不再处理 ng1 代码了

在撰写回复时（01-2017），他们将在大多数情况下替换指令的印象是正确的。我从 06-2017 的答案中删除了“替换”一词，因为它在那个时间点确实具有误导性。但是，从 1.5 开始，您仍然应该尽可能选择组件而不是指令。

实际上，您应该根本不喜欢使用 AngularJS。它现在在 LTS 中，基本上，只会修复错误。没有新功能。此外，LTS 将于 2021 年 1 月 7 日结束。 https://docs.angularjs.org/misc/version-support-status#long-term-support

PS。使用组件而不是指令使代码在将来更容易移植到 ngx。

【讨论】：

模板可能是之前的函数。
抱歉，Arek，由于提供的错误信息，我将不得不对此投反对票。它给人的印象是指令不再有用或不再使用，这是不正确的，我发现它们对于为字段提供验证、过滤和格式化非常方便。这是一个非常重要的概念要记住。并且模板可以在指令中起作用，即使在 1.4 中也是如此。所以不确定你在说什么它们可以“现在”成为函数code.angularjs.org/1.4.14/docs/guide/directive

【解决方案3】：

指令不会被替换，它们只是由于许多不同的原因而发生了变化，在这里可能有点太多了。角度文档很好地解释了它们，因此您可以开始查看那里的文档：

https://docs.angularjs.org/guide/component

为了更好地了解指令和组件之间的区别，我发现最好参考 Angular 2.0 文档。 Angular 1.5 为我们提供了通向 2.0 的桥梁，而 1.4 和之前的版本没有。一个较大的变化是移除 $scope，另一个是提供组件作为构建事物的一种方式（这在 Angular 2.0 中被广泛使用）。

总而言之，变化的关键在于它为 1.X 世界迁移到 2.X 世界做好了准备。在那个世界里，有组件（本质上是元素级指令）、结构指令和属性指令。请参阅以下链接以帮助理解每个链接（以及上面提供的链接）。

http://learnangular2.com/components/

https://angular.io/docs/ts/latest/guide/structural-directives.html

https://angular.io/docs/ts/latest/guide/attribute-directives.html

【讨论】：