Angular1.5 .Component() method


Helper method. Allow developer to write in Angular 2 style to build and specify elements and logic on the page.

Syntax compared to .directive:
module. directive(name, fn);
module. component(name, options);
name : Name of our component.
options: Definition Object passed into the component.
Example to create counter component:
.directive(‘counter’, function counter() {
  return {
.component(‘counter’, {…..
** .component method makes it easy to create isolated directives, with controller using controller-as syntax.
Angular automatically uses the name of the Component created to instantiate the Controller with that alias.
.component(‘test’, {
  controller: function () {
    this.testing = 123;
By using  test.testing in our template would give us the value of 123.
Directive-  bindToController : Explicitly define which properties we want to pass into our isolated scope and bind directly to the controller.
Component- binding: Define what we want to pass down to the component, which have an isolated scope.

template : property if template is a function and injected through $element and $attrs locals, Then it need to return a string representing the HTML to compile.

** In recent Angular 2 release it combined all the major concepts of Angular1 i.e. directives, controllers and scope into Components.
Technically a component is a class that control view template.
Angular 2 Get started;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s