AngularJS 中的组件是什么？

Question

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

有功能组件，类型组件，服务组件，过滤器组件，提供者组件等等...然后最重要的是我发现模块组件是由指令，服务，过滤器，提供者组成的组件、模板、全局 API 和测试模拟。这往往会使事情变得更加混乱。我在 Angular 文档中找不到 "component" 的定义来解释所列组件类型之间的区别。

那么 AngularJS 中的 "component" 到底是什么？它是否像可重用代码块一样简单？

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

Answer 1

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

In an AngularJS context, modularization is organization by function instead of type. To compare, given arrays time = [60, 60, 24, 365] and money = [1, 5, 10, 25, 50], both are of the same type, but their functions are completely different.

That means your components (controllers, filters, directives) will live in modules instead of wherever they live now.

所以是的，对于我们的 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 2

Angular 组件在版本 1.5 中引入。

组件是指令的简化版本。它不能进行 dom 操作（不是 link 或编译方法）并且 "replace" 也消失了。

组件是 "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 3

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

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

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

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

export class CustomerComponent {
    /* Component logic */
}

AngularJS 中的组件是什么？

What is a component in AngularJS?

angularjs

angularjs-components