Question

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

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

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

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

Answer 1

Angular组件在1.5版本中引入。

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

组件是＆＃34;限制：E＆＃34;并使用对象（非函数）配置它们。

一个例子：

  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 */
}

AngularJS中的组件是什么？

3 个答案: