Resumo Angular 8 - parte 1

Boa noite pessoal!

Fiz um pequeno resumo do curso introdutório ministrado pelo Wesllhey Holanda de como instalar, configurar e uma overview completa sobre as funcionalidades as quais temos acesso ao utilizar o Angular 8 para nossas aplicações Front-End.

Entendendo estrutura de arquivos e pastas

Vemos que já existem alguns arquivos dentro da pasta da nossa aplicação, como:

Arquivos iniciais Angular

O arquivo angular.json contem as informações globais da nossa aplicação, como os estilos globais que serão utilizados por toda aplicação, o assets estáticos da aplicação como imagens etc. ou até scripts que podemos vir a integrar posteriormente.

Estilos globais

Como o angular utiliza o padrão SPA (Single Page Application) para a criação de páginas, temos também no arquivo angular.json os caminhos da página principal e do hook principal da aplicação.

Caminhos principais da aplicação

O arquivo main.ts, dentro da pasta src, recebe o Módulo AppModule que será responsável pela inicialização do nosso aplicativo.

Estrutura básica de um arquivo main.ts

Dentro da pasta app, encontramos mais arquivos default da nossa aplicação. Dentre eles temos o app.module.ts, que será lido pelo outro arquivo acima (main.ts) e ele (app.module.ts) que carregará nosso “componente pai” [ AppComponent ], e a partir desse componente que iremos enxertar os componentes que criaremos mais a frente na nossa aplicação.

Estrutura básica de um arquivo app.module.ts

Já na pasta node_modules ficarão instaladas todas as dependências atuais e futuras que possamos vir a instalar.

Estrutura básica da pasta node_modules

Trabalhando com módulos e componentes

Trabalhar com Angular é trabalhar com Módulos e [ Componentes ], mas o que são esses Módulos e [ Componentes ] ?

Fazendo uma analogia com uma página web, podemos entender o app.module.ts como nossa web Page completa, ou seja, todos recursos que podemos utilizar nessa página corresponde ao app.module.ts, enquanto os componentes podem ser entendidas como a parte visual desse recurso que podemos utilizar. 

Resumidamente, os Módulos são como as funcionalidades que os [ Componentes ] visuais realizarão.

Pegando o exemplo do nosso app.module.ts, temos o seguinte contexto:

Arquivo app.module.ts default settings

Sendo o app.module.ts o nosso Módulo raiz, podemos ver que dentro do Decorator ( função reservada do Typescript para atribuir metadata a alguma classe, método, parâmetro etc.) @NgModule, temos a declaration AppComponent, que estará sendo utilizado por esse Módulo ( app.module.ts ).

Já dentro do arquivo app.component.ts podemos ver que 

Arquivo app.component.ts default settings

o Decorator@Component recebe alguns parâmetros que indicarão ao Angular que arquivos serão utilizados para a estilização desse componente ( styleUrls: [’./app.component.css’] ) ou o template html que será utilizado ( templateUrl: ‘./app.component.html’ ). 

O parametro selector indicará ao Angular qual nome da “tag html” ( o termo certo seria diretiva, mas para simplificar, chamaremos de tag html ) que poderá ser utilizada no arquivo index.html na root do nosso projeto para aplicar o AppComponent ao arquivo index.html ( nesse caso, a tag que usaremos no index.html será <app-root></app-root> ).

Interpolação e One / Two way Data Binding

Ainda no contexto do nosso arquivo app.component.ts, podemos ver o seguinte cenário

Aqui temos uma exportação do AppComponent com o atributo title = ‘test-proj’; que, indo até o arquivo app.component.html, podemos ver que foi usado da seguinte maneira

Arquivo app.component.html default settings

Essa forma de declaração de atributo exportado junto a class AppComponent do arquivo app.component.ts é o que se chama no Angular de INTERPOLAÇÃO, onde por meio do uso de chaves duplas, conseguimos utilizar o valor do atributo especificado anteriormente.

No contexto do SPA default do Angular, esse valor aparecerá na nossa página no seguinte local

Exemplo de interpolação no contexto do View

No Angular também temos a possibilidade de utilizar os conceitos de One way Data-Binding e Two way Data-Binding.

No One way Data-Binding, podemos interpolar dados dos Componentes para nossa viewport através de Interpolação, como vimos no exemplo anterior, de Property Binding, Attribute Binding, Class Binding, Style Binding e Event Binding.

Para melhor compreendermos essas trocas de dados entre Módulos e View, iremos até nosso app.component.html e apagar todo conteúdo dentro do arquivo.

Exemplo interpolação no contexto do app.component.html

Deixando apenas a Interpolação acima, veremos em nossa página apenas 

Exemplo de interpolação no contexto do View 

Podemos definir um outro tipo de One way Data Binding como o Property Binding, através do código abaixo

Exemplo de Property Binding no contexto do app.component.html

Perceba que ainda no contexto do app.component.html, usamos agora uma tag <span [innerText]=” title ”></span>, onde ao utilizar os colchetes estamos informando ao Angular que queremos utilizar a propriedade innerText da tag span para receber o valor do atributo exportado do arquivo app.component.ts, tendo o seguinte resultado na nossa View

Exemplo de Property Binding no contexto do View

Podemos também utilizar essa possibilidade de One way Databind com alguns Módulos reservados do Angular, como abaixo

Para podermos utilizar o Módulo ngModel, devemos importar ele no arquivo app.module.ts

Voltando para o contexto do View, veremos

Vendo assim que conseguimos dar um bind do valor do atributo title = ‘test-proj’, do arquivo app.component.ts, para que seja utilizado junto a nossa tag input do arquivo app.component.html, fazendo assim um One way Binding de Módulo e exibindo na nossa View o valor desse atributo.

Quando pensamos no contexto de Two way Data Binding, podemos não apenas exibir esses valores dos atributos mas também atualizá-los a medida que alteramos eles na nossa View, como veremos abaixo

Utilizando agora de colchetes e parênteses, veremos que a medida em que alteramos os valores do campo da tag input na nossa View, esses valores mudaram também na nossa tag span e na Interpolação da primeira linha