Angular

Framework Angular, teoria e prática
Voltar

Criar projeto:

Instalação: sudo apt install nodejs npm && sudo npm install -g @angular/cli
  1. Criar projeto: ng new nomeProjeto
  2. Executar projeto: ng serve

Estrutura:

  • node_modules: Dependências do projeto
  • src: Códigos da aplicação
    • app: Onde ficam componentes (Compostos por .ts (Controller e Model), .html (View), .css e testes (.spec.ts)), services, etc
      • app.component.ts: Configurações/programação do componente
      • app.component.spec.ts: Testes do componente
      • app.component.html: Templates visuais
      • app.component.css: Estilo do componente específico
    • index.html: Html inicial, que redirecionará o home público
    • styles.css: Estilo global, para todos os formulários
    • assets: Onde ficam imagens estáticas e demais anexos
    • environments: Ambientes da aplicação (Desenvolvimento, produção, etc)

Componentes:

  1. Criar componente: ng generate component components/nomeComponent
    • Com isso, o mesmo será importado em 'app.module.ts'
  2. Importar o selector do componente em 'app.component.html': <app-nomeSelectorComponente></app-nomeSelectorComponente>

Interpolação de dados:

Imprimir variáveis do 'ts' no 'html'. Isso ocorre via {{ nomeVariavel }}.


Compartilhar dados:

O input receberá, no componente filho, variável do componente pai.

  1. Criar a variável, em 'app.component.ts', na class 'AppComponent'
  2. Criar a variável em 'ts' do componente, no 'OnInit'
  3. Referenciá-la, em 'app.component.html', com <app-nomeSelectorComponente [nomeVariavel]="nomeVariavel"></app-nomeSelectorComponente>
  4. Inserir o 'Input' no import em 'ts' do componente
  5. Em 'html' do componente, a mesma pode ser referenciada por {{ nomeVariavel }}

Diretivas:

Responsáveis por realizar ações diversas ao 'html' do componente, cuja sintaxe é [ngNomeDiretiva]. Entre muitas, tem-se a ngStyle (Estilos inline), ngClass (Atribui classes ao html).


Condicionais:

if-else no 'html', cuja sintaxe é *ngIf.


Eventos:

Gatilhos, como 'click', para execução de métodos advindos da classe, cuja sintaxe é (click)="algumaFuncao()".


Emitir eventos:

O output receberá, no componente pai, evento do componente filho. Exemplo (emit)="onEmit()".

  1. Criar, no 'ts' do componente filho, evento
    • Chamá-lo no 'html' do componente filho
  2. Inserir o 'Output' e 'EventEmitter' no import em 'ts' do componente filho (EventEmitter também, pois é evento, não somente o dado em si)
  3. Inserir evento no componente filho, referenciando-o acima com inicialização do mesmo em '@Output()' e após, no mesmo arquivo, criar função de chamada do mesmo
  4. Criar, no 'html' do componente pai, chamada do evento @Output() do filho
    • Criar, no 'ts' do componente pai, função de chamada do seu 'html'

Loops:

for no 'html', cuja sintaxe é *ngFor="let item of items", para renderização de listas.


Interfaces:

Toda entidade possui interface, onde todas as propriedades do BD da entidade serão refletidas na interface, simbolizando assim as entidades no sistema. Ficam geralmente dentro de 'app/'. Cria-se manualmente, cujo padrão é 'NomeClasse.ts'.

  1. Cria-se a interface
  2. Importá-la (import) no 'ts' do componente

Pipe operators:

Possibilita modificar strings no próprio 'html' do componente, dispensando códigos no 'ts' e 'css' do mesmo, cuja sintaxe é {{ dado | algumPipeOperator }}.


Two way data biding:

Alterar propriedades (props) do 'html' om preenchimento de inputs, cuja sintaxe é [(ngMode)]="nomeImput", seguido da prop 'name' e seu mesmo valor.

  1. Importar (import) 'FormsModule' e em 'imports', em app.module.ts
  2. Informar ngModel nos inputs
  3. Informar props no 'ts' do componente

Services:

