FERRAMENTAS DE

DESENVOLVIMENTO WEB
AULA 5

Prof. Yanko Costa

CONVERSA INICIAL

Nesta aula, tratamos das características de uma aplicação SPA e sobre

bibliotecas e framework, sendo este último utilizado para desenvolver aplicações
SPA: o Angular.
Vamos expor adiante algumas ferramentas utilizadas para criar uma
aplicação SPA, alguns conceitos utilizados no Angular e a variação do JavaScript
adotada no seu desenvolvimento, chamada de TypeScript.
Por último, detalharemos a estrutura do Angular, de modo a entendermos
suas partes principais e como construir uma aplicação utilizando esse
framework.

TEMA 1 – 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.

1.1 MEAN (MongoDB, Express.js, Angular, e Node.js)

Com o maior uso do JavaScript no desenvolvimento de aplicações web e

a possibilidade de se criar também código JavaScript no lado do servidor,
aumentou a utilização de cenários em que a aplicação seria toda escrita nessa
linguagem, desde a parte cliente até o código utilizado no servidor.
 Esse cenário tem sido chamado de MEAN, indicado pela primeira letra
das tecnologias normalmente utilizadas para a construção dessas aplicações
(MongoDB, ExpressJS, Angular, NodeJS). A Figura Erro: Origem da referência
não encontrada a seguir apresenta um diagrama que mostra onde essas
tecnologias são utilizadas.

Figura 1 – Diagrama cliente-servidor com Angular

Crédito: o autor.

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 (será detalhado mais adiante).
D. Angular: framework que possibilita o desenvolvimento de aplicações SPA.

1.2 Personalização de tags

Quando um navegador encontra uma tag que não está na referência

padrão, ele a ignora e tenta apresentar o conteúdo de alguma maneira, inclusive
essa é a orientação da especificação do HTML (HTML Standard, 2021). O
conteúdo pode ser apresentado e não gerar confusão no layout da página ou a
informação pode ser ignorada. De qualquer forma, o navegador não interrompe
a exibição do conteúdo com um erro.
3
 No entanto, 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).

Quadro 1 – Criando uma tag

a) No exemplo ao lado (a), temos uma tag

customizada que poderia ser criada para um
<AULA-ANG src="foto.jpg"> evento específico. Atributos podem ser
utilizados e o resultado da leitura dessa tag
<p> teste </p>
pode estar associado a uma função JavaScript.
</AULA-ANG>
Em (b) temos um exemplo de código que cria
a tag personalizada, que vai substituir o
conteúdo da tag e mostrará um texto em
vermelho no navegador contendo: “Atributo:
foto.jpg”.

b)
class novaTag extends HTMLElement {
connectedCallback() {
var imagem = this.getAttribute("src");
this.innerHTML = "<p style='color:red'> Atributo: "+ imagem +" </p>";
}
}
customElements.define('aula-ang', novaTag);

Fonte: o autor.

No exemplo do Quadro 1 anterior, em (b) a classe “novaTag” está

herdando as características do objeto “HTMLElement” e, com isso, torna-se um
elemento válido no documento. A função “connectedCallback()” é executada
assim que o elemento é anexado no documento.
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.

TEMA 2 – CONTROLE DE INTERFACE

Ao desenvolver uma aplicação SPA, o navegador é que executa a

aplicação no lado cliente, solicitando dados quando necessário. Isso quer dizer
que é no lado cliente que são feitas as verificações sobre a navegação entre as
opções (menus), a forma de atualização dos dados, o processamento e a análise

4
 da entrada de dados pelo usuário. O servidor centraliza os dados, mas não é ele
que gerencia o fluxo da aplicação.
Ao desenvolver a interface de aplicação com o usuário, o desenvolvedor
vai utilizar alguns modelos de organização dos fluxos que estarão mais
aderentes ao cenário que se propõe, seja usando um framework ou não.

2.1 Model View Controller (MVC)

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

1. 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.
2. 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.
3. 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.

5
 Figura 2 – Diagrama do padrão MVC em uma aplicação web

Fonte: adaptado de Matos; Zabot, 2020, p. 196. Crédito: Victor Metelskiy/Shutterstock.

