Angular 2: The new horizon

by Martin Gontovnikas

@mgonto

I am a

software developer

from Buenos Aires, Argentina
working at

Auth0 Inc.
making stuff happen
used to be coding

Javascript

all day long
Now I work as a

Developer Advocate

So let's start!

T-Shirt time!

Now we can start

Angular 1

What did you like about Angular 1?

Once you learnt it, it was really fast to develop

It embraced "WebComponents"

It gave structure to your code

2 way data binding

What didn't you like about Angular 1?

Too many concepts to learn

service

factory

provider

config

filter

directive

ng-*

scope inheritance

config

run

and more

Some APIs were really bad. cof directives cof.

2 way data binding

Angular 2: The new horizon

Fewer concepts to learn

Easier APIs

Full framework for big apps

WebComponent compliant

Let's learn it

What's a component?


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}

This annotations are also ES7 Decorators


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


<span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
<!-- Is the same as -->
<template ng-if="person.nickname">
  <span>Nickname: {{person.nickname}}</span>
</template>


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


@Component({
  selector: 'person-shower',
  properties: { person: 'person' }
})
@View({
  template:`
    <p>
      <span>Name: {{person.name}}</span>
      <span [innerHTML]="'Location ' + person.location.toString()"></span>
      <span *ng-if="person.nickname">Nick name: {{person.nickname}}</span>
      <input type="text" #name />
      <button (click)="changeName(event, name)">Change name</button>
    </p>
  `
})
export class PersonShower {
  constructor(public ageCalculator: AgeCalculator) {   
    this.age = this.ageCalculator.calculate(this.person);
  }

  changeName(event, name) {
    event.preventDefault();
    this.person.name = name.value;
  }
}


bootstrap(
  App, 
  [
    bind(AgeCalculator).toClass(SuperFastAgeCalculator)
    // or
    // bind(AgeCalculator).to(new SuperFastCalculator(magicNumber))
  ]
);

What's a directive?


@Directive({
  selector: '[auto-focus]',
})
export class Autofocus {
  constructor(public el: ElementRef) {
    this.el.domElement.focus();
  }
}

A component is a directive vith a view

Let's see this example in action!

Want examples, interesting videos & more info?

auze.ro/ng2-jqsf

@mgonto

This has been

Angular 2: The new horizon

by Martin Gontovnikas

@mgonto