Introdução ao angular: Conceitos e função de componentes

Segue um breve RESUMO montado segundo o módulo Introdução ao Angular 8, espero que ajude no esclarecimento de dúvidas. Até logo!

O angular CLI serve para agilizar o gerenciamento da aplicação, pode ser usado para criar o projeto, configurar componentes, configurar rodas e criar guards.

Características:

·        Muito útil na produtividade

·        Ajuda a diminuir a aplicação uma vez que só importamos os módulos que vamos utiilizar

----------------------------------------------------------------------------------------------------------------

Package.json: Contém todas as dependências da aplicação, à medida que instalar uma nova dependência, ela vai aparecer no arquivo.

Na parte de scripts pode-se definir como vai ser a inicialização e como adicionar mais recursos.

O arquivo angular.json contém as configurações globais da aplicação, também define o arquivo que vai iniciar a aplicação, fazendo o SPA.

Assets contem a parte estática da aplicação, ou seja, imagens ou qualquer outro arquivo estático ou inerente a aplcicação.

Em styles se define os estilos globais ou que seja propagado para todos os componentes. Da mesma forma funciona para scripts.

O index é a página da aplicação, o angular usa o SPA – Single Page Application, nesse padrão toda a aplicação está envelopada em uma única página e pode haver uma série de componentes que serão agrupados de maneira direta ou indireta dentro de um componente. O index define a página base da aplicação.

Main faz o bootstrap da aplicação, como se fosse um ‘hook’, ‘gancho’ para chamar alguma propriedade de inicialização da nossa aplicação dentro do angular.json. Parecido com o método main em java.

               Espera receber um módulo raíz da aplicação, chama o AppModule que se encontra dentro da pasta App.

A pasta node_modules contém todas as dependências da nossa aplicação.

Qualquer estilo que é adicionado a um componente não foge para o outro. Se quiser compartilhar esse CSS com outros componentes pode adicionar novos CSS globais ou fazer configurações no angular.json para adicionar novas folhas de estilo para a nossa aplicação

app.module.ts é lido dentro do main.ts e é a partir dele que vai ser feita a leitura do componente pai.

O componente pai é responsável por envelopar todos os componentes que serão criados, esse componente é lido em index,html. Os html’s que forem sendo criados serão adicionados ao html raíz através do <app-root> que faz referência ao componente pai.

               ng serve: carrega todo o search no main.ts e todos os componentes adicionais fazendo referência no módulo raiz, para testar vamos na porta 4200 em localhost no navegador, pois o angular CLI usa essa porta como padrão.

Por padrão o angular sempre vai ter um módulo raiz que engloba todos os outros módulos.

Módulo é um limitador de contexto, onde todos os outros módulos dentro dele são limitados por esse contexto.

Uma casa seria um módulo raiz, os cômodos seriam módulos dentro desse raíz e os objetos dentro de um quarto os componentes.

Os componentes são aquilo que é visual no módulo - Ex: Módulo que representa compra, produtos e login.

O selector gera uma tag que pode ser usada em qualquer lugar. Ex: <app-course-manager><-app-course-manager>

Interpolação: É quando se quer exibir o valor de uma propriedade do componente do template do componente.

Um template no angular tem todos os recursos html assim como outros templates, nesse caso a interpolação é um deles.

Ø appmodule.ts

Ø app.componente.html

One-way-databind: Entre colchetes, só vai exibir, não atualiza o valor da propriedade.

Two-way-databind: Entre colchetes e parenteses. Quando altera o valor da propriedade, ele vai atualizar em todos os lugares que estiver usando o component e alterar o valor.

/* react: O retorno de uma função retorna um html (Fortalece o Javascript)

angular: Fortalece o HTML. */

ngModel: Atribui a relação de um input com um componente.

Toda vez que criar um componente, tem que declarar no módulo que corresponde ao mesmo

OnInit - Assim que o componente inicializar, chama um métódo de hook e podemos fazer uma alteração na sua inicialização. Método ngOnInit();

OnChange - Assim que o valor for alterado, o valor será passado para o componente, pois a informação pode ser assíncrona, já que usaremos uma requisição HTTP. Método ngOnChanges()