Em um fluxo normal de trabalho em grandes sistemas, se a parte visual

estiver integrada com o código que vai executar as funções da aplicação, uma
mudança de layout, ajuste em componentes gráficos ou adaptação de cores e
figuras teria que ser executada por um desenvolvedor, podendo interferir nas
funcionalidades da aplicação.
O Angular inclui novas tags HTML que são usadas para chamar partes do
framework e criam um isolamento entre a apresentação (view) e os demais
trechos do framework (Quadro 2).

Quadro 2 – HTML inicial da aplicação Angular

<body> No código ao lado, a tag personalizada <app-

<app-root> </app-root> root> do Angular é o componente que chama
</body> o código inicial da aplicação.

Fonte: o autor.

No Quadro 2 anterior, temos um exemplo de um HTML que está separado

da aplicação, mas ao mesmo tempo conecta a parte visual (HTML) ao restante
do framework por meio de um mecanismo interno que interpreta a nova tag e
associa um código JavaScript para o navegador executar.

2.2 Inversão de controle

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

6
 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).

Quadro 3 – Fluxo de controle normal e invertido

a) b)

Fonte: o autor. Crédito: Victor Metelskiy/Shutterstock.

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.

2.3 Router (“roteador”)

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
7
 mecanismos genéricos em que essa relação de link e tela possam ser
configurados pelos desenvolvedores.

Quadro 4 – Exemplo de rota no Angular

a)
<a routerLink="/lista-pendencias" routerLinkActive="active">Lista faturas atrasadas</a>

b)
const sistemaRoutes: Routes = [
{ path: 'lista-pendencias', component: ListaFaturasPendentes },
];

Fonte: o autor.

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, como mostra o Quadro 4
anterior, que em a mostra o HTML com o link, e em b mostra a definição do fluxo
(o componente “listaFaturasPendentes” que será executado).

TEMA 3 – AMBIENTE DE DESENVOLVIMENTO ANGULAR

Para a utilização do framework Angular, algumas ferramentas podem ser

usadas para maior produtividade do desenvolvedor. Entre essas ferramentas,
temos o editor de código e um executor de código em linha de comando.

3.1 Extensões VSC

O Visual Studio Code foi citado em momento anterior como a opção a ser
utilizada para a codificação dos programas. Além das funcionalidades gerais de
um editor especializado para programação, como colorização do código com
base na sintaxe da linguagem ou indentação automatizada, o VSC tem a
possibilidade de estender suas características.
Para acrescentar funções dentro do editor, extensões podem ser
instaladas e o VSC tem um mecanismo de pesquisa e exibição de extensões,
como mostra a Figura Erro: Origem da referência não encontrada a seguir.

8
 Figura 3 – Lista de extensões e exibição da extensão Angular Snippets

Crédito: Visual Studio Code, 2021.

Na Figura Erro: Origem da referência não encontrada anterior, na lateral

esquerda, há uma lista de extensões que contém o texto “snip”, e na parte direita,
as informações da primeira extensão. A extensão pode ser instalada ao
clicarmos no pequeno botão “Install” em verde tanto na lista lateral esquerda
quanto na área direita com as informações.
Ao instalar a extensão, suas funções ficam disponíveis para o usuário do
editor e, se for relacionada com a digitação de código, a extensão pode
influenciar a cada termo digitado do programa. Um exemplo é a extensão,
mostrada na Figura Erro: Origem da referência não encontrada anterior, em
execução, cujo resultado é visualizado na Figura Erro: Origem da referência não
encontrada a seguir. Essa extensão apresenta alternativas de trechos de
códigos (snippets) por meio da digitação de um termo pré-configurado. Assim, o
desenvolvedor não precisa lembrar de toda a sintaxe do comando da linguagem
ou, nesse caso, do framework Angular. Na Figura Erro: Origem da referência não
encontrada a seguir, ao começar a digitar “a-ngfo” vai aparecendo um quadro
flutuante em são apresentadas as opções, que vão atualizando conforme mais
letras vão sendo digitadas. Ao teclar “Enter”, a extensão inclui no editor o trecho
completo da opção escolhida. O desenvolvedor pode então alterar e adaptar o
trecho sem necessitar pesquisar em outros arquivos ou na internet.