Onde ficam as requisições para APIs. Após o frontend tratado nos componentes, repassa-se ao método específico do service para tratar com o backend. A remoção visual fica no 'ts' do componente, o método no service fará a requisição ao backend (O exemplo abaixo foi feito tudo no service).

  1. Criar service: ng generate service services/nomeService
  2. Importá-lo (import) no 'ts' do componente relacionado, modificando o constructor no mesmo
  3. Criar método no 'ts' do componente
  4. Criar ação no 'html'
  5. Criar método no service, importando (import) a interface ao mesmo e, após, relacionando-o ao método no 'ts' do componente

Angular Router:

Navegação entre páginas da aplicação. Todo o processo pode ser criado automaticamente no início do projeto. Abaixo, seguem os passos manuais.

  1. Criar arquivo de routes 'app-routing.module.ts' na pasta 'app/'
  2. No arquivo de routes, importar (import) NgModule, RouterModule, Routes
  3. Definir routes em uma const, além de importar os componentes
  4. Importar (import) o 'AppRoutingModule' em 'app.module.ts'
  5. No 'app.component.html', informar <router-outlet></router-outlet> ao invés dos demais componentes desnecessários
  6. No Browser, seguindo o projeto5 abaixo, informando 'url/list', mostrará o componente da listagem

Requisições HTTP:

Realizar requisições HTTP nos services. No projeto6 será realizada simulação com API genérica json-server.

  1. Instalar json-server para simular API backend: npm i json-server
  2. Na pasta raíz, criar arquivo 'db.json'
  3. Em 'package.json', parte de 'scripts', informar "server"
  4. Executar json-server: npm run server
    • Conforme projeto6, pode-se acessar API json-server em 'localhost:3000/animals'

  5. Importar (import) HttpClientModule em 'app.module.ts'
  6. Conforme projeto6:
    1. Fora trabalhado no componente 'list-render.component' (Requisição do component passar pelo service)
    2. No 'ts' do component, informar método no constructor e 'getAnimals()'
    3. No service 'list.service.ts', informar imports 'HttpClient', 'HttpHeaders' e 'Observable', e método 'getAll()'

Dynamic routes:

Carregar dado específico de API, onde o id do mesmo aparecerá na url.

  • Conforme projeto6:
    1. Cria-se o componente e informa-se sua route em 'app-routing.ts'
    2. Cria-se o link de acesso no 'html' do list-render
    3. Insere a propriedade 'id' na interface 'Animal.ts'
    4. No 'ts' do item-detail, importar 'AtivatedRoute', interface 'Animal' e 'ListService'. Após, informar códigos no arquivo
    5. Criar método 'getItem()' no service
    6. No 'html' do item-detail, informar código

Exclusão de dados HTTP:

Realizar a remoção de dados via HTTP.

  • Conforme projeto6:
    1. (frontend) No 'ts' do list-render, modificar método 'removeAnimal()'. Removerá visualmente.
    2. (backend) No service 'list.service.ts', modificar método 'remove()'. Enviará requisição delete de fato.

Projetos:

  1. Introdução, componente, interpolação de dados, compartilhar(input) dados: Acesse
  2. Diretivas, conficionais, eventos, emitir(output) eventos, loops: Acesse
  3. Interfaces, Pipe operators, Two way data biding: Acesse
  4. Services: Acesse
  5. Angular Router: Acesse
  6. Requisições HTTP, Dynamic routes, Exclusão de dados HTTP: Acesse

  7. Projeto prático (Moments): Acesse

Projeto prático (Moments):

Ex funcionamento com API (Remove): No 'html' do component o usuário clica no botão Excluir. Isso levará ao método no 'ts' do mesmo component, que se comunicará com o método no 'ts' de seu Service. Esse se comunica diretamente com a API Backend.

    API Backend:
  1. Baixar a pasta da apiBackend e, dentro dela, instalar dependências: npm install
  2. Gerar key: node ace generate:key
    1. Criar cópia do arquivo '.env.example', depois renomeá-la em '.env'
    2. Informar nova key neste arquivo
  3. Executar migrations: node ace migration:run
  4. Executar API: node ace serve
  5. Testar funcionamento, 'localhost:3333/api/moments', que deverá mostrar array 'data'
  6. No Postman, criar nova request para testar inserção:
    • Tipo 'Post'
    • URL: {{URL}}/moments (Criar variável URL, sendo 'localhost:3333/api')
    • Em 'body', selecionar 'form-data', informar campos:
      • Key: title, Value: para deletar
      • Key: description, Value: alguma descricao
      • Key: image (Tipo 'file'), Value 1_intro.png
    • Enviar requisição (Send), deverá retornar JSON com mensagem de sucesso
  7. Verificar, no browser, 'localhost:3333/api/moments' deverá retornar JSON com moment inserido

    8. Projeto Angular
  8. Criar projeto: ng new moments
    • Colar pasta com imagens, e outras imagens em 'assets'
  9. Alterar 'html' do app.component
  10. Criar componentes:
    • Header: ng generate component components/header
    • Footer: ng generate component components/footer
    • Página about: ng generate component components/pages/about
    • Página home: ng generate component components/pages/home
    • Página new-moment: ng generate component components/pages/new-moment
    • Página moment: ng generate component components/pages/moment
    • Página edit-moment: ng generate component components/pages/edit-moment
    • Formulário moment-form: ng generate component components/moment-form
    • Mensagens de feedback: ng generate component components/messages
      • Biblioteca de ícones 'fontawesome': ng add @fortawesome/angular-fontawesome (Selecionar os 3 pacotes basic)
  11. Esqueleto e estilização:
    1. Preencher 'html' dos componentes header, footer, new-moment, moment-form, pages/moment e pages/edit-moment
    2. Programar 'ts' do moment-form e new-moment
    3. Preencher CSS dos componentes header, footer, new-moment, pages/moment e pages/edit-moment
    4. Preencher CSS geral, em styles.css e em app.component.css
  12. Configurar routes em 'app-routing.module.ts'
  13. Criar interfaces, services e configurar módulos:
    1. Em 'app.module.ts', importar módulos HttpClientModule, FormsModule e ReactiveFormsModule
    2. Em 'app/' criar interfaces 'Moment.ts', 'Comment.ts' e 'Response.ts' com seus códigos
    3. Criar Service moment: ng generate service services/moment
    4. Criar Service comment: ng generate service services/comment
    5. Criar Service messages: ng generate service services/messages
  14. Criar mensagens de feedback:
    1. No 'html' do app.component, informar app-messages
    2. No 'html' do componente messages, informar conteúdo
    3. No 'ts' do componente messages, fazer imports e informar código restante
    4. No 'css' do componente messages, informar códigos
    5. No 'ts' do service messages, informar código restante
  15. Implementar ReactiveForms no moment-form ('html' e 'ts')
  16. (Add) Enviar dados:
    1. No 'html' do componente pai, new-moment, informar 'onSubmit'
    2. No 'ts' do new-moment, informar 'onSubmit()', imports e restante
    3. No 'ts' do moment-form, informar @Output, imports, informar método 'submit()'
    4. Em 'environments.ts', informar URLs da API
    5. Enviar dados para o Service 'moment', para após, inserir no BD:
      1. No 'ts' do momment.service, fazer imports e restante do conteúdo
        • Pois no 'ts' do new-moment, criou-se método async que enviará os dados para esse método no service, que os enviará para a API Backend
    6. Fazer teste de submissão e verificar em 'Network', em 'Fetch/XHR' se a requisição ocorreu com sucesso
  17. (Get) Resgatar dados:
    1. No 'ts' do home, informar código restante
    2. No 'ts' do service moment, criar método que pegará dados da API Backend
  18. (Search) Pesquisar dados frontend:
    1. No 'html' do componente home, informar form de busca
    2. No 'ts' do componente home, informar método 'search()'
  19. (Detail) Visualizar dado específico:
    1. No 'ts' do componente pages/moment, iniciar constructor e ngOnInit
    2. No 'ts' do service pages/moment, criar método que pegará dado da API Backend
  20. (Remove) Remover dados:
    1. No 'ts' do componente pages/moment, criar método removeHandler
    2. No 'ts' do service moment, criar método removeMoment
  21. (Edit) Editar dados:
    1. No 'ts' do componente pages/edit-moment, preencher método ngOnInit, demais pormenores e criar método editHandler
    2. No 'ts' do service moment, criar método updateMoment
  22. (Other) Add comentários:
    1. No 'ts' do componente moment, criar método onSubmit e pormenores
    2. No 'ts' do service comment, criar método createComment e pormenores

Elaborado por Mateus Schwede
ubsocial.github.io