2

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

#Angular
Gustavo Sena
Gustavo Sena

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()

2
39

Comentários (2)

0
Willams Sousa

Willams Sousa

15/01/2021 14:54

Ficou bom, obrigado!

1
José Espedito

José Espedito

22/12/2020 02:21

Bacana. Mandou bem. Parabéns.

https://www.linkedin.com/in/gustavo-sena-57343456

Brasil