Implementing a basic component in AngularJS 1.5

The 1.5 release of AngularJS introduced a new tool: the component. While it isn't exactly similar to the concept of the Angular 2 component, it does allow you to build directive-style pieces in an explicitly componentized fashion.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/7756/.

Getting ready

Suppose your application had a directive defined as follows:

[index.html] 
 
<div ng-app="articleApp"> 
  <article></article> 
</div> 
[app.js] 
 
angular.module('articleApp', []) 
.directive('article', function() { 
  return { 
    controller: function() { 
      this.person = {firstName: 'Jake'}; 
      this.title = 'Police Bust Illegal Snail Racing Ring'; 
      this.capitalize = function() { 
        this.person.firstName =   
          this.person.firstName.toUpperCase(); 
     }; 
   }, 
    controllerAs: 'articleCtrl', 
    template: ` 
      <h1>{{articleCtrl.title}}</h1> 
      <attribution author="articleCtrl.person.firstName" 
                   upper-case-author="articleCtrl.capitalize()"> 
      </attribution> 
    ` 
 }; 
}) 
.directive('attribution', function() { 
  return { 
    controller: function() {}, 
    controllerAs: 'attributionCtrl', 
    bindToController: { 
      author: '=', 
      upperCaseAuthor: '&' 
   }, 
    template: ` 
      <p ng-click="attributionCtrl.upperCaseAuthor()"> 
        Written by: {{attributionCtrl.author}} 
      </p>` 
 }; 
}); 

How to do it...

Since this application is already organized around the controllerAs encapsulation, you can migrate it to use the component() definition introduced in the Angular 1.5 release.

Components accept an object definition similar to a directive, but the object does not demand to be returned by a function—an object literal is all that is needed. Components utilize the bindings property in this object definition object in the same way that bindToController works for directives. With this, you can easily introduce components in this application instead of directives:

[index.html] 
 
<div ng-app="articleApp"> 
  <article></article> 
</div> 
[app.js] 
 
angular.module('articleApp', []) 
.component('article', { 
  controller: function() { 
    this.person = {firstName: 'Jake'}; 
    this.title = ' Police Bust Illegal Snail Racing Ring '; 
    this.capitalize = function() { 
      this.person.firstName =   
        this.person.firstName.toUpperCase(); 
   }; 
 }, 
  controllerAs: 'articleCtrl', 
  template: ` 
    <h1>{{articleCtrl.title}}</h1> 
    <attribution author="articleCtrl.person.firstName" 
                 upper-case-author="articleCtrl.capitalize()"> 
   </attribution>` 
}) 
.component('attribution', { 
  controller: function() {}, 
  controllerAs: 'attributionCtrl', 
  bindings: { 
    author: '=', 
    upperCaseAuthor: '&' 
 }, 
  template: ` 
    <p ng-click="attributionCtrl.upperCaseAuthor()"> 
      Written by: {{attributionCtrl.author}} 
    </p> 
  ` 
}); 

How it works...

Notice that since your controller-centric data organization matches what a component definition expects, no template modifications are necessary. Components, by default, will utilize an isolate scope. What's more, they will not have access to the alias of the surrounding controller objects, something that cannot be said for component-style directives. This encapsulation is an important offering of the new component feature, as it has direct parity to how components operate in Angular 2.

There's more...

Since you have now entirely isolated each individual component, there is only a single controller object to deal with in each template. Thus, Angular 1.5 automatically provides a convenient alias for the component's controller object, namely—$ctrl. This is provided whether or not a controllerAs alias is specified. Therefore, a further refactoring yields the following:

[index.html] 
 
<div ng-app="articleApp"> 
  <article></article> 
</div> 
[app.js] 
 
angular.module('articleApp', []) 
.component('article', { 
  controller: function() { 
    this.person = {firstName: 'Jake'}; 
    this.title = 'Police Bust Illegal Snail Racing Ring'; 
    this.capitalize = function() { 
      this.person.firstName =   
        this.person.firstName.toUpperCase(); 
   }; 
 }, 
  template: ` 
    <h1>{{$ctrl.title}}</h1> 
    <attribution author="$ctrl.person.firstName" 
                 upper-case-author="$ctrl.capitalize()"> 
   </attribution> 
  ` 
}) 
.component('attribution', { 
  controller: function() {}, 
  bindings: { 
    author: '=', 
    upperCaseAuthor: '&' 
 }, 
  template: ` 
    <p ng-click="$ctrl.upperCaseAuthor()"> 
      Written by: {{$ctrl.author}} 
    </p> 
  ` 
}); 

See also

• Componentizing directives using controllerAs encapsulation shows you a superior method of organizing Angular 1 directives
• Migrating an application to component directives demonstrates how to refactor Angular 1 to a component style
• Normalizing service types gives instruction on how to align your Angular 1 service types for Angular 2 compatibility