slides-angular2

View Github Repository Open presentation in a new window

tib-tib

See all presentation from tib-tib

slides-angular2

0 0

slides-angular2

On Github tib-tib / slides-angular2

Angular 2

Status

et ben en fait on est passé a beta 02 il y a 3 jours

Angular 2?

  • TypeScript, JavaScript, Dart
  • Web components
  • Goodbye $scope,  controllers,  modules
surcouche js qu'on compile ensuite en jsdu typage, des classes, des décorateurs, etc

Build an Angular 2 app in 5 minutes!

Why use Angular 2?

Speed and performance

  • Faster change detection
  • Template precompilation
  • View caching
  • Server-side renderingserver side rendering (faster for mobile, best for seo) Performance - Angular 2 comes with a way and plenty other things that make the framework freakin’ fast.next version of Angular has been split up into two parts, an application layer and a render layer. This enables us to run Angular in other environments than the browser like Web Workers or even servers.

Dependency injection

  • Angular 1 
    angular.module 'Scrumble.login', [
  'LocalStorageModule'
  'satellizer'
  'ui.router'
  'permission'
  'trello-api-client'
]
    angular.module 'Scrumble.login'
.controller 'ProfilInfoCtrl', (
  $scope
  $timeout
  $rootScope
  trelloAuth
  googleAuth
) ->

Dependency injection

  • Angular 2 
    import {Card} from './card';

@Component({
  selector: 'my-card',
  template: `<div>{{card.value}}</div>`
})

export class MyCardComponent {
  public card: Card = {
    color: 'Spades',
    value: 'Ace'
  };
}

Component

<my-card></my-card>
import {Component} from 'angular2/core';

@Component({
  selector: 'my-card',
  template: `<div class="card">{{value}} of {{color}}</div>`,
  styles: [
    '.card { background-color: red; }'
  ]
  directives: [] # <=> components
  providers: [] # <=> services
  pipes: [] # <=> filters
})
export class MyCardComponent {
  public value: string = 'Ace';
  public color: string = 'Spades';
}

Data binding

  • One-way from data source to view target 
    {{expression}}
[target] = "expression"
bind-target = "expression"
    <img src="{{imageUrl}}">
<img [src]="imageUrl">
    <div>The title is {{title}}</div>
<div [textcontent]="'The title is '+title"></div>

Data binding

  • One-way from view target to data source 
    (target) = "statement"
on-target = "statement"
    <button (click)="onSave()">Save</button>
<button on-click="onSave()">Save</button>
  • Two-way 
    [(target)] = "expression"
bindon-target = "expression"
    <input [(ngmodel)]="card.value">

Displaying data

  • NgFor
<li *ngfor="#card of cards">
  {{card.value}}
</li>
NgIf 
<div *ngif="card">{{card.value}}</div>

Routing

  • Config
import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

import {AppComponent}     from './app.component';

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Routing

  • Router component
import {Component} from 'angular2/core';
import {RouteConfig, RouterOutlet} from 'angular2/router';
...

@Component({
  selector: 'card-menu'
  template: `
    <h2>Cards menu</h2>
    <nav>
      <a [routerlink]="['Cards']">Cards</a>
      <a [routerlink]="['Card', {id: 2}]">Card 2</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  directives: [RouterOutlet],
})
@RouteConfig([
  {path:'/cards', name: 'Cards', component: CardListComponent, useAsDefault: true},
  {path:'/card/:id', name: 'Card', component: CardDetailComponent}
])
export class CardMenuComponent { }

Routing

  • Go to route
import {Router} from 'angular2/router';

@Component(...)
export class CardListComponent {

  constructor(
    private _router:Router
  ){}

  gotoCard(cardId: number) {
    this._router.navigate(['Card',  {id: cardId}]);
  }

Routing

  • Retrieve route parameters
import {Component, OnInit} from 'angular2/core';
import {RouteParams} from 'angular2/router';
import {CardService};

@Component(...)
export class CardDetailComponent implements OnInit  {
  card: Card;

  constructor(
    private _routeParams:RouteParams,
    private _service:CardService){}

  ngOnInit() {
    let id = this._routeParams.get('id');
    this._service.getCard(id).then(card => this.card = card);
  }

Services

import {Card} from './card';
import {CARDS} from './mock-cards';
import {Injectable} from 'angular2/core';

@Injectable()
export class CardService {
  getCards() {
    return Promise.resolve(CARDS);
  }
}

And more...

Thanks

tib-tib
Angular 2