Angular: construa uma aplicação web com componentes, linguagem de template e CLI

Criando a aplicação - Apresentação

Olá! Boas-vindas a mais um curso na Alura! Meu nome é Vinny Neves, seu dev de boina favorito, e estamos aqui para caminhar juntos na direção do Angular. Vamos aprender como funciona esse framework muito famoso no mercado?

Audiodescrição: Vinny é um homem branco de barba preta, olhos pretos e sobrancelhas pretas. Ele usa óculos de armação retangular preta, uma boina cinza na cabeça, e veste um moletom amarelo. Está sentado em uma cadeira preta e cinza em frente a uma parede iluminada em lilás e rosa.

O que vamos aprender?

Neste curso, vamos começar com um Figma e um sonho. Assim começamos, do zero. Não temos nada e vamos construir o Indexa, uma aplicação que vai listar e lidar com contatos de uma agenda. Apesar disso parecer um pouco simples no conceito, vamos passar por várias funcionalidades do Angular.

Aprenderemos a lidar com terminal, com geração de componentes, como os componentes funcionam, como lidamos com o valor de um input, como evitamos repetição de código, e sintaxes de template para automatizar as tarefas do front-end e evitar fazer cópia e colagem de código.

No final, teremos uma listagem de toda a agenda vinda de um arquivo JSON. Para conseguirmos lidar com esse arquivo JSON, que é diferente do TypeScript, CSS, HTML, que o Angular lida por padrão, precisaremos mexer nas configurações do projeto.

Vamos trabalhar um pouco na infraestrutura do TypeScript e, ao final, temos essa aplicação que lista todos os contatos, organizando por letras do alfabeto, tudo de forma automática. Ainda podemos buscar um nome e ele vai filtrar usando métodos do TypeScript de manipulação de string.

Haverá alguns desafios no meio do caminho para você exercitar e praticar tudo o que irá aprender.

Pré-requisitos

Se você já tem um bom conhecimento de TypeScript e entende como ele funciona, bem como um pouco de HTML e CSS, você tem aptidão para nos acompanhar nessa jornada.

Te esperamos na próxima aula! Vamos lá?

Criando a aplicação - Angular CLI e ajustando o projeto

Vamos iniciar a codificação do Indexa?

Angular CLI e ajuste do projeto

Desta vez, vamos começar construindo o front-end. Já estamos habituados a abrir o VS Code, criar um arquivo index.html, um style.css, um index.js, começar a importar tudo e codificar, e tudo funciona, porque navegador entende o JavaScript que escrevemos.

No entanto, quando trabalhamos com Angular, o funcionamento não é exatamente assim. Vamos escrever usando TypeScript como linguagem principal, e o navegador não entende por padrão a linguagem do TypeScript. Dessa forma, precisamos de uma ferramenta para compilar o TypeScript para o JavaScript.

O estilo é um CSS normal com o qual estamos habituados. Porém, as coisas que vamos escrever durante essa jornada com o Indexa, o navegador não entende. Sendo assim, são necessárias algumas ferramentas adicionais para alcançar esse objetivo.

Uma dessas ferramentas é a que chamamos de Angular CLI. Deixamos aberto o link da documentação. Essa documentação vai nos ensinar o que precisamos fazer para instalar a ferramenta no nosso computador.

Instalando o Angular CLI

Note que quem precisa instalar o Angular CLI não é necessariamente o nosso projeto; vamos instalar globalmente, ou seja, dentro da pasta do Node no computador. Logo no início da documentação, são trazidas as instruções para a instalação. Devemos usar o seguinte comando:

npm install -g @angular/cli

Com o terminal aberto, vamos digitar esse comando, mas com um detalhe. As versões do Angular são lançadas com frequência, e não necessariamente quando você começar a codificar o Indexa estará na mesma versão usada no momento da gravação.

Então, para estarmos na mesma página e termos um cenário em comum, vamos dizer que queremos instalar o @angular/CLI na versão @17.0.3. Se você instalar exatamente essa versão, não teremos nenhum problema de comunicação, você vai escrever a mesma coisa que nós e irá funcionar.

npm install -g @angular/cli@17.0.3

Criando um projeto Angular

Ao terminar a instalação, estaremos aptos para começar a utilizar as ferramentas que ele disponibiliza. Vamos usar algumas durante este curso, e a primeira delas será criar um projeto Angular.

Lembre-se que não é sobre criar os arquivos index.html e styles.css e começar a codificar. Vamos pedir para o Angular CLI criar esse projeto base.

Estamos no terminal, na pasta do usuário, mas não é aqui que queremos estar. Queremos estar na área de trabalho, então executamos o comando abaixo:

cd Desktop/

Feito isso, vamos limpar o terminal e verificar se tem algo no desktop com o comando ll.

ll

Com o desktop limpo, vamos pedir para o Angular criar a aplicação para nós. Para isso, vamos usar o comando ng. ng é exatamente o comando que acabamos de instalar, disponibilizado pelo Angular CLI.

Para criar uma aplicação nova, vamos usar o comando ng new. Nesse caso, ng é o comando, new é o primeiro argumento, ou parâmetro, e o último argumento será o nome do projeto. O terminal sugere usar o indexa, porque já escrevemos e executamos esse comando algumas vezes antes.

ng new indexa

Ao pressionar a tecla "Enter", surgirá uma pergunta: "Qual formato de folha de estilo você gostaria de usar?". Você quer usar CSS puro, Sass, Less? Nesse caso, vamos usar CSS puro.

Logo na sequência, ele pergunta se vamos lidar com renderização do lado do servidor. Nesse momento, não vamos, então responderemos "Não". Definido isso, a ferramenta vai criar o projeto base e instalar todas as dependências.

Quando trabalhamos em um projeto que tem um package.json que configura as dependências, ao executar o comando npm install, ele vai baixar tudo de acordo com o sistema operacional e com a versão do Node, e colocar na pasta "node_modules". É isso que o comando ng faz para nós: ele gera o projeto e instala as dependências.

Trabalhando com o Angular

Ao terminar, estaremos aptos a começar a trabalhar e entender o que o Angular gera. Vamos limpar o terminal novamente: no Mac, usamos o atalho "Command + K" para fazer isso; no Windows, com o atalho "Ctrl + L", conseguimos algo parecido a depender do terminal usado.

Estamos na área de trabalho e, para executar essa aplicação que o ng acabou de criar, precisamos entrar na respectiva pasta. Então, vamos digitar o comando cd indexa/.

cd indexa/

Antes não tínhamos nada e agora temos uma pasta "indexa" que é o resultado do comando ng new. Para executar esse projeto e subir essa aplicação, vamos usar o comando ng serve. Com isso, pedimos para o Angular disponibilizar o projeto que acabamos de gerar.

ng serve

Como retorno, ele informa que gerou os arquivos polyfills.js, main.js (formato que o navegador entende) e styles.css. Ele informa também o tamanho de cada um e o tamanho total de todos os arquivos.

Além disso, ele diz que construiu a aplicação, o que levou 1.7 segundos, e é indicado que o watch mode está ligado, ou seja, ele presta atenção nesses arquivos que podem ser alterados. Se quisermos acessar, basta ir até o endereço "http://localhost:4200/".

Ao abrir esse link, temos uma aplicação com link para documentação, alguns tutoriais, documentação do CLI, e há a mensagem "Hello, indexa", como se fosse o "Hello, world!", mas com o Angular.

Conclusão

Parabéns, a sua aplicação está rodando! Preparamos os alicerces da nossa aplicação e agora temos um projeto Angular base para começar a construir o Indexa.

Agora precisaremos começar a lidar com os arquivos HTML e TypeScript que o Angular entende. Vamos fazer isso? Te esperamos no próximo vídeo!

Criando a aplicação - Entendendo o hot reload

Você pode ter sentido como se estivesse em uma aula de back-end, com todos os comandos no terminal, mas vamos voltar para o nosso universo de front-end, que é tratar de HTML e CSS. Neste vídeo, vamos entender a estrutura de pastas de um projeto Angular e como começamos a interagir com essas coisas!

Entendendo o hot reload

Primeiro, vamos abrir o VS Code e depois abrir a pasta do projeto "indexa", que está na área de trabalho. Para isso, clicamos em "Open Folder" ("Abrir Pasta") e vamos em "Desktop > indexa".

Feito isso, serão abertas todas as pastas existentes no projeto base. Vamos interagir com esses arquivos um pouco de cada vez, em vez de olhar tudo primeiro para depois começar a mexer. A ideia é intercalar um pouco de conceito e prática.

A primeira coisa que queremos mostrar é o arquivo package.json.

Conhecendo o arquivo package.json

O package.json vai configurar, por exemplo, o comando start, que é o ng serve; ele tem o nome do projeto (name); as dependências do projeto (dependencies); e as dependências em tempo de desenvolvimento (devDependencies), ou seja, quando fazemos o build e publicamos a aplicação em algum lugar, as dependências de dev não vão juntas.

Perceba que, para darmos o primeiro passo com uma aplicação de Angular, temos uma grande quantidade de dependências. Por isso o Angular CLI nos ajuda.

Conhecendo o arquivo app.component.html

O próximo arquivo que vamos conhecer fica em "src > app > app.component.html". Nesse arquivo, temos uma tag <style> na linha 10, que contém todos os estilos da página inicial.

Logo abaixo, temos a tag <main> com vários componentes, como um <svg>, um <h1>Hello, {{ title }}</h1>, e uma mensagem <p>Congratulations! Your app is running.</p>. Ao comparar, o que visualizamos na página da aplicação no navegador é exatamente o que está no código.

Mais uma vantagem que o Angular entrega para nós: no terminal, ainda é executado o ng serve. Esse comando precisa permanecer rodando, então enquanto trabalhamos, o terminal fica preso com esse comando.

Alterando o arquivo app.component.html

De volta ao arquivo app.component.html, vamos selecionar tudo e, sem medo, vamos deletar e criar um <h1>, que é o título principal, e vamos chamar de "Indexa".

app.component.html:

<h1>Indexa</h1>

Alguns segundos após salvar, o navegador é atualizado para nós, limpando tudo que tinha e mantendo apenas o <h1>. O Angular entrega para nós o que chamamos de hot reload, ou hot module replacement. Basicamente, o que isso faz é o seguinte: ao salvarmos um arquivo, o Angular rapidamente recompila o projeto, dispara um sinal para o navegador de que há algo novo e ele atualiza.

Assim, ganhamos velocidade de desenvolvimento. Basta salvar e será atualizado por padrão, sem necessidade de instalar nenhuma extensão no VS Code. O Angular CLI cuida disso para nós.

Aplicando o fundo gradiente azul

Agora vamos acessar o Figma e pegar o gradiente azul do fundo da aplicação, que começa com azul-claro e desce para o branco. Esse gradiente é uma propriedade CSS, então vamos clicar nesse fundo azul e procurá-lo no lado direito do Figma.

Estamos trabalhando com o Dev Mode (Modo de Desenvolvimento) ligado, que fica no canto superior direito da ferramenta. Você pode alternar se quer visualizar no modo de desenvolvimento ou não.

Abaixo na aba "Inspect", temos a seção "Style" com o background que é um linear-gradient (gradiente linear). Vamos copiar esse estilo e voltar ao VS Code.

Como estamos falando de estilo, poderíamos fazer a mesma estratégia que o Angular fez de criar uma tag <style> e colocar o estilo dentro dela. Porém, quando falamos de estilos globais, o Angular entrega um arquivo CSS específico para fazermos isso.

Vamos abrir o "Explorer" do projeto e, na pasta "src", encontrar um arquivo chamado styles.css. Ao abri-lo, temos um comentário do Angular dizendo que podemos adicionar estilos globais e fazer import do que precisar. Vamos remover esse comentário e selecionar a tag body. Feito isso, vamos colar o linear-gradient que o Figma apresentou.

Porém, há um detalhe: no código de gradiente que copiamos, é sugerido usar uma variável CSS. Isso é uma coisa do Figma que não temos disponível, então vamos remover essa função var(--Linear) do CSS.

styles.css:

body {
    background: linear-gradient(180deg, #3D8BFD 0%, #E7F1FF 100%);
}

Com isso, temos o background com linear-gradient() de 180 graus, a cor de início e a cor do fim. Podemos salvar o arquivo styles.css. Como resultado, temos várias réplicas do background, porque não definimos o tamanho do body, então o CSS interpretou o comando dessa forma.

Além disso, a primeira coisa que vamos fazer será remover a margem de body, pois ele sempre vem com uma margem por padrão. Depois, queremos dizer para o navegador que o tamanho mínimo do body é o máximo que houver disponível na tela, então definimos min-height, ou seja, altura mínima de 100vh.

body {
    background: linear-gradient(180deg, #3D8BFD 0%, #E7F1FF 100%);
    margin: 0;
    min-height: 100vh;
}

Dessa forma, o que estiver disponível de tela será preenchido pelo gradiente e, assim, paramos de ter o padrão de fundo repetido e temos um gradiente igual ao do Figma.

Conclusão

De volta ao navegador, temos o título "Indexa" sobre o fundo gradiente. Missão cumprida!

Porém, há um detalhe: quando falamos em utilizar um framework de front-end, não é exatamente ficar apenas nos arquivos HTML e CSS; precisamos entender uma parte da aplicação que se chama componente.

O que isso quer dizer no final das contas? Em vez de escrevermos muito HTML e CSS, vamos escrever pequenas partes reaproveitáveis. Angular é sobre componentes, e é isso que vamos fazer no próximo vídeo. Te esperamos lá!

Sobre o curso Angular: construa uma aplicação web com componentes, linguagem de template e CLI

O curso Angular: construa uma aplicação web com componentes, linguagem de template e CLI possui 134 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Criando a aplicação
• Estruturando a agenda
• Lendo contatos do JSON
• Filtrando por texto
• Build e deploy