#VDT15 @CarmenPopoviciu @PascalPrecht

Fireside chats about Angular 2

By Carmen Popoviciu and Pascal Precht a.k.a ng-duo

Warning!

Everything in this talk is based on alpha developer previews. Things might change in the future.

(Do not try this in production!)

Angular 2 reactions...

Here's what we build today

ES6

(Some features we need to understand first.)

Classes

ES6 classes are syntactical sugar over objects and prototypes.

class Car {
  constructor(name) {
    this.name = name;
    this.milesDriven = 0;
  }

  drive(miles) {
    this.milesDriven = this.milesDriven + miles;
  }
}

let bmw = new Car('BMW');
bmw.drive(10);

Modules

A module format that everybody is happy with
(AMD, CommonJS - I'm looking at you!).

// ----- Car.js
export class Car {

  constructor(name) {
    this.name = name;
    this.milesDriven = 0;
  }

  drive(miles) {
    this.milesDriven = this.milesDriven + miles;
  }
}

export class Convertible extends Car { ... }

Modules

A module format that everybody is happy with
(AMD, CommonJS - I'm looking at you!).

// ----- app.js
import { Car, Convertible } from 'Car'

let bmw = new Car('BMW');
let mercedes = new Convertible('Mercedes');

Let's build that app!

import {
  bootstrap,
  Component,
  View
} from 'angular2/angular2'








          
          
    
          
import {
  bootstrap,
  Component,
  View
} from 'angular2/angular2'







class FiresideChatsApp {
  constructor() {
    this.name = 'Fireside Chats';
  }
}
import {
  bootstrap,
  Component,
  View
} from 'angular2/angular2'

@Component({
  selector: 'fireside-chats-app'
})
@View({
  template: '

{{name}}

' }) class FiresideChatsApp { constructor() { this.name = 'Fireside Chats'; } }

Bootstrapping an app

We can bootstrap our application with a component as entry point.

bootstrap(FiresideChatsApp);
<body>
  ...
  
  ...
</body>

Demo

Chatter Card Component

{
  name: "Celestino Bellone",
  avatar: "path/to/profile.png",
  twitterHandle: "c_bellone",
  description: "Poor tennis player..."
}
@Component({
  selector: 'chatter-card'
})
@View({
  templateUrl: 'chatter-card.html'
})
class ChatterCard {

}

chatter-card.html




  @{{item.twitterHandle}}


{{item.name}}

{{item.description}}

Brackets?!

2 Things: Escaping and Property Binding

Problems with interpolations

Why can't we just do this?

Properties and Attributes



var input = document.querySelector('input');
input.value; // 'Carmen'
var img = document.querySelector('img');
img.src = // 'path/to/img.png'

Web Components have the same APIs!

Property Binding

Angular 2 binds to element properties instead of attributes in order to work with any element.

Using [] syntax, we can bind to element properties.
A binding value is always an expression.

My editor doesn't like it!

Canonical Syntax

bind-* is equivalent to [*]

chatter-card.html




  @{{item.twitterHandle}}


{{item.name}}

{{item.description}}

But where does item come from?

@Component({
  selector: 'chatter-card'



})
@View({
  templateUrl: 'chatter-card.html'
})
class ChatterCard {

}
@Component({
  selector: 'chatter-card',
  properties: {
    item: 'item'
  }
})
@View({
  templateUrl: 'chatter-card.html'
})
class ChatterCard {

}

Demo

Chatter Card Component

chatter-card.html




  @{{item.twitterHandle}}



  

{{item.name}}

{{item.description}}

chatter-card.html




  @{{item.twitterHandle}}


{{item.name}}

{{item.description}}

chatter-card.html




  @{{item.twitterHandle}}


{{item.name}}

{{item.description}}

{{showDetails ? 'Less' : 'More'}} details

Demo

Let's add a list!

Fireside Chats

Fireside Chats

<chatter-card [item]="item"></chatter-card>

Again?!

Viewport Directives

Viewport is a directive which can control instantiation of child views which are then inserted into the DOM.

This is an error message.

Can only be placed on <template> elements.

Wait... Template?

Inline Templates

Angular 2 uses inline templates to enable declarative DOM structure changes. Templates can be used implicit or explicit.

Demo

Thanks!

By Carmen Popoviciu and Pascal Precht a.k.a ng-duo

Slides: pascalprecht.github.io/fireside-chats-about-angular-2

App: github.com/carmenpopoviciu/angular-firesidechats