AngularJS中的组件是什么？

Question

当我发现AngularJS中有很多组件时，我正在阅读有关指令的内容，并想知道指令和组件之间的区别。

有一个功能组件，类型组件，服务组件，过滤器组件，提供程序组件等...然后，我发现模块组件是由指令，服务，过滤器，提供程序，模板，全局API组成的组件。 ，并测试嘲笑。这往往会让事情变得更加混乱。我在Angular文档中找不到“组件”的定义，它可以解释列出的组件类型之间的区别。

那么AngularJS中的“组件”到底是什么？它是否像可重用的代码块一样简单？

顺便说一句，我目前正在使用Angular 1.4.2版。

Answer 1

Angular组件在1.5版中引入。

组件是指令的简化版本。它不能做dom操作（不是链接或编译方法），“替换”也消失了。

组件是“restrict：E”，它们是使用对象（不是函数）配置的。

一个例子：

  app.component('onOffToggle', {
    bindings: {
      value: '=',
      disabled: '='
    },
    transclude: true,
    template: '<form class="form-inline">\
                       <span ng-transclude></span>\
                       <switch class="small" ng-model="vm.value" ng-disabled="vm.disabled"/>\
                     </form>',
    controllerAs: 'vm',
    controller: ['$scope', function($scope) {
      var vm = this;
      $scope.$watch("vm.disabled", function (val) {
        if (!val) {
          vm.value = undefined;
        }
      })
    }]
  });

进一步阅读：https://toddmotto.com/exploring-the-angular-1-5-component-method/

Answer 2

来自面向OOP Java的背景，我试图区分各种Angularjs组件，包括模块。我认为我发现模块的最佳答案是13 Steps to Angularjs Modularization

在AngularJS上下文中，模块化是按功能而不是类型组织的。为了比较，给定阵列时间= [60,60,24,365]和金钱= [1,5,10,25,50]，两者属于同一类型，但它们的功能完全不同。

这意味着您的组件（控制器，过滤器，指令）将存在于模块中，而不是现在的任何位置。

所以是的，对于我们的1.4x代码，组件是可重用代码的块，但在我们的1.4x版本的上下文中，我将模块模式视为Angularjs中这些代码块的重复结构，但在版本1.5之前不被认为是真正的组件。实现这些模块的方式为您提供了组件类型，即控制器实现结构将其与服务或提供者区分开来（如果这是有意义的）。我也认为Angularjs文件应该解决这个问题。

这是我在Angularjs代码中重复看到的基本模式：

(function () {
    // ... all vars and functions are in this scope only
    // still maintains access to all globals
}());

这是关于Javascript Module Pattern in depth的优秀文章。

Answer 3

组件是Angular 2应用程序的构建块。在Angular 2应用程序中，一切都是组件。

它们是一种特殊类型的指令，总是“限制：E”类型。

它主要有两个部分。一个是选择器，另一个是tempate / templateUrl：

@Component({
    selector: "sample-ui",
    templateUrl: "../UI/sample.html"
})

export class CustomerComponent {
    /* Component logic */
}