Você está na página 1de 35

Jonas Padilha • Dev • jonasp@ciandt.

com
Agenda

● O que é o Angular? ● Observables


● Components
● Directives
● Forms
● Services
● Routes
● HTTP
● Modules
● Build
Angular
● Framework Javascript
● Typescript
● Criado pela google
● SPA
Typescript
● Tipos

● Faz uso da tipagem de variáveis e


funções para qualquer dado.

● Ajuda a evitar erros em ambientes de


produção
● Não é substituto do Javascript
Por que usar Angular?
● Rápido setup e construção de uma aplicação
● Modular e flexível
● Cross Platform
● Angular Cli
Como criar um app em Angular?
Estar familiarizado com JavaScript HTML CSS

Uma noção básica em Typescript

Node JS instalado

Passos:

1 - Instalar o angular-cli
npm install -g @angular/cli

2 - Criar um um workspace
ng new my-app

3 - Executar a aplicação 4 - Abrir o browser no endereço: http://localhost:4200


cd my-app
ng serve
Components
Toda aplicação angular começa com pelo menos um componente.

AppRoot

Root component - conecta hierarquicamente um component


ao DOM
AppComponent
@Component () decorator - Identifica a classe abaixo dela como
uma classe de componente e especifica seus metadados.

ComponentA
ComponentB

ComponentAList ComponentADetails ComponentBList ComponentBDetails


Components
@Component({ @Component () decorator - Identifica a classe abaixo
selector: 'app-produto',
dela como uma classe de componente e especifica seus
templateUrl: './app-produto.component.html',
metadados.
//template: '<div></div>''
styleUrls:['./app-produto.component.scss],
@templateUrl () - Caminho relativo do template html
providers: [ DataService ]
}) do componente
export class ProdutoComponent implements OnInit {
@styleUrls () - Caminho relativo ao estilo (css, scss)
} do componente

@providers () - um array de serviços que um


componente pode requerer
Components
Templates e views

Através do templates do componente podemos criar views.

Views possuem uma hierarquia.

Templates é uma maneira em HTML de dizer ao angular como renderizar o


componente.
Components
Template sintaxe

● Similar ao HTML regular


● Manipula o HTML baseado na lógica e estado do App e no DOM.
● Utiliza de alguns recursos:
○ Data binding para coordenar interagir com os dados no
DOM
○ Pipes - Transformam a forma como os dados são
mostrados
○ Directives - Aplicam a lógica para o que precisa é exibido
data binding
Processo que permite os aplicativos exibam valores de dados ao
usuário e responder suas ações.

Formas de binding:

● Interpolation

<span>{{ user }}</span>

● Property binding

<a [href]="imageLink" >Link</a>

● Event binding

<button (click)="onAction()" >click here</a>

● Two-way data binding with ngModel

<input [(ngModel)]="user.name" /> Antes de utilizar o ngModel é necessário importar o módulo Forms
Pipes
Transforma valores dentro das tags em HTML

// Fri Apr 15 1988 00:00:00 GMT-0700 April 15, 1988

<span>{{ birthday | date }}</span>

<span>{{ birthday | date | uppercase }}</span>

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

@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

import { Pipe, PipeTransform } from '@angular/core' ;


/*
* Adicionar um símbolo ao valor de um número
* Takes an exponent argument that defaults to 1.
* Usage:
* value | priceNumber:"symbol"
* Example:
* {{ 2 | priceNumber:"R$" }}
* formats to: R$ 2
*/
@Pipe({name: ''})
export class PriceNumberPipe implements PipeTransform {
transform (value: number , symbol ?: string ): string {
return `${symbol} number`;
}
}
Directives
Classe que modifica estrutura ou atributos do DOM e modelos de
dados de um componente.

Utiliza o decorator @Directive.

Basicamente existem dois tipos de diretivas:

Attribute directives
//Exemplo de uma diretiva de atributo

<p textoAzul >Texto</p> @Directive({


selector: '[appTextoAzul]',
Structural directives })
export class TextDirective implements OnInit {
constructor( private: el: ElementRef){
*ngFor el.nativeElement.style.backgroundColor = 'yellow';
}
<li *ngFor="let item of itens; ">{{ item.name }}</li> }

*ngIf

<div *ngIf="condition">Conteúdo</div>
Forms
Angular possui duas formas de trabalhar com formulários:

Reactive Forms são formulários mais robustos, escalonáveis, reusáveis e testáveis.

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

Uma vez importado o FormsModule o angula detecta a


<form #formRef="ngForm" tag form e aplica as suas próprias funcionalidades,
(ngSubmit) ="onSubmit(formRef) "> fornecido total controle de mapeamento de dados,
<div class="form-group" > validação e submissão
<label for="name">Name</label>
<input
type="text" class="form-control"
import {Component } from '@angular/core' ;
id="name" required import {NgForm} from '@angular/forms' ;
[(ngModel)]="name"
name="name"> @Component ({
selector : 'example-app' ,
</div> templateUrl : './example-app.component.html' ,
<button type="submit">Submit</button> })
</form> export class SimpleFormComp {

name: string = '';

onSubmit (f: NgForm) {


console .log(f.value);
console .log(f.valid);
}
Services
Services são categorias que abrangem qualquer valor ou função que o app precise.

Possuem um único objetivo bem definido.

Angular distingue componente de serviço a fim de modularidade.

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.

Services são singletons.


Como prover um
service?(provider)
Angular fornece o uso de providers para tornar o serviço disponível
para a aplicação.

É um objeto que define como o serviço será oferecido nas


dependências.

Um novo serviço pode ser registrado nos seguintes níveis:

root: injetor a nível de aplicação e mais comum na maioria das


apps

platform: injetor compartilhado por outras aplicações.

any: qualquer módulo ou aplicação


Criando um service
Exemplo de uso:

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


//logger.service.ts @Component ({
selector : 'example-app' ,
@Injectable({ templateUrl : './example-app.component.html' ,
providedIn: 'root' providers: [ LoggerService]
}) })
export class exampleApp implements onInit {
export class LoggerService { constructor(private loggerService:LoggerService){}

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' })
],

})

