Bonus: Using the component() method
Overview
Angular 1.5 brought the awesome .component
directive. Don't worry, the learning curve isn't massive - it's basically a simplified directive!
Objectives
- Describe component() and directive() differences
component()
We use components every day - be it a dropdown box, a login form or a navigation bar. Components are awesome - much like directives, they're reusable, isolated pieces of functionality that we can use again and again. Other frameworks provide similar abilities - in fact the whole of React is based off of components - nothing else!
Instead of passing through a function to our component
method (like what we do with the directive
method), we pass through an object instead. This is really similar to the object we return in our directives.
For example:
function Counter() {
return {
template: [
'<div ng-click="counter.increment()" class="counter">',
'<h3>Counter</h3>',
'<div>Click anywhere to increment the counter!</div>',
'<div class="counter__count">Current count: {{ counter.count }}</div>',
'</div>'
].join(''),
controller: function ($scope) {
this.count = 0;
this.increment = function () {
this.count++;
};
},
controllerAs: 'counter'
}
}
angular
.module('app')
.directive('counter', Counter);
Would turn into this:
var Counter = {
template: [
'<div ng-click="counter.increment()" class="counter">',
'<h3>Counter</h3>',
'<div>Click anywhere to increment the counter!</div>',
'<div class="counter__count">Current count: {{ counter.count }}</div>',
'</div>'
].join(''),
controller: function ($scope) {
this.count = 0;
this.increment = function () {
this.count++;
};
},
controllerAs: 'counter'
};
angular
.module('app')
.component('counter', Counter);
Pretty much the same thing! However, there are a few restrictions to using the .component()
method:
- Every item is an element - we can't create attributes
- We no longer use the
scope
property. Everything is bound to the controller - We no longer use
bindToController
- this is simply namedbindings
instead - When we use
require
, we have to pass through an object instead of a string, with the property being anything that we want and the string being what we'd normally use- For example, instead of
{ require: '^parentController' }
, we use{ require: { parent: '^parentController' } }
- For example, instead of
- We cannot use a
link
orcompile
function
Then why even use them? Well, directives are old and a bit verbose for what we may need 99% of the time. Components are a new, updated method that has matched the way the frontend has changed. Think of them as a simple way to write a directive, and if you need to go complicated, use a directive instead.