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 bootstrap carrega 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 usar bootstrap: [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 heroes this.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>
