What is a component in AngularJS?

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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"/>\
    controllerAs: 'vm',
    controller: ['$scope', function($scope) {
      var vm = this;
      $scope.$watch("vm.disabled", function (val) {
        if (!val) {
          vm.value = undefined;

Further reading:

Method 2

Coming from an OOP Java oriented background, I was trying to distinguish between the various Angularjs components, including modules. I think the best answer I found about modules was 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.

So yes, for our 1.4x code, components are blocks of resusable code, but in our version 1.4x context, I see the Module Pattern as a recurring structure to these blocks of code in Angularjs, though not considered true components until version 1.5. The way these modules are implemented gives you the type of component, that is, a controllers implementation structure will distinguish it from a service or a provider, if that makes sense. I also think the Angularjs documents should have addressed this.

Here is the basic pattern I see repeated in the Angularjs code:

(function () {
    // ... all vars and functions are in this scope only
    // still maintains access to all globals

Here is an excellent article on the Javascript Module Pattern in depth.

Method 3

A component is the building block of an Angular 2 application. In Angular 2 applications everything is a component.

They are a special type of directive which are always “Restrict:E” type.

It has majorly two parts. One is the selector and the other is tempate/templateUrl:

    selector: "sample-ui",
    templateUrl: "../UI/sample.html"

export class CustomerComponent {
    /* Component logic */

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply