What is a component in Angularjs?

Question

I read about directives and wondered what the difference between a directive and a component was when I discovered that Angularjs has many components.

There is a function component, type component, service component, filter component, provider component, etc. Then, to complete it, I discovered that the module component is a component consisting of directives, services, filters, providers, templates, global APIs and test layouts. This tended to make things more confusing. I could not find the definition of “component” in the Angular documentation that would explain the differences between the listed types of components.

So what is a “component” in Angularjs? Is this something as simple as multiple blocks of code?

By the way, I am currently using Angular version 1.4.2.

Answer 1

Based on an OOP-oriented background, I tried to distinguish between various Angularjs components, including modules. I think the best answer I found about modules was 13 steps to modulating Angularjs

In the context of AngularJS, modulation is a function organization instead of a type. For comparison, the given arrays time = [60, 60, 24, 365] and money = [1, 5, 10, 25, 50], both have the same type, but their functions are completely different.

This means that your components (controllers, filters, directives) will live in modules instead of where they live now.

So yes, components are blocks of updatable code, but in the javascript context, a module template is a repeating structure for these blocks of code in Angularjs. The way to implement these modules gives you the type of component, that is, the implementation structure of the controllers will distinguish it from the service or provider, if that makes sense. I also think Angularjs docs should have considered this.

Here is the basic pattern that I see in Angularjs code repeating:

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

Here is a great article on the Javascript Module Pattern in depth .

Answer 2

Components

Angular was introduced in version 1.5.

The component is a simplified version of the directive. It cannot perform dom manipulations (not links or compilation methods), and "replacement" does not work either.

The constrain components are: E, and they are configured using an object (not a function).

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/

Answer 3

A component is the building block of an angular 2 application. In an angular2 application, everything is a component. They are a special type of directive that is always of type "Constrain: E". It has two main parts, one is a selector and the other is tempate / templateUrl

 @Component({ selector: "sample-ui", templateUrl: "../UI/sample.html" }) export class CustomerComponent { /*Component logic*/ }