Что такое компонент в AngularJS?

Компоненты Angular были представлены в версии 1.5.

Компонент — это упрощенная версия директивы. Он не может выполнять манипуляции с домом (не связывать или компилировать методы), и «замена» тоже исчезла.

Компоненты "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/

Исходя из опыта ООП, ориентированного на Java, я пытался различать различные компоненты Angularjs, включая модули. Я думаю, что лучший ответ, который я нашел о модулях, был 13 шагов к модуляризации Angularjs

В контексте 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 в деталях .

Компонент — это строительный блок приложения Angular 2. В приложениях Angular 2 все является компонентом.

Это особый тип директивы, который всегда относится к типу «Restrict:E».

Он состоит в основном из двух частей. Один — селектор, а другой — tempate/templateUrl:

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

export class CustomerComponent {
    /* Component logic */
}