Post on 09-Jul-2020
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