Angular – Criar uma nova Aplicação

> ng new angular-tour-of-heroes

> cd angular-tour-of-heroes

> ng serve --open

ng serve• Lança o servidor

• Observa os ficheiros da aplicação

• Rebuild da aplicação sempre que se altera um ficheiro

--open• Abre um browser com o endereço htt://localhost:4200

Angular – Bootstrap de uma Aplicação

1. > ng serve ng lê o ficheiro .angular-cli.json para encontrar o ficheiro de arranque da aplicação: "main": "main.ts“

2. main.ts é o ponte de entrada da aplicação. O processo de bootstrapcarrega um módulo e "main.ts" especifica qual o módulo a carregar: AppModule em src/app/app.module

3. AppModule especifica que componente top-level usarbootstrap: [AppComponent]

AppComponent em src/app/app.component

4. AppComponent usa o selector 'app-root'e o templateURL src/app/app.component.html

5. index.html Angular carrega o ficheiro index.html que contém o elemento <app-root>, o qual é renderizado com o objeto AppComponent.

Componente HeroesComponent

import { Component, OnInit } from '@angular/core';import { Hero } from '../hero';

@Component({selector: 'app-heroes',templateUrl: './heroes.component.html’,styleUrls: ['./heroes.component.css']

})export class HeroesComponent implements OnInit {

hero: Hero = {id: 1,name: 'Windstorm’

};

constructor() { }

ngOnInit() {}

}

<h2> {{ hero.name }} Details</h2><div><span>id: </span> {{ hero.id }} </div><div><span>name: </span> {{ hero.name }} </div>

Ficheiro heroes.component.html:

index.html contém <app-root></app-root>

AppComponent selector: 'app-root'

template: `<h1>{{title}}</h1><app-heroes></app-heroes>`

HeroesComponent selector: 'app-heroes'

template: `<ul>

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> {{ hero.name }} </li>

</ul>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>`

HeroDetailComponent selector: 'app-hero-detail'

template: `<h2> {{ hero.name }} Details </h2>

<label> name: <input [(ngModel)] = “hero.name” /> </label>`

Componentes de Tour of Heroes

Interpolation (String Interpolation ou Interpolation Binding) {{ . . . }}

. . .export class HeroesComponent implements OnInit {

hero: Hero = {id: 1,name: 'Windstorm’

};

ngOnInit() { }}

<h2> {{ hero.name }} Details</h2><div><span>id: </span> {{ hero.id }} </div><div><span>name: </span> {{ hero.name }} </div>

Ficheiro heroes.component.html:

export class Hero {

id: number;

name: string;

}

Interpolation – permite definir propriedades numa classe de um componente (variáveis,

objetos, arrays, etc.) e comunicar essas propriedades ao template.

One-way binding

from component to template

Property Binding

export class AppComponent implements OnInit {title: string;isUnchanged: boolean;

ngOnInit() { }}

{{ title }}<span [hidden]= "isUnchanged">changed</span>

Ficheiro app.component.html:

[target] = "javascript-code"

• target é o nome da propriedade DOM

• javascript-code é o código que é executado e o resultado atribuído ao target

One-way binding

from component to template

Property binding:

coloca a propriedade de um elemento HTML com o valor da propriedade de um componente.

Equivalente a:<span hidden= {{isUnchanged}}>changed</span>

Property Binding

<img [src]="heroImageUrl"> Propriedade de um elemento

<app-hero-detail [hero]="currentHero"></app-hero-detail> Propriedade de um componente

<div [ngClass]="{'special': isSpecial}"></div> Propriedade de uma diretiva

export class HeroDetailComponent implements OnInit {

@Input(hero) hero: Hero;

}

Event Binding

<button (click)="onSave()">Save</button> Evento de um elemento

<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail> Evento de um componente

<div (myClick)="clicked=$event" clickable>click me</div> Evento de uma diretiva

Classes HeroesComponent, HeroDetailComponent e Hero

export class HeroesComponent implements OnInit {

heroes = HEROES;

selectedHero: Hero;

onSelect(hero: Hero): void {

this.selectedHero = hero;

}

}

export class HeroDetailComponent implements OnInit {

@Input(hero) hero: Hero;

}

export class Hero {

id: number;

name: string;

}

Geração de classes, componentes e serviços

CLI command: Classe: Ficheiro:

> ng new angular-tour-of-heroes

> ng generate class Hero Hero src/app/hero.ts

> ng generate component heroes HeroesComponent src/app/heroes/

> ng generate componente hero-detail HeroDetailComponent src/app/hero-detail/

> ng generate service hero --module=app HeroService src/app/hero.service.ts

> ng generate componente messages MessagesComponent src/app/messages/

> ng generate service message --module=app MessageService src/app/message.service.ts

ng generate class | interface | enum | component | service | module | directive | pipe | guard

Classe HeroService Classe MessageService

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';import { of } from 'rxjs/observable/of';

import { Hero } from './hero';import { HEROES } from './mock-heroes';import { MessageService } from './message.service';

@Injectable()export class HeroService {

constructor(private messageService: MessageService) { }

getHeroes(): Observable<Hero[]> {// Todo: send the message _after_ fetching the heroesthis.messageService.add('HeroService: fetched heroes');return of(HEROES);

}}

import { Injectable } from '@angular/core';

@Injectable()export class MessageService {

messages: string[] = [];

add(message: string) {this.messages.push(message);

}

clear() {this.messages = [];

}}

Classe HeroesComponent Classe MessagesComponent

. . .export class HeroesComponent implements OnInit {

selectedHero: Hero;heroes: Hero[];

constructor(private heroService: HeroService) { }

ngOnInit() {this.getHeroes();

}

onSelect(hero: Hero): void {this.selectedHero = hero;

}

getHeroes(): void {this.heroService.getHeroes()

.subscribe(herois => this.heroes = herois);}

}

import { Component, OnInit } from '@angular/core';import { MessageService } from '../message.service';

@Component({selector: 'app-messages',templateUrl: './messages.component.html',styleUrls: ['./messages.component.css']

})export class MessagesComponent implements OnInit {

constructor(public messageService: MessageService) {}

}

<h1>{{title}}</h1><app-heroes></app-heroes><app-messages></app-messages>

Ficheiro src/app/app.componente.ts:

index.html contém <app-root></app-root>

AppComponent selector: 'app-root'

template: `<app-heroes></app-heroes><app-messages></app-messages>`

HeroesComponent MessagesComponent

selector: 'app-heroes’ selector: 'app-messages’

template: `<app-hero-detail></app-hero-detail>`

HeroDetailComponent selector: 'app-hero-detail'

Componentes de Tour of Heroes