Converting to Angular 1.5: from directives to components

We are busy upgrading our projects to Angular 1.5 in preparation for Angular 2.

Here is a quick walkthrough of converting a basic angular directive to component.

Angular Directive

1
2
3
4
5
6
7
8
9
10
11
12
13

angular.module(‘app’).directive(‘contactForm’, function() {
return {
email: ‘=?’,
name: ‘@’,
surname: ‘@’
},
controller: function($scope, sendEmail) {
$scope.send = function() {
sendEmail.send($scope.email, $scope.name, $scope.surname);
};
},
templateUrl: ‘views/templates/contactForm.html’
});

I have, in this example, made email a two way data binding, and name and surname just strings.

Template

Contact Form template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="form-wrapper">

<form>
<p>
<label$gt;Email</label>
<input type=“text” name=“email” ng-model="email" />
</p>
<p>
label>Name</label>
<input type=“text” name=“name” ng-model=“name />
</p>
<p>
<label>Surname</label>
<input type=“text” name=“surname” ng-model=“surname” />
</p>
</form>

</div>

Calling the directive in another view:

Directive bindings:

@ String
& One-way Binding
= Two-way Binding

Component

Step 1:

Replace “.directive” with “.component”

Step 2:

Don’t pass a function as the second argument, pass an object with fields

You should now have

1
2
3

angular.module(‘app’).component(‘contactForm’, {
…
});

Note the { … } instead of the function() {…}

Step 3:

Bind variables using “bindings: { .. }” instead of “scope: { … }”

You should now have

1
2
3
4
5
6
7

angular.module(‘app’).component(‘contactForm’, {
bindings: {
email: ‘=?’,
name: ‘@’,
surname: ‘@’
}
});

Component binding types:

= Two-way Binding
< One-way Binding
@ String
& Callbacks (to output to parent scope)

Step 4:

Add controller, similar to directives, except you no longer pass in $scope. The variables bind on “$ctrl” the default value for controllerAs.

You can assign controllerAs to any value, but for this example it is unnecessary.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

angular.module(‘app’).component(‘contactForm’, {
bindings: {
email: ‘=?’,
name: ‘@’,
surname: ‘@’
},
controller: function(sendEmail) {

var $ctrl = this;

$ctrl.send = function() {
sendEmail.($ctrl.email, $ctrl.name, $ctrl.surname);
}
},
templateUrl: "/path/to/template/feature.template.html"
});

Note

1	var $ctrl = this;

Explicitly give $ctrl the controller’s scope.

Replace $scope with $ctrl. In the template you will have to reference each variable with $ctrl. Eg {{$ctrl.email}}