Baseado nas minhas anotações da disciplina da graduação

Angular

O Angular iniciou como um projeto pessoal de Miško Hevery para facilitar o trabalho de designers que não conheciam programação a fazer alterações nas telas das aplicações usando basicamente HTML.

O nome foi baseado nos sinais < e > (angle) utilizados nas suas tags (NG-CONF, 2014).

Sua primeira versão se chamava AngularJS e foi desenvolvida e mantida pelo Google até o desenvolvimento da nova versão. Atualmente ainda é mantida, mas com suporte limitado para questões relacionadas à segurança (Long Term Support) até 31 de dezembro de 2021 (Angular, 2021d).

Desde seu início, o AngularJS foi desenvolvido em JavaScript para ser utilizado no lado cliente (Angular, 2021b). Com a versão 2.0, o AngularJS foi totalmente reescrito e passou a ser chamado somente de Angular; passou também a ser desenvolvido utilizando TypeScript como linguagem padrão.

Uma aplicação Angular necessita ser compilada, e por meio dessa compilação é gerado um código JavaScript que pode ser executado diretamente pelos navegadores.

MEAN (MONGODB, EXPRESS.JS, ANGULAR, E NODE.JS)

As tecnologias têm o seguinte objetivo (>IBM, 2019):

a. MongoDB: base de dados NoSQL open-source que utiliza uma estrutura semelhante ao JSON para armazenar os dados.

b. ExpressJS: framework que possibilita o desenvolvimento de aplicação no servidor usando NodeJS.

c. NodeJS: ferramenta que possibilita a execução de JavaScript fora do ambiente de um navegador.

d. Angular: framework que possibilita o desenvolvimento de aplicações SPA.

Com a utilização do JavaScript, tags personalizadas podem ser criadas, bem como constar no DOM e terem atributos e funcionalidades específicas (Custom HTML, 2021). Para construir uma tag personalizada válida, seu nome deve ter mais de uma palavra com um traço. Esse tipo de tag personalizada é utilizada pelo Angular ao definir pontos do documento HTML que terão informações dinâmicas.

CONTROLE DE INTERFACE

O Model View Controller – MVC (ou “Modelo, Visão e Controlador”) é uma forma de organizar o código de maneira a separar a parte visual que será apresentada ao usuário do restante do código da aplicação, de forma que, ao fazer ajustes na visualização das informações ou do layout da tela, o impacto no restante do código da aplicação seja o mínimo.

O padrão MVC propõe que o código seja organizado com base em três grupos (Matos; Zabot, 2020, p. 196; martinFowler.com, 2006).

O model (“modelo”) reúne o código utilizado para processar as regras principais do programa. É a parte do aplicativo que vai executar as funcionalidades a que o sistema se propõe;
O view (“visão”) é a parte do aplicativo que formatará os dados para visualização do usuário. Os componentes visuais (botões, menus, formulários, figuras) serão exibidos nessa parte do padrão MVC;
O controler (“controlador”) é a parte do código que recebe os dados que o usuário selecionou, digitou ou clicou na interface e encaminha para a parte do aplicativo que vai processar a informação. O controlador vai decidir se apresenta algo na tela (view) ou executa uma função (model).

No caso de desenvolvimento web, considerando que a parte visual é montada com HTML, o MVC adiciona mais uma vantagem que é a possibilidade de um designer web (que não conhece programação) poder trabalhar no layout HTML e no desenvolvimento de opções visuais sem interferir na codificação.

As primeiras interfaces de sistemas eram executadas em um fluxo em que o programa exibia uma questão para o usuário, o usuário respondia e, com base no tipo de resposta do usuário, o programa executava algum procedimento. O programa é que controlava cada etapa da execução.

Quando temos um código que está separado das funcionalidades que estão sendo desenvolvidas para a aplicação, e que chama essas funcionalidades por meio da estrutura montada para gerenciar a execução dos códigos, estamos invertendo o controle de execução (martinFowler.com, 2004; 2005).

A inversão de controle (IoC, em inglês) é uma das características fundamentais dos frameworks de aplicações (martinFowler.com, 2004). Os frameworks representam uma estrutura básica para o desenvolvimento dos sistemas, em que o desenvolvedor vai acrescentando trechos de código específicos da aplicação e o framework gerencia a execução desses códigos.

