Components and directives in angular 1.5

Question

A big feature of the changes in Angular 1.5 surrounds component support.

component('myComponent', { template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>', bindings: { firstName: '<', lastName: '<' }, controller: function() { this.getFullName = function() { return this.firstName + ' ' + this.lastName; }; } }); 

So far so good, I'm not sure how this differs from directives. What are the benefits of using components over traditional custom directives? And are the components in Angular 1.5 and Angular 2 the same?

Answer 1

.component now the preferred way to write code, as it supports good practices and allows developers to write code as in angular 2 (similar to web components). Basically, when you write code using component , upgrading to angular 2 will be easier. Functionality remains virtually unchanged. You can use .component whenever possible.

Changes (checkout)

• Component
• declared using an object instead of a function
• simplified isolated area using the binding property
• components always with an isolated area
• some bad practices will not be possible
• simpler easier to understand the configuration
• lifecycle hooks: ( $onInit() , $onChanges(changesObj) , $doCheck() , $onDestroy() , $postLink() )

Amazing article here: https://toddmotto.com/exploring-the-angular-1-5-component-method

If you do not use Components (from documents):

• for directives that must perform compilation and prebinding functions because they are not available
• when you need advanced directive definition options such as priority, terminal, multi-element
• if you want the directive to be triggered by a CSS attribute or class, not an element.

I believe the best description you can find is the official guide: https://docs.angularjs.org/guide/component . It covers all changes, the causes of changes and gives you a deep understanding of the components.

Answer 2

The component does NOT replace .directive as @rek Żelechowski. So..

You cannot do anything with .component (), which you cannot do with .directive (). It aims to simplify the way we create “components,” which roughly means UI directives.

When can / should it be used?

Obviously, there are several cases where you cannot / do not use it:

• If you need a link function (although you rarely have to)
• If you want a directive without templates, for example. ng-click, which does not have a template or a separate area.

For all your other directives, this should work. And since it saves on the template and is less prone to errors, it is more convenient to use.

Despite all the new goodies, .component () cannot completely replace .directive ().

Answer 3

The directives are NOT superseded, they are simply modified for many different reasons, which may be too large to enter here. The angular docs explain them pretty well, so you can see the documentation there:

https://docs.angularjs.org/guide/component

To better understand what the differences between directives and components are, I find it better to refer to the angular 2.0 documentation. angular 1.5 gave us a bridge to 2.0, which did not have 1.4 before. One of the big changes is the removal of $ scope, the other is the provision of components as a way to create things (which is HIGHLY used in angular 2.0).

In general, the change itself is that it is preparing world 1.X for migration to world 2.X. In this world there are Components (which are the element-level directives at their core), structural directives and attribute directives. See the links below to help understand them (along with the link above).

http://learnangular2.com/components/

https://angular.io/docs/ts/latest/guide/structural-directives.html

https://angular.io/docs/ts/latest/guide/attribute-directives.html