AngularJS 中的组件是什么？答案

【问题标题】：What is a component in AngularJS?AngularJS 中的组件是什么？
【发布时间】：2016-02-04 10:46:34
【问题描述】：

我在阅读指令时想知道指令和组件之间的区别是什么，这时我发现 AngularJS 中有很多组件。

里面有函数组件、类型组件、服务组件、过滤器组件、提供者组件等等……然后我发现模块组件是一个由指令、服务、过滤器、提供者、模板组成的组件、全局 API 和测试模拟。这往往会使事情变得更加混乱。我在 Angular 文档中找不到“组件”的定义来解释列出的组件类型之间的区别。

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

顺便说一句，我目前使用的是 Angular 1.4.2 版本。

【问题讨论】：

你可以调用组件任何可以组合的东西。您可以定义指令并将其与代码的其他成员组合。通常人们将可重用块称为组件。
"AngularJS" 和 "Angular"（此时）意味着两个不同的东西。也许您打算将“AngularJS”和“Angular”表示同一个意思？
不，框架区分了我问这个问题时不知道的版本之间的组件。我只发布了这个和答案来帮助其他开发人员，尤其是像我这样来自 java 背景的开发人员，这个特殊问题的范围很窄。

标签： angularjs angularjs-components

【解决方案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/

【讨论】：

这个问题的术语有点混乱。作者将“组件”作为一个通用术语来讨论，并且似乎在问一个问题，即“过滤器、服务等所有这些不同的东西是什么”。（听起来他们有点困惑，可能需要学习一些 JavaScript 基础知识）。这个答案是指AngularJS component()s，这也是大多数人会搜索的。事实上，这在 1.4.2 中甚至都不是提问者使用的东西。

【解决方案2】：

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

在 AngularJS 上下文中，模块化是按功能组织的而不是类型。为了比较，给定数组 time = [60, 60, 24, 365] 和 money = [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上的一篇精彩文章。

【讨论】：

我注意到我对这个答案投了反对票。如果有人可以向我解释哪一部分是错误的，请这样做，我会修复它。我仍然保持开放，因为我相信部分内容是正确的。
好的，我看到我在答案中遗漏了版本的上下文。

【解决方案3】：

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

它们是一种特殊类型的指令，始终为“Restrict:E”类型。

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

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

export class CustomerComponent {
    /* Component logic */
}

【讨论】：

问题是关于 AngularJS (1.x)。