What is a component in AngularJS?

Question

I was doing some reading about directives and was wondering what the distinction was between a directive and a component, when I found that there are lots of components in AngularJS.

There is a function component, type component, service component, filter component, provider component, etc... Then to top it off I found that a module component is a component consisting of directives, services, filters, providers, templates, global API’s, and testing mocks. That tended to make things more confusing. I couldn't find a definition of a "component" in the Angular documentation that would explain the distinctions between the types of components listed.

So what exactly is a "component" in AngularJS? Is it something as simple as reusable blocks of code?

By the way, I'm using Angular version 1.4.2 currently.

Answer 1

Angular components were introduced in version 1.5.

A component is a simplified version of a directive. It cannot do dom manipulation (not link or compile methods) and "replace" is gone too.

Components are "restrict: E" and they are configured using an object (not a function).

An example:

  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;
        }
      })
    }]
  });

Further reading: https://toddmotto.com/exploring-the-angular-1-5-component-method/