AngularJS中指令和组件之间的区别

介绍：
我们将通过简要了解这两个术语，它们的含义以及它们的行为特征，来构建指令和组件之间的区别，从而开始构建清晰而强大的AnglarJS代码。指令是随着Angular的发明而引入的，作为构建动态Web应用程序的结构框架。指令在操作DOM(即文档对象模型)并创建属于DOM的新自定义元素方面很受欢迎。随着技术的升级和Angular的更高版本(Angular 2和更高版本，因为Angular 2本身依赖于基于组件的结构)中的各种修改，现在开发人员对组件的使用表现出极大的兴趣。同样，组件被称为指令的简化版本。

基本定义：
指令是当AngularJs的HTML编译器($ compile)在DOM中找到它时调用的函数。它告诉将指定的行为附加到该DOM元素(例如，通过事件侦听器)，甚至转换DOM元素及其子元素。
组件只是指令的简化版本。更具体地说，可以将组件称为带有模板的特殊指令，它们主要用于基于组件的体系结构。
例子：

• 成分-
  句法：

  import {Component, View} from 'angular2/angular2';
  @Component ({........
              ........ })
  @View ({............
           ...........})

  import {Component, View} from 'angular2/angular2';
  @Component({
    selector: 'message'
  })
  @View({
    template: `
        
  Hello GeeksforGeeks
        
  This is an example of component
   `
  })
  class Message {
    constructor(public version: string) {}
  }
  

  输出：

  Hello GeeksforGeeks
  This is an example of component

• 指示-
  句法：

  import {Directive} from 'angular2/angular2';
  @Directive({........
              ........})

  import {Directive} from 'angular2/angular2';
    
  @Directive({
      selector: "[myDirective]",
      hostListeners: {
          'click': 'showMessage()'
      }
  })
  class Message {
    
      constructor() {}
    
      showMessage() { 
      console.log('This is an example of directive'); }
  }
    
  GeeksforGeeks
  

  输出：

  解释：
  在以上示例中，我们已经看到了如何编写简单的Angular代码以使用Component和Directive来打印一些消息。在组件的示例中，我们已经看到必须编写视图属性，而对于指令，我们不需要使用视图或模板。现在让我们讨论这两者之间的主要区别是什么。
  差异：

  1. 组件始终是元素(’E’)，其中指令可以是属性，元素名称，注释或CSS类(’E’，’A’，’C’，’M’)。模板是必填属性，并且在Component中始终是必需的，但是Directive并不总是需要它们。
  2. 组件用于将应用程序分解为较小的组件。但是Directive用于设计可重用的组件，它更注重行为。这就是为什么在Angular的更高版本中广泛使用组件以使事情变得简单并构建基于组件的完整模型的原因。
  3. 由于Component具有视图，因此可以定义viewEncapsulation。而指令没有视图。因此，您不能在指令中使用viewEncapsulation。
  4. 尽管组件使编写简单，有效的代码变得更加容易，但是与普通指令相比，它具有更简单的配置，但它已针对基于组件的体系结构进行了优化。但是什么时候不使用组件?答案是–组件不支持“编译”和“预链接”功能。因此，要操作DOM对象，我们应该使用指令。

组件绝不能修改超出其自身范围的任何数据或DOM。指令具有隔离的范围，默认情况下，子级从其父级继承该范围。

每个DOM元素只能存在一个组件。 DOM元素中可以有多个指令

要注册组件，我们使用@Component元数据注释。对于指令，我们使用@Directive元数据注释。上面的“示例”中显示了两个简单的示例。

结论：
已经对该主题进行了基础研究。无论使用组件还是指令，都完全取决于编写特定代码的目的。随着新兴技术的出现，大多数网页设计体系结构都旨在获得基于组件的模型，而这正是我们需要组件的时候。另一方面，指令为我们提供了很多选择器，例如选择器，输入，输出和提供程序，可以创造性地编写代码。