Uma forma de inversão de controle é conhecida como injeção de dependência (Dependency Injection), em que os códigos a serem executados são chamados por um objeto controlador, deixando a aplicação mais genérica (martinFowler.com, 2004).

O framework Angular utiliza a injeção de dependência para combinar os códigos desenvolvidos com o esqueleto do framework.

A navegação entre as telas dos sistemas web deve ser estruturada de forma que o usuário possa clicar em um link e o sistema apresenta a tela ou executa o procedimento correspondente. Para isso, os frameworks implementam mecanismos genéricos em que essa relação de link e tela possam ser configurados pelos desenvolvedores.

No Angular, o módulo de roteamento (router) possibilita que o desenvolvedor crie um tipo de lista de páginas que cada link deve executar (Angular, 2021c). Dessa forma, o framework tem uma estrutura de navegação que pode ser utilizada para diferentes sistemas.

NODEJS

COMANDOS NG

Para trabalhar com o framework Angular, algumas tarefas burocráticas são necessárias e trechos de código padrão devem ser criados para que o framework possa ser inicializado. Uma estrutura de pastas deve ser criada, componentes devem ser registrados e o mecanismo de navegação deve ser atualizado.

São várias tarefas que não estão relacionadas ao desenvolvimento das funcionalidades da aplicação e que, se fossem feitas manualmente, seria um tempo a mais não dedicados à programação dessas funcionalidades.

Para auxiliar o desenvolvedor nessas tarefas foi criado o Angular CLI, que é uma ferramenta utilizada para automatizar grande parte das atividades relacionadas ao framework. Para instalar basta utilizar o comando npm install -g @angular/cli. O “npm” é o gerenciador de pacotes do NodeJS e faz o download do programa, bem como verifica suas dependências.

Após instalado, o comando ng fica disponível para o desenvolvedor, que poderá configurar um novo projeto de uma aplicação angular (ng new meu-proj), compilar a aplicação para distribuir (ng build meu-proj) ou testar a aplicação em desenvolvimento iniciando um servidor de teste (ng serve) (Angular, 2021a).

TYPESCRIPT

O TypeScript é uma linguagem baseada em uma adaptação do JavaScript feita pela Microsoft para adicionar tipos estáticos, cujo código é convertido para JavaScript após passar por um compilador (Typescriptlang, 2021).

Com a possibilidade de declarar tipos, alguns conceitos de orientação a objetos são reforçados como o encapsulamento, que pode receber um atributo “private” e evitar o acesso externo à variável de uma classe sem autorização (TYPESCRIPT, 2021).

ESTRUTURA ANGULAR

Na pasta “src”, temos a aplicação em si, ou seja, os códigos usados para construir a aplicação e onde o desenvolvedor vai trabalhar diretamente. Na pasta “node_modules”, temos alguns pacotes necessários ao framework Angular e alguns pacotes de uso frequente em aplicações. Ainda, podem ser instalados pacotes de terceiros utilizando a ferramenta “npm”. Inicialmente, essa pasta contém mais de 39.000 arquivos.

Todos os pacotes devem estar registrados no arquivo “package.json”.

A pasta “src” tem o arquivo “index.html”, que é o início da aplicação. Ele está praticamente vazio, tendo apenas a tag personalizada “”, que por sua vez vai chamar o componente principal. O componente principal está na pasta “app” e é composto por um arquivo HTML (app.component.html), um CSS (app.component.css) e um ćodigo TypeScript (app.component.ts). Essa pasta também tem um arquivo “app.componet.spec.ts” para testes e um “app.module.ts” que mantêm um registro de todos os componentes necessários para compor a aplicação.

O conteúdo de modificações, portanto, deverá ser incluído no “app.component.html”, e se for necessário criar algum estilo CSS específico para esse conteúdo, podemos também incluir a formatação no “app.component.css”.

Para facilitar os testes, o comando “ng” do Angular apresenta uma opção “serve” que automatiza a compilação e inicia a execução de um servidor de teste, que já disponibiliza a aplicação compilada.

