AngularJS Components Basic Components and LifeCycle Hooks
Example
What’s a component?
- A component is basically a directive that uses a simpler configuration and that is suitable for a component-based architecture, which is what Angular 2 is all about. Think of a component as a widget: A piece of HTML code that you can reuse in several different places in your web application.
Component
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
Markup
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Using External data in Component:
We could add a parameter to pass a name to our component, which would be used as follows:
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
Markup
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
Using Controllers in Components
Let’s take a look at how to add a controller to it.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
Markup
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
Parameters passed to the component are available in the controller's scope just before its $onInit function gets called by Angular. Consider this example:
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
In the template from above, this would render "Hello John, I'm MacJohn!".
Note that $ctrl is the Angular default value for controllerAs if one is not specified.
Using “require” as an Object
In some instances you may need to access data from a parent component inside your component.
This can be achieved by specifying that our component requires that parent component, the require will give us reference to the required component controller, which can then be used in our controller as shown in the example below:
Notice that required controllers are guaranteed to be ready only after the $onInit hook.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
Keep in mind, though, that this creates a tight coupling between the child and the parent.
