AngularJS 1.5中组件和指令之间的主要区别是什么?

问题描述 投票:27回答:3

我发现很难理解组件和指令之间的真正区别。我现在明白组件是一个更容易的概念。

因此,考虑到这一点,有没有理由在使用AngularJS 1.5时继续使用指令?

也许我在这里错过了真实的上下文,但似乎组件提供了一个更简单的API。

那么我有什么理由继续使用指令呢?

Angular 2声明一切都是一个组件,所以努力从1.5迁移到2,那么只使用未来的组件是没有意义的吗?

在过去,我使用指令来创建,例如,自动查找文本框,没有理由我现在不应该在组件内执行此操作吗?然后我可以在我创建的其他组件中重用这个组件?

angularjs angular-directive
3个回答
33
投票

只是复制角度文档,因为他们以我认为最好的方式。

了解组件

在Angular中,Component是一种特殊的指令,它使用更简单的配置,适用于基于组件的应用程序结构。

这使得以类似于使用Web组件或使用Angular 2的应用程序架构风格的方式编写应用程序变得更加容易。

组件的优点:

  • 比plain指令更简单的配置
  • 促进理智的默认和最佳做法
  • 针对基于组件的架构进行了优化
  • 编写组件指令将使其更容易升级到Angular 2

何时不使用组件:

  • 对于依赖于DOM操作,添加事件侦听器等的指令,因为编译和链接函数不可用
  • 当你需要高级指令定义选项,如优先级,终端,多元素
  • 当你想要一个由属性或CSS类而不是元素触发的指令时

更多阅读:https://docs.angularjs.org/guide/component


0
投票

我将尝试使用本文(Angular 2: The Difference Between Components and Directives)启发的高级视角进行解释。它说Angular 2,但在AngularJs上下文中也很有用。

指令

在计算机科学中有“指令语用学”的概念。根据维基百科:

“在计算机编程中,指令编译指示(来自”实用“)是一种语言结构,它指定编译器(或汇编器或解释器)应如何处理其输入。指令不属于正确语言的一部分“

这与AngularJS文档给出的描述完全一致:

“在高级别,指令是DOM元素上的标记(例如属性,元素名称,注释或CSS类),它告诉AngularJS的HTML编译器($ compile)将指定的行为附加到该DOM元素(例如,通过事件侦听器) ),甚至改造DOM元素及其子元素。“

因此,基本上做的指令是向(Angular)编译器发出指令,以便改变DOM或其​​行为。

组件

AngularJS中的组件是一个特殊指令;他们试图模仿Web组件,正如AngularJS文档所述:

在AngularJS中,Component是一种特殊的指令,它使用更简单的配置,适用于基于组件的应用程序结构。

这使得以类似于使用Web组件或使用新的Angular应用程序体系结构的方式编写应用程序变得更加容易。

什么时候用?

就个人而言,我使用组件,除非有充分的理由不这样做。

其中一些原因在组件的AngularJS文档中给出:

  • 对于需要在编译和预链接函数中执行操作的指令,因为它们不可用
  • 当你需要高级指令定义选项,如优先级,终端,多元素
  • 当你想要一个由属性或CSS类而不是元素触发的指令时

另一种方式:

指令是我们可以将行为附加到DOM中的元素的机制。

组件是一种特定类型的指令,可以利用Web组件功能 - 在我们的应用程序中可用的封装,可重用元素。

可能的结论

一旦你理解一个组件是一个指令,我认为问题就不那么好了。这两个概念并没有试图解决同样的问题。组件是一个扩展,它允许使用指令来构建基于组件的Web应用程序。

走得更远

Todd Motto在这个小小的GIST中分享了他对这个主题的了解。

指令装饰DOM,它添加行为并扩展现有DOM。当你使用.component()时,你创建DOM,当你使用.directive()装饰DOM时,就是心态

© www.soinside.com 2019 - 2024. All rights reserved.