Após finalizar a compilação na tela, o servidor será executado. Basta o desenvolvedor colocar na área de endereço do navegador a URL de teste http://localhos:4200 que aparecerá o resultado.

ANGULAR VIEW

No Angular, as informações que são apresentadas em HTML fazem parte de uma estruturação do framework para o uso de templates. Estes templates são um esqueleto que pode abrigar variáveis e pequenos algoritmos que facilitam a listagem de dados.

Inicialmente, temos a possibilidade de incluir no HTML variáveis que vão ser convertidas para seu conteúdo assim que a tela for apresentada ao usuário. Essa possibilidade deixa o HTML mais genérico, evitando ter de ser alterado a cada processamento. Para acrescentar as variáveis no template, basta incluir as duplas chaves de início ``.

A partir do index.html, que tem a parte inicial da aplicação, o Angular vai combinando os demais arquivos HTML até formar a aplicação completa. Por esse motivo os demais templates não precisam ter as tags iniciais <html>, <head> e <body>.

Para permitir que grupos de dados sejam facilmente listados nas estruturas do HTML, o template Angular inclui o atributo *ngFor, que vai criar um laço de repetição que multiplicará as tags HTML envolvidas.

Somado à possibilidade de repetição automatizada de trechos do HTML, temos também como decidir se uma tag será incluída ou não na tela, com base no conteúdo de variáveis. O Angular tem o atributo *ngIf, que determina se a tag na qual ele se encontra será incluída na montagem da tela

Filtros (pipes): Durante a exibição dos dados, a formatação pode trazer uma maior facilidade na interpretação das informações. Por esse motivo, temos no Angular filtros que podem converter os dados para um formato visualmente mais interessante.

O Angular possui alguns filtros para dados que são frequentemente utilizados, como:

a. DatePipe: utilizado para transformar as datas, podendo fazer a separação de meses, dias e anos;

b. UpperCasePipe: converte o texto para maiúsculas;

c. LowerCasePipe: converte o texto para minúsculas;

d. CurrencyPipe: apresenta o valor como uma informação financeira, usando, inclusive, o símbolo da moeda no país específico;

e. DecimalPipe: converte o valor para string com a pontuação de casas decimais;

f. PercentPipe: converte o número em uma string com o sinal de percentual.

Internacionalização

Configurações necessárias para isso, que devem ser acrescentadas no app.module.ts.

  
// ---- localização - pt-BR 
import { LOCALE_ID } from '@angular/core'; 
import { registerLocaleData } from '@angular/common'; 
import ptBR from '@angular/common/locales/pt'; 
registerLocaleData(ptBR); 
//--- no @NgModule 
providers: [	{provide: LOCALE_ID,  	useValue: 'pt'	}  ],

Para acrescentar um novo componente, o comando ng pode ser utilizado para simplificar a configuração, digitando na linha de comando ng generate component nome-componente. Uma nova pasta será criada dentro de “app” com os arquivos “.ts”, “.css”, “.html” do novo componente.

INSTALANDO UM APLICATIVO ANGULAR

Os procedimentos para transformar nossa aplicação SPA Angular em um aplicativo PWA envolvem a adoção de parâmetros e configurações que são facilitadas pelo utilitário “ng”, e para isso basta instalar ng add @angular/pwa.

Com o ajuste finalizado, devemos preparar a aplicação para uso em produção, o que envolve a compilação e empacotamento de todos os arquivos necessários para distribuição. Esse passo seria feito independentemente de conversão para PWA e serve também para finalizar a aplicação Angular: ng build --prod. A pasta “dist/app-nome” será criada e todos os arquivos necessários estarão armazenados lá. Basta incluir esses poucos arquivos num servidor HTTP e nossa aplicação pode ser liberada. No caso do PWA, o servidor de teste do Angular não funciona e por esse motivo teremos que utilizar outra opção. Para facilitar, temos o pacote “http-server” no Node.js, que pode ser utilizado. Basta instalar com npm install http-server e executar http-server -p 8080 -c-1 dist/app-nome na pasta do projeto.

Anotações sobre Fundamentos de Desenvolvimento WEB com Angular