9
 Figura 4 – Uso da extensão com snippets de código Angular

Crédito: Angular Snippets, 2021.

Existem vários tipos de extensões com diferentes propósitos. Não

somente relacionadas a linguagens específicas como a do Angular
exemplificada anteriormente. Existem extensões para facilitar ou adaptar o editor
ao que o desenvolvedor está acostumado, por exemplo, a extensão “Vim”, que
adapta o VSC para os atalhos do editor “Vim”, muito utilizado por quem usa o
sistema Linux.

3.2 NodeJS

O NodeJS é uma aplicação que suporta a execução do JavaScript fora do

navegador, podendo ser utilizado para executar os programas escritos nessa
linguagem em um servidor ou diretamente no sistema operacional do desktop
(ou dispositivo mobile), e usa o mesmo executor JavaScript do navegador
Chrome (Matos; Zabot, 2020, p. 23; NodeJS, 2021).
Após sua instalação, seja no ambiente servidor ou no desktop, o NodeJS
pode executar um arquivo JavaScript ou ser utilizado diretamente no terminal,
da mesma forma que o console do navegador que foi utilizado em momentos
anteriores. Na Figura Erro: Origem da referência não encontrada a seguir,
vejamos a execução de um exemplo apresentado em um momento anterior, que
tinha sido executada no navegador, mas agora utilizando o comando “node” para
habilitar um prompt que executou as expressões e comandos do JavaScript
digitadas diretamente no terminal (a mesma situação pode ser executada
usando o “cmd” do Windows).

10
 Figura 5 – Executando JavaScript com o NodeJS no terminal Linux

Fonte: o autor.

No desenvolvimento de projetos utilizando o Angular, o NodeJS é utilizado

como uma ferramenta de produtividade e possibilita a execução de comandos
utilitários do Angular no terminal, facilitando a criação, o desenvolvimento e a
manutenção de aplicações.

3.2.1 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”, este fica disponível para o desenvolvedor,
que poderá configurar um novo projeto de uma aplicação angular (“ng new meu-

11
 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).
Caso o leitor não esteja acostumado com o uso de linha de comando
dentro do sistema operacional, a configuração do Angular, assim como muitos
comandos que auxiliam na estruturação da aplicação, são facilmente utilizados
na linha de comando. Inclusive é uma prática muito comum, nas referências e
documentações sobre o Angular, os exemplos serem apresentados com o uso
dos comandos no prompt (seja do Windows ou Linux) para a construção de
aplicações.
O próprio VSC tem um terminal incorporado para executar comandos
diretamente dentro do editor.

Figura 6 – Editor VSC com terminal

Crédito: Visual Studio Code, 2021.

Nesse terminal, exibido na Figura Erro: Origem da referência não

encontrada anterior, podem ser digitados os comandos utilitários do Angular CLI
(“ng”) ou outros comandos (os mesmos comandos do Windows ao usar o “cmd”,
ou do Linux usando o “Shell”) que possam auxiliar na interação com o sistema
operacional ou testes.

12
 TEMA 4 – 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).
Quando os tipos são declarados, é possível que sejam detectados erros
que antes eram absorvidos pela linguagem, por exemplo, quando há um erro de
digitação no nome de uma variável usada em outras partes do programa e que
acaba se tornando uma “nova” variável naquele trecho do JavaScript, como pode
ser visto no Quadro 5 a seguir.

Quadro 5 – Erro em JavaScript

> var arquivo = "basededados.dat"; No código JavaScript ao lado, a

> var novo_local = true; variável "arquivo" foi digitada errada
dentro do "if", se tornou uma nova
> if (novo_local == true) arquivo = "proj/novabase.dat";
variável e recebeu o novo valor.
> console.log( arquivo );
Consequentemente, no código em
basededados.dat diante, a variável estará
> desatualizada.

Fonte: o autor.

Como o TypeScript “acrescenta” opções na linguagem JavaScript, os

