HANDS ON
ANGULAR
Hi! I'm Nicolas Payot
Front-End Developer [ Dawex ]
@npayot
@nicolaspayot
ARCHItecture
TEMPLATE
property binding
<span>Hello, my name is {{ user.firstName }}</span>
<input [value]="user.firstName">
<button [disabled]="isFormValid()">Save</button>
<a [href]="homeURL">Go to home</a>
<!-- custom component -->
<hero [data]="currentHero"></hero>
TEMPLATE
EVENT binding
<button (click)="save()">Save</button>
<input
[value]="user.firstName"
(input)="user.firstName = $event.target.value">
<!-- custom component -->
<hero
(deleted)="onHeroDeletedEvent($event)"></hero>
COMPONENT
INPUT
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero', // CSS selector
templateUrl: './hero.component.html'
})
export class HeroComponent {
@Input() data: Hero;
}
COMPONENT
OUTPUT
import { ..., Output, EventEmitter } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero',
template: `<button (click)="deleted.emit(data)"></button>`
})
export class HeroComponent {
@Input() data: Hero;
@Output() deleted = new EventEmitter<Hero>();
}
Ngmodule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeroComponent } from './hero/hero.component';
@NgModule({
declarations: [
AppComponent,
HeroComponent
],
imports: [BrowserModule]
})
export class AppModule {}
SERVICE AND DI
import { HeroService } from './hero/hero.service';
@NgModule({ providers: [HeroService] })
export class AppModule {}
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({ ... })
export class HeroComponent {
constructor(private heroService: HeroService) {}
}
HTTP
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Hero } from './hero';
@Injectable()
export class HeroService {
constructor(private http: Http) {}
fetchAll(): Observable<Hero[]> {
return this.http.get('/api/heroes')
.map((response: Response) => response.json());
}
}
HTTP
import { Component, OnInit } from '@angular/core';
import { HeroService } from './hero.service';
import { Hero } from './hero';
@Component({ ... })
export class AppComponent implements OnInit {
heros: Hero[];
constructor(private heroService: HeroService) {}
ngOnInit() {
this.heroService.fetchAll()
.subscribe(heroes => this.heros = heroes);
}
}
HAVE FUN!
👉
Hands on Angular
By Nicolas Payot
Hands on Angular
- 982