export class PixelAngstAppRoutingModule {}


Angular Routes
Roteamento são uma parte integral de qualquer SPA (single page application)

Roteamento é o próprio estado da aplicação.

Dados podem ser extraídos do backend com base na url.

Componentes são carregados com base na rota estabelecida.


Angular Routes
Router Outlet

É 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

É similar atributo href, mas com a vantagem de não reiniciar a página.

<nav>
<a routerLink="/draw">Draw</a>
</nav>
<router-outlet></router-outlet>

Active Router links


Muito útil! Informa página atualmente ativa e recebe uma classe css de atributo.

<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.

As principais características que mais se destacam deste service são:

Habilidade de assinar os objetos das respostas

Fácil uso do tratamento de erros

Intercepção de request e response


HTTP
setup
HttpClientModule é o módulo que precisamos importar. Assim podemos injetar o serviço HttpClient.

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


import { BrowserModule } from '@angular/platform-browser'; import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
@Injectable()
@NgModule({ export class ConfigService {
imports: [ constructor(private http: HttpClient) { }
BrowserModule, }
// import HttpClientModule after BrowserModule.
HttpClientModule,
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
HTTP
Todos os métodos do HttpClient retornam observables da biblioteca RXJS. Em geral um
observable pode retornar múltiplos valores ao longo da requisição.

//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.

Observables foram introduzidos na versão 2 do angular


Observables são "lazy collections" de múltiplos valores em linha do tempo.
Angular aplica observables no sistema de eventos e serviços de HTTP.
Um observable só será executado se tiver alguém interessado no seu
valor.
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

Observables foram introduzidos na versão 2 do angular


Observables são "lazy collections" de múltiplos valores em linha do tempo.
Angular aplica observables no sistema de eventos e serviços de HTTP.
Um observable só será executado se tiver alguém interessado no seu
valor.
Observables
Vamos comparar observables um newsletter qualquer.
Para cada inscrito uma newsletter é criada.
Elas são enviadas somente aos inscritos.
Observables assim como as newsletters podem múltiplos valores ao longo do tempo.
O Remetente decide quando o inscrito recebe, mas tudo o que o inscrito precisa fazer é esperar
chegar na caixa de entrada.
Observables
Vamos comparar observables um newsletter qualquer.
Para cada inscrito uma newsletter é criada.
Elas são enviadas somente aos inscritos.
Observables assim como as newsletters podem múltiplos valores ao longo do tempo.
O Remetente decide quando o inscrito recebe, mas tudo o que o inscrito precisa fazer é esperar
chegar na caixa de entrada.
O inscrito também pode cancelar a inscrição e não receber mais emails na sua caixa de entrada.

X X
Observables vs Promisses
Promises Observables

retornam sempre o mesmo valor. Múltiplos valores


Imediatos Inicialização controlada
Sempre assíncrona assíncrona e síncrona
Não pode cancelar Cancela
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();
});

console.log('antes da promise'); console.log('antes do observable');

promise.then(res => console.log(res)) observable$.subscribe({


next: console.log,
complete: () => console.log('fim de papo para esse observer')
//saída
})
1- dentro da promisse
2- antes da promisse //saída
3- resolvido promisse 1 - Antes do observable
2 - Dentro do observable
3 - Hello
3- fim de papo para esse observer
Obrigado!

Você também pode gostar