códigos preexistentes em JavaScript podem ser incorporados no código
TypeScript e, apesar de erros de tipos serem exibidos na compilação, a
execução não é interrompida por esse motivo (Typescriptlang, 2021).

4.1 Tipos

Os mesmos tipos usados em JavaScript podem ser declarados em

TypeScript: boolean, number, string e array. Alguns tipos são acrescentados no
TypeScript e facilitam a identificação de erros de interpretação no momento de
associar valores.
Na Figura Erro: Origem da referência não encontrada a seguir, pode ser
verificado como é a sintaxe do TypeScript na declaração do tipo das variáveis.
Nesse exemplo, foram usadas as mesmas variáveis sobre JavaScript utilizadas
em momento anterior para demonstrar a diferença entre as duas linguagens.

13
 Figura 7 – Declaração de tipos de variáveis em TypeScript

Fonte: o autor.

Na Figura Erro: Origem da referência não encontrada anterior, também é

mostrado como é interpretada a associação de um tipo diferente daquele que
foi declarado no início do código. A variável “impostos” fica grifada indicando um
problema, e ao passar o mouse por cima é apresentada uma janela com a
indicação de que o “tipo string não pode ser associado a um tipo number”.

4.1 Classes

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).
No TypeScript, a declaração de tipos auxilia na definição dos parâmetros
usados nos construtores da classe ou nas propriedades das classes. Também
são acrescentados as novas sintaxes ECMAScript relacionadas à orientação a
objetos assim que elas são aprovadas, podendo coexistir com a sintaxe já
existente do TypeScript, como é o caso no exemplo da declaração de acesso
privado do campo “#nome_propriedade” (sendo implementado no JavaScript)
e “private nome_propriedade” (já disponível em TypeScript).

TEMA 5 – ESTRUTURA ANGULAR

Para trabalhar com o framework Angular, vamos integrar todos os

conceitos, tecnologias e linguagens que foram apresentados em momentos
anteriores desde a instalação, usando NodeJS, a estruturação do projeto,
14
 usando MVC, e com HTML, CSS e TypeScript no view utilizando orientação a
objetos, executando os testes usando servidor e enviando a aplicação SPA para
o navegador por meio do HTTP, editando nosso código no VSC.
Toda a tecnologia utilizada no desenvolvimento precisa ser empacotada
e traduzida para um arquivo HTML, que contém a formatação visual do CSS e
código JavaScript, e que depois será enviada para o navegador do usuário
(Figura Erro: Origem da referência não encontrada).

Figura 8 – Diagrama da aplicação SPA com Angular e envio para o cliente

Crédito: o autor.

Para compreender melhor a organização utilizada pelo Angular, vamos

iniciar pela separação de pastas e arquivos básicos do esqueleto utilizado como
referência para o desenvolvimento da aplicação.
Com a sequência mostrada no Quadro 6 a seguir, teremos uma aplicação
padrão montada pela ferramenta “ng”, que poderá servir para demonstração.
Nesse Quadro 6, são mostradas as perguntas feitas pela ferramenta para
configurar o projeto sendo criado e estão relacionadas a: a) utilização de
checagem mais rígidas nos tipos; b) inclusão de roteamento de páginas; e c) tipo
de formato de CSS a ser utilizado.

15
 Quadro 6 – Criando uma aplicação Angular

npm install -g @angular/cli

ng new aula

? Do you want to enforce stricter type checking and stricter bundle budgets in the
workspace?

This setting helps improve maintainability and catch bugs ahead of time.

For more information, see https://angular.io/strict No

? Would you like to add Angular routing? No

? Which stylesheet format would you like to use? CSS

Fonte: o autor.

Nesses primeiros testes com o Angular, utilizaremos o padrão (N, N e

CSS, respectivamente) como respostas para as perguntas do “ng new” para
tornar a aplicação didaticamente mais simples. À medida que o conhecimento
sobre o Angular vai amadurecendo e as necessidades da aplicação forem
maiores, o desenvolvedor pode avaliar a possibilidade de alterações.
Ao finalizar a criação da estrutura, bibliotecas e configurações
necessárias para o uso do framework, a aplicação mínima conterá a estrutura
mostrada no Quadro 7 a seguir, e poderá ser evoluída acrescentando
funcionalidades específicas (Angular, 2021e).

16
 Quadro 7 – Estrutura de referência para aplicação SPA Angular

A estrutura de pastas da aplicação “aula”

construída pelo comando “ng” e mostrada
na lateral do editor VSC lista o esqueleto
básico e que pode ser testado diretamente
para apresentar uma tela de teste.

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”.

Fonte: o autor. Crédito: TypeScript, 2021.

O termo componente (component) no Angular é utilizado para encapsular

os arquivos que vão apresentar um trecho visual na tela para o usuário
(relacionado com o conceito “view” do MVC). Uma aplicação angular pode
apresentar na tela vários componentes como é mostrado na Figura Erro: Origem
da referência não encontrada a seguir.

17
 Figura 9 – Aplicação Angular e seus componentes

Fonte: o autor.

No desenvolvimento dos componentes, estes podem aparecer na mesma

tela ou serem chamados conforme é estruturada a navegação entre as telas
(lembrando que tela é o que o usuário visualiza quando os itens são
redesenhados. Como é uma aplicação SPA, a navegação ocorre na mesma
página HTML e os itens que são apresentados já estão no navegador).
Ao criar um projeto novo, apenas um componente é gerado e o
desenvolvedor vai montando sua aplicação, acrescentando novos componentes.

5.1 Alterando o padrão inicial

Para testar a aplicação básica criada e exemplificar como ela pode ser
adaptada para nossas necessidades, vamos fazer uma pequena modificação na
tela de boas-vindas e exibir no navegador o resultado. Em primeiro lugar, vamos
para a pasta “src” e, em seguida, para a pasta “app” (Quadro 8).

18
 Quadro 8 – Pasta “app” e o componente inicial

A pasta “src” tem o arquivo “index.html”, que é

o início da aplicação. Ele está praticamente
vazio, tendo apenas a tag personalizada
“<app-root></app-root>”, 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.

Fonte: o autor. Crédito: TypeScript, 2021.

A aplicação Angular inicia com o “index.html”, com a tag “<app-root>” que

é processada no componente principal “app.component.ts” como mostra o
Quadro 9 a seguir.

Quadro 9 – Integração do “index.html” com “app.component.ts”

@Component({ No trecho de código ao lado, temos o formato

selector: 'app-root', de como o TypeScript ensina para o navegador
que, ao encontrar a tag personalizada "app-
templateUrl: './app.component.html',
root", ele vai incorporar o
styleUrls: ['./app.component.css'] "app.component.html" e o
}) "app.component.css" neste mesmo ponto.

Fonte: o autor.

O conteúdo da nossa modificação, 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”.
Quanto à informação que queremos apresentar para teste, vamos
reaproveitá-la de um dos trechos usados em momento anterior. No arquivo
“app.component.html”, devemos apagar todo o seu conteúdo e incluir a
pequena tabela de “Faturas pagas” e “Faturas em aberto” mostrada no Quadro
10 a seguir.

19
 Quadro 10 – Tabela de faturas

<div class='mt-5'>

<ul class="nav nav-tabs" role="tablist">

<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#pago">Faturas pagas</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#aberto">Faturas em aberto</a>
</li>
</ul>

<!-- Conteudo das abas -->

<div class="tab-content">
<div id="pago" class="container tab-pane active"><br>
<h3>FATURAS PAGAS</h3>
<table class='table table-striped'>
<tr><td>Fornecedor</td><td>Valor</td><td>DT pagto</td></tr>
<tr><td>Empresa de Alcool Gel Ltda</td><td>2.560,00</td><td>22/06/2020</td></tr>
<tr><td>Transportes SA</td><td>1.680,00</td><td>16/11/2020</td></tr>
</table>
</div>
<div id="aberto" class="container tab-pane fade"><br>
<h3>FATURAS EM ABERTO </h3>
<table class='table table-striped'>
<tr><td>Fornecedor</td><td>Valor</td><td>DT vencto</td></tr>
<tr><td>Industria de cimentos SA</td><td>8.150,00</td><td>14/03/2021</td></tr>
</table>
</div>
</div>
</div>

Fonte: o autor.

Com o arquivo “app.component.html” modificado, temos que compilar

nossa aplicação, armazená-la em um servidor e enviá-la para um navegador
quando ele solicitar via URL o site. Esse é o processo de distribuição de uma
aplicação SPA.

5.2 Testando a aplicação Angular

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,

20
 que já disponibiliza a aplicação compilada. Para iniciar a compilação, devemos
entrar na linha de comando, na pasta de nossa aplicação “aula” e digitar o
comando “ng serve”, e então aguardar a mensagem do Quadro 11 a seguir.

Quadro 11 – Compilação da aplicação Angular

[...]
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on
http://localhost:4200/ **

✔ Compiled successfully.

Fonte: o autor.

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 como o mostrado na Figura
Erro: Origem da referência não encontrada a seguir.

Figura 10 – Aplicação SPA Angular com tabela de faturas

Fonte: o autor.

Como o leitor poderá observar, o resultado apresentado não é o mesmo

verificado em momento anterior. Isso porque anteriormente era exemplificado a
formatação do HTML utilizando o framework Bootstrap. Vamos, então, incluir o
Bootstrap em nossa aplicação de teste, acrescentando ao conteúdo do Quadro
12 (o mesmo utilizado em momento anterior), no “<head>” do arquivo
“index.html” que está na pasta inicial de nosso projeto “aula”.

21
 Quadro 12 – Links para inclusão do Bootstrap na aplicação Angular

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

Fonte: o autor.

Após cancelar a execução do servidor de teste, executa-se novamente o

comando “ng serve” e a compilação será refeita, com a disponibilização do
mesmo endereço de teste. O novo resultado pode ser verificado na Figura Erro:
Origem da referência não encontrada a seguir.

Figura 11 – Tabela de faturas formatadas com Bootstrap

Fonte: o autor.

Ao verificar o código fonte recebido pelo navegador (Quadro 13), o

desenvolvedor poderá verificar que todos os itens apresentados durante o
desenvolvimento do projeto “aula” (HTML, CSS, TS) ficaram resumidos em uma
linha de chamada para um arquivo CSS (“styles.css”) e quatro chamadas de
arquivos JavaScript (“runtime.js”, “polyfills.js”, “vendor.js”, “main.js”). O restante
do arquivo “index.html” trata de tags básicas e a chamada do Bootstrap.
22
 Quadro 13 – Código fonte HTML do aplicativo SPA Angular (aula)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aula</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css"></head>
<body>
<app-root></app-root>
<script src="runtime.js" defer></script>
<script src="polyfills.js" defer></script>
<script src="vendor.js" defer></script>
<script src="main.js" defer></script>
</body>
</html>

Fonte: o autor.

Todo esse processo utilizado até o momento com o framework Angular

parece um trabalho muito grande para mostrar algo que em momento anterior
também foi feito usando HTML e Bootstrap.
No entanto, o que foi mostrado até o momento foram conteúdos
estáticos, e para isso não é necessário programação. Ao se entender o
funcionamento do Angular, poderemos desenvolver uma aplicação mais
dinâmica, típica de uma aplicação web. Vamos também conhecer algumas
novas tags e atributos do Angular que vão possibilitar a criação de listas
automatizadas e formulários dinâmicos, com pesquisa de dados no servidor
remoto. Em momentos futuros, verificaremos estes tópicos finais.

23
 FINALIZANDO

Após apresentar os fundamentos da programação web em momentos

anteriores, nesta aula o foco foi o entendimento e uso do framework Angular.
Para atingir esse objetivo, iniciamos com a explicação sobre os conceitos
utilizados no Angular, como a personalização de tags HTML, que possibilitam
criar pontos de acesso a procedimentos diretamente do documento HTML. O
conceito MVC de estruturação de aplicação para a separação da parte visual do
restante do código foi abordado, assim como o formato invertido de controle da
navegação, utilizados pelos frameworks de aplicação.
Para o Angular, foi descrito como é o processo de navegação das páginas
por meio dos links digitados ou clicados na aplicação e que pode ser
generalizado com base no conceito de roteamento.
Nesta aula, também foi abordado o uso de extensões no editor VSC que
podem auxiliar na programação, usando o Angular, e como o NodeJS
desenvolve um papel importante ao suportar a criação e execução de utilitários
como o “ng”, que é utilizado para criar e ajustar os projetos usando o Angular.
Na nova versão do Angular, uma versão do JavaScript chamada de
TypeScript foi adotada como padrão para o desenvolvimento dos componentes
usados nas aplicações. O TypeScript possibilita definir os tipos das variáveis, o
que pode ser utilizado no processo de compilação e verificação de sintaxe,
auxiliando na descoberta de possíveis erros nas aplicações.
Ao final, a criação de um projeto básico de teste por meio da utilização de
ferramentas vistas anteriormente, e da união dos conhecimentos adquiridos em
momentos anteriores, possibilitou percorrer todo o processo de criação,
alteração e teste de uma pequena aplicação SPA em um servidor temporário.

24
 REFERÊNCIAS

Angular Snippets. In: Extensions for the Visual Studio family of products. Visual
Studio Marketplace. Disponível em: <https://marketplace.visualstudio.com/
search?term=%22Angular%20Snippets%22&target=VSCode&category=All%20c
ategories&sortBy=Relevance>. Acesso em 30 abr. 2021

CLASSES. TypeScript, 27 abr. 2021. Disponível em: <https://www.typescriptlang.

org/docs/handbook/classes.html>. Acesso em: 27 abr. 2021.

CLI Overview and Command Reference. Angular. Disponível em: <https://

angular.io/cli#cli-overview-and-command-reference>. Acesso em: 27 abr. 2021a.

CUSTOM elements. HTML Standard, 27 abr. 2021. Disponível em: <https://html.

spec.whatwg.org/multipage/custom-elements.html#custom-elements>. Acesso
em: 27 abr. 2021.

FAQ. Angular. Disponível em: <https://docs.angularjs.org/misc/faq>. Acesso em:

27 abr. 2021b.

GUI Architectures. martinFowler.com, Jul. 18, 2006. Disponível em:

<https://martinfowler.com/eaaDev/uiArchs.html>. Acesso em: 27 abr. 2021.

HTML. HTML Standard. Disponível em: <https://html.spec.whatwg.org/multipage/

infrastructure.html#extensibility-0>. Acesso em: 27 abr. 2021.

MEAN Stack. IBM, May 9, 2019. Disponível em: <https://www.ibm.com/cloud/

learn/mean-stack-explained>. Acesso em: 30 abr. 2021.

IN-APP navigation: routing to views. Angular. Disponível em:

<https://angular.io/guide/router#in-app-navigation-routing-to-views>. Acesso em:
30 abr. 2021c.

INVERSIONOFCONTROL. martinFowler.com, Jun. 26, 2005. Disponível em:

<https://martinfowler.com/bliki/InversionOfControl.html>. Acesso em: 27 abr.
2021.

INVERSION of Control Containers and the Dependency Injection pattern.

martinFowler.com, Jan. 23, 2004. Disponível em: <https://www.martin
fowler.com/articles/injection.html>. Acesso em: 27 abr. 2021.

MATOS, E.; ZABOT, D. Aplicativos com Bootstrap e Angular: como

desenvolver apps responsivos. São Paulo: Saraiva, 2020.

25
 MIŠKO Hevery and Brad Green – Keynote – NG-Conf 2014. ng-conf, 16 jan.
2014. Disponível em: <https://www.youtube.com/watch?v=r1A1VR0ibIQ>. Acesso
em: 27 abr. 2021.

TYPESCRIPTLANG. What is TypeScript? Disponível em: <https://www.

typescriptlang.org/>. Acesso em: 27 abr. 2021.

VERSION Support Status. Angular. Disponível em: <https://docs.angularjs.

org/misc/version-support-status>. Acesso em: 27 abr. 2021d.

VISUAL Studio Code. Disponível em: <https://code.visualstudio.com/>. Acesso

em: 30 abr. 2021

WORKSPACE and project file structure. Angular. Disponível em:

<https://angular.io/guide/file-structure>. Acesso em: 27 abr. 2021e.

26