Explorar E-books
Categorias
Explorar Audiolivros
Categorias
Explorar Revistas
Categorias
Explorar Documentos
Categorias
com
Agenda
Node JS instalado
Passos:
1 - Instalar o angular-cli
npm install -g @angular/cli
2 - Criar um um workspace
ng new my-app
AppRoot
ComponentA
ComponentB
Formas de binding:
● Interpolation
● Property binding
● Event binding
<input [(ngModel)]="user.name" /> Antes de utilizar o ngModel é necessário importar o módulo Forms
Pipes
Transforma valores dentro das tags em HTML
@Component ({
selector : 'app-birthday' ,
template : `./app-birthday.component.html`
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988
}
Pipes
Customizando um Pipe
Attribute directives
//Exemplo de uma diretiva de atributo
*ngIf
<div *ngIf="condition">Conteúdo</div>
Forms
Angular possui duas formas de trabalhar com formulários:
Template-driven Forms: são formulários mais simples de adicionar ao app que não exige
campos muitos complexos.
Forms
Para poder utilizar os recursos do angular para formulários importar o NgFormsModule
do @angular/forms no appModule
app.module.ts
Forms
Exemplo de um formulário utilizando a abordagem de Template-driven Forms
Componentes podem delegar certas tarefas aos services como buscar dados no servidor,
validar um usuário no login ou simplesmente gerar logs no console.
Injeção de dependências(DI)
São usadas em todo o framework para fornecer aos componentes os serviços e outras
dependências mais.
Para definir um novo serviço usamos o decorator @injectable que fornece todos os
metadados necessários para tornar uma classe injetável para qualquer outra.
constructor(private outroService:outroService){}
ngOnInit(){
console.log( loggerService.getLogger())
getLogger(){
}
return outroService.data
} }
}
Angular Routes
RouterModule
O módulo responsável pelas rotas em angular é uma instância singleton.
import { NgModule } from '@angular/core'; Todas as rotas estão sendo estabelecidas em uma única instância do
import { RouterModule } from '@angular/router'; módulo routing.
import { AppComponent } from './app.component';
dominio.com/draw
@NgModule({
imports: [
RouterModule.forRoot( [
{
path: '',
component: AppComponent
Podemos parametrizar urls.
}, {
{ path: 'draw/:id',
path: 'draw', component: PxGridComponent
component: PxGridComponent },
},
{
Mostra uma página de erro quando não existir a url.
path: '**',
component: PageNotFoundComponent
}
], { initialNavigation: 'enabled' })
],
})
É similar a um componente que marca o ponto do template onde a rota deverá mostrar os componentes para
essa saída.
<router-outlet></router-outlet>
dominio.com/draw Routes
path: 'draw',
component: drawComponent
router-outlet
<app-draw></app-draw>
Angular Routes
Router links
<nav>
<a routerLink="/draw">Draw</a>
</nav>
<router-outlet></router-outlet>
<nav>
<a routerLink="/draw" routerLinkActive="active">Draw</a>
</nav>
<router-outlet></router-outlet>
HTTP
HttpClient é um service class responsável por comunicar com um servidor remoto HTTP.
//produtos.service.ts
getProdutos (): Observable <Produto []> {
return this.http.get<Produto []>(this.produtoUrl );
}
/*Component*/
import {Component } from '@angular/core' ;
@Component ({
selector : 'example-app' ,
templateUrl : './example-app.component.html' ,
})
export class exampleApp implements onInit {
constructor(private produtosService:ProdutosService){}
public produto:Produto;
ngOnInit(){
produtosService.getProdutos().subscribe(produto => this.produto = produto);
}
}
Observables
Um observable é como uma função que retorna um data stream.
Data streams são uma sequência de valores que vão sendo carregados durante um tempo.
i m ???
s
o As
Com
X X
Observables vs Promisses
Promises Observables
const promise = new Promise((resolve, reject) => { const observable$ = new Observable( observer => {
console.log('dentro do promisse'); console.log('dentro do observable');
resolve('resolvido promise'); observer.next('Valor');
}) observer.complete();
});