Implementing a basic component in AngularJS 1.5

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>`    };   });   

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>     `   });   

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.

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>     `   });