9

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

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

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

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

4

3 回答 3

15

Angular 组件是在 1.5 版中引入的。

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

组件是“限制：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/

于 2016-02-23T08:42:11.027 回答
7

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

在 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 模块模式的优秀文章。

于 2015-11-05T18:52:27.140 回答
-7

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

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

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

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

export class CustomerComponent {
    /* Component logic */
}
于 2018-03-12T17:08:06.157 回答