Anotações do curso de Angular

Vou compartilhar minhas anotações de um curso de Angular que fiz esta semana, como são mais alguns conceitos, é um artigo mais curto.

Angular

O angular é dividido em módulos, onde cada um deles é uma “parte” do código. Você pode importar/exportar quantos módulos desejar através do componente.module.ts. Ele é construído para ser uma SPA (Single Page Application), ou seja, consiste em uma única página.

Anatomia de um módulo

• Declarations: são declarados todos os componentes (components) que fazem parte daquele módulo, também é onde são declaradas as diretivas e os pipes.
• Exports: colocando o código de um component dentro do exports, você poderá utilizar aquele módulo em outras partes do seu código. É possivel exportar o modulo inteiro ou apenas parte dele
• Imports: É onde são importados outros módulos dentro daquele que você está utilizando.
• Providers: é onde são declarados os services.
• Bootstrap: é onde definimos o componente principal, que será carregado quando a aplicação for iniciado (app component).

Elementos do Angular

• Diretiva de atributo foca em alterar a aparência (css) e o comportamento (diretiva que faz determinada ação no backend) de um elemento, componente ou outra diretiva. Ou seja, ele pode alterar a aparência do html ou uma ação, podendo ser usados em vários trechos de códigos diferentes.
• Diretiva estrutural altera o layout adicionando e removendo elementos da DOM (altera o HMTL). Ela é representada por um * na frente (como o *ngIf e *ngFor).
• O Property Binding faz a comunicação entre o HTML e o Typescritpt da aplicação, para ativá-lo, basta colocar o elemento entre colchetes em uma tag HTML. Por exemplo, em <table [dataSource]=“products”></table>, o html procurará um atributo no Component que tenha o mesmo nome (products) e irá utiliza-lo.
• O Event Binding serve para ligar um evento no HMTL a um método que está dentro de um componente (typescript), utilizando os parênteses. Por exemplo, <button (click)=”createProduct()”></button> e createProduct(): void {}
• No one way data binding, a informação é passada de um componente (typescript) para o html. Por exemplo, <input [value]=”nome”> e nome: string (no Componente), se no componente o nome for trocado para “Camila”, ele irá também alterar o nome exibido no html.
• No two way data binding, se o nome for alterado no html, o typescript será alterado e se alterar no typescript, o html que será atualizado. Para ativá-lo, basta colocar no html o [(ngModel)]=”nome”.
• O decorator (similar a anotação do java) é um padrão de projeto que vem com objetivo evitar herança e diz que determinada classe exerce algum papel dentro do framework (@Component — Componente, @Directive — Diretiva).
• Rotas servem para redirecionar os componentes para determinadas páginas. Por exemplo, em <a routerLink=”/products”>Produtos</a> o link vai procurar o caminho products nas rotas, que será declarada assim: const routes: Routes [{ path: “products”, componente: ProductCrudComponent }]; O seletor <router-outlet><router-outlet> é responsável por encontrar o path de uma rota e substituir o trecho pelo Componente respectivo.
• Os Pipes são processamentos feitos em variáveis, fazendo uma interpolação das chaves duplas {{ }}. É utilizado para exibir o valor de uma variável no html. Por exemplo: <p>O vencimento é {{ produto.vencimento | date }}</p>, onde date sinaliza que a resposta do banco será convertida para o formato de data.
• O Observer é um padrão orientado a evento. O subject é quem tem a capacidade de monitorar e detectar quando um evento acontece e os observer são os códigos que estão interessados em um determinado evento, eles precisam se registrar no subject dizendo que ele está interessado no evento (pode existir muitos observer). Depois do registro, o subject vai monitorar o evento, e quando ele detectar que o evento aconteceu, ele vai notificar todos os observadores que aquele evento ocorreu. Ou seja, ela espera o evento acontecer para agir (não fica monitorando toda hora o evento até ele acontecer).
• Callback é quando passamos uma função como parâmetro de outra função, ativando-a quando ocorrer um determinado evento.
• O promises é um objeto que representa a eventual conclusão ou falha de uma operação assíncrona. Mas só é possível usá-lo uma única vez (não sendo possível reutilizá-lo). Já o Observable, é similar as promisses, mas é possível utilizá-lo diversas vezes, com ele dá para usar com uma stream de dados e ele possui diversos operadores (map, filter, etc).
• Os Services são classes que têm como principal objeto organizar e compartilhar métodos e dados entre os componentes.
• Injeção de dependência é um padrão no qual as classes recebe as dependências de uma fonte externa ao invés de criar por conta própria. Por exemplo, um componente carro recebe as dependências do componente motor. No angular, ela é chamada pelo decorator @Injectable