close

  menu      DavidRodenas
CONTACT  

AngularJS components in ES2015

Shows how to write Angular1 components using the new .component syntax of Angular 1.5, and typescript using classes and DDO.


export const HelloWorldComponent = {
  template: `Hello {{ $ctrl.name }}`,
  controller: class HelloWorldController {
    constructor() {
      this.name = 'World';
    }
  }
}

Overview

// counter.component.js
export const HelloWorldComponent = {
  bindings: {
    name: '<',
  },
  template: `
    <h1>{{$ctrl.salute}}</h1>
  `,
  controller: class HelloWorldController {
    /* @ngInject */
    constructor() {
    }
    
    $onInit() {
      this.count = this.initialCount;
    }
    
    increment() {
      this.count++;
    }
    
    decrement() {
      this.count--;
    }
  }
}
// app.module.js
import { CounterComponent } from './counter.component';

export const AppModule = angular
  .module('AppModule', [])
  .component('myCounter', CounterComponent)
  .name;