THE EVOLUTION OF WEB STANDARDS

https://evolutionofweb.appspot.com/#/evolution/day​

THE MODERN WEB

Object.observe()

ECMAScript 6

Web Components

the three main web standards behind AngularJS 2

let's skip this...

The Standard

Custom Elements

HTML Imports

Templates

Shadow DOM

Hello World

@Component({
  selector: 'app'
})
@View({
  template: `
    <div>
      <h1>Hello {{ name }}!</h1>
    </div>
  `
})
class App {
  name:string;

  constructor() {
    this.name = 'World';
  }
}

Desugaring TO ES5*

desugaring from AtScript before moving to TypeScript with ES7 like decorators *

function App() {
  this.name = 'World';
}

App.annotations = [
  new Component({
    selector: 'app'
  }),
  new View({
    template: 
      '<div>\n' +
      '  <h1>Hello {{ name }}!</h1>\n' +
      '</div>\n'
  })
];

AngularJS 1

AngularJS 2

ELEMENT Property bindings

@Component({
  selector: 'counter'
})
@View({
  template: '<input type="text" [value]="num">'
})
class App {
  num:number = 0;

  constructor() {
    setInterval(function() {
      this.num++;
    }.bind(this), 1000);
  }
}

[square brackets]

EVENT Bindings

(round brackets)

@Component({
  selector: 'app'
})
@View({
  template: `
    <button (click)="onClick()">Click me</button>
  `
})
class App {
  onClick() {
    alert('Cool!');
  }
}

More EVENT Bindings

@Component({
  selector: 'app'
})
@View({
  template: `
    <input id="inp" type="text"
           (keyup)="onKeyup($event)" (seven)="onSeven()">
  `
})
class App {
  onKeyup(event) {
    if(event.currentTarget.value.length === 7) {
      event.currentTarget.dispatchEvent(new Event('seven'));
    }
  }
  onSeven() {
    alert('Cool!');
  }
}

No 2-way bindings

@Directive({
  selector: 'input[pass]',
  events: ['passMatch'],
  hostListeners: { 
    keyup: 'onKeyup($event.target.value)' 
  }
})
class PassInput {
  passPhrase:string = 'test123';
  passMatch:EventEmitter 
    = new EventEmitter();
  
  onKeyup(value) {
    if(value === this.passPhrase) {
      this.passMatch.next('matched');
    }
  }
}

import PassInput from './pass-input.js';


@Component({
  selector: 'app'
})
@View({
  template: `
    <input type="text"
           (pass-match)="onPassMatch($event)">
    Matched: {{count}}`,
  directives: [PassInput]
})
class App {
  constructor() { this.count = 0; }
  onPassMatch(event) {
    this.count++;
  }
}

App Component

Directive

Everything is a Directive!

Everything is a Directive!

Injection resolution stages

pre-existing injectors

• The terminal injector throws exception or resolves @Optional to null
• The platform injector resolves browser singleton resources like cookies and location

Simple injection

class ListService {
  list:Array<string> = ['One', 'Two', 'Three'];
}

@Component({
  selector: 'app',
  injectables: [ListService]
})
@View({
  template: `List: {{ list }}`
})
class App {
  constructor(listService:ListService) {
    this.list = listService.list;
  }
}

Concrete With @Inject

class HelloAbstract {
  hello() { throw new Error('Abstract!'); }
}
class HelloConcrete extends HelloAbstract {
  hello() { return 'Howdy doodie?'; }
}

@Component({
  selector: 'app',
  injectables: [
    HelloConcrete
  ]
})
@View({template: '{{ helloService.hello() }}' })
class App {
  helloService:HelloAbstract;
  constructor(@Inject(HelloConcrete) helloService:HelloAbstract) {
    this.helloService = helloService;
  }
}

With Injector Binding

class HelloAbstract {
  hello() { throw new Error('Abstract!'); }
}
class HelloConcrete extends HelloAbstract {
  hello() { return 'Howdy doodie?'; }
}

@Component({
  selector: 'app',
  injectables: [
    bind(HelloAbstract).toClass(HelloConcrete)
  ]
})
@View({template: '{{ helloService.hello() }}' })
class App {
  helloService:HelloAbstract;
  constructor(helloService:HelloAbstract) {
    this.helloService = helloService;
  }
}

Element Level Injection

@Directive({
  selector: 'button[kamikaze]'
})
class KamikazeButton {
  constructor(elem:NgElement) {
    elem.domElement.addEventListener('click', function(event) {
      event.currentTarget.style.display = 'none';
    }.bind(this));
  }
}

@Component({ selector: 'app' })
@View({
  template: '<button kamikaze>Remove me</button>',
  directives: [KamikazeButton]
})
class App {}

More Element Level Injection

@Directive({
  selector: '[color-button]',
  hostListeners: {click: 'onClick()'}
})
class ColorButton {
  constructor(@Parent() panel:ColorPanel,
              @Attribute('color-button') color:string) {
    this.color = color;
    this.panel = panel;
  }
  onClick() {
    this.panel.bgColor(this.color);
  }
}

@Directive({ selector: 'color-panel' })
class ColorPanel {
  constructor(@PropertySetter('style.background-color') bgColor:Function) {
    this.bgColor = bgColor;
  }
}

Things need to stabilize first

• Still very experimental and things are changing a lot
• Router is not fully ported / documented yet
• No ngResource alternative yet
• Forms module has not matured yet

My Personal Opinion
Not proven yet

• Use ECMAScript 6
• Make everything a directive
• Always use controllerAs syntax
• Avoid $scope.$watch and use reactive approaches
• Only create services
• Use ES6 classes for controllers and services
• Use the new router for 1.4 (angular-new-router)