Components and directives in angular 1.5

Question

The big feature changes in Angular 1.5 are surrounding the support of components .

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

While this is all good, I am not sure how this differs from directives. What are the benefits of using components over traditional custom directives? And are components in Angular 1.5 and Angular 2 the same?

Answer 1

The .component DOES NOT replaces .directive like @rek Żelechowski said. So..

There's nothing you can do with .component() that you can't do with .directive(). It aims to simplify the way we create “components” – which roughly means UI directives.

When can/should you use it?

Clearly there are a few cases where you can't/shouldn't use it:

• If you need the link function (though you rarely should)
• If you want a template-less directive, eg ng-click that doesn't have a template or separate scope

For all your other directives, this should work. And because it saves on boilerplate and less error-prone it's nicer to use.

Despite of all new goodies, .component() can't fully replace .directive().

Answer 2

The .component is now preferred way of writing code because it favors good practices and gives developers ability to write code like in angular 2 (similar to Web Components). Basically, when you write code using component , upgrading to angular 2 will be easier. Functionalities remains almost the same. You should use .component always when it is possible.

Changes (extract)

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

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

When not to use Components (from docs):

• for directives that need to perform actions in compile and pre-link functions, because they aren't available
• when you need advanced directive definition options like priority, terminal, multi-element
• when you want a directive that is triggered by an attribute or CSS class, rather than an element.

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

EDIT 01-2020:

I don't work on ng1 code anymore since at least a year

At the point of writing response (01-2017), impression that they are going to replace directives in most scenarios was correct. I removed a word "replaced" from the answer in 06-2017, because it is was indeed misleading at that point in time. However, since 1.5 you should still prefer components over directives when possible.

Actually, you should prefer not to use AngularJS at all. It is now in LTS and basically, only errors will be fixed. No new features. Also, LTS ends on 01-07-2021. https://docs.angularjs.org/misc/version-support-status#long-term-support

PS. Using component instead of directive makes the code easier to port to ngx in the future.

Answer 3

Directives are NOT replaced, they just have been changed for lots of various reasons that might be a bit too much to get into here. The angular docs explain them pretty well, so you can start looking at the documentation there:

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

To get a better idea of what the differences between directives and components are, I find that its better to reference the Angular 2.0 documentation. Angular 1.5 gave us a bridge to 2.0 that 1.4 and prior did not have. One of the bigger changes is removing $scope, another is providing Components as a way to build things (which is HIGHLY used in Angular 2.0).

All in all the very meat of the change is that it prepares the 1.X world to migrate to the 2.X world. In that world there are Components (which are element level directives at their heart), structural directives and attribute directives. See the below links to help understand each (along with the link provided 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