Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD

Conhecendo o Angular - Apresentação

Boas-vindas ao curso Angular: aplique os conceitos e desenvolva seu primeiro CRUD! Eu sou a Nayanne, mas você pode me chamar de Nay. Sou instrutora Front-end aqui na Alura, e vou guiar você durante essa jornada de aprendizado sobre o Angular.

O Angular foi criado pela Google e é um dos frameworks (estruturas de código, em português) para front-end mais utilizados atualmente. De acordo com uma pesquisa feita em 2021 pelo site Stack Overflow, o Angular está entre os 3 frameworks mais utilizados por pessoas desenvolvedoras profissionais. Forbes, Gmail, Paypal e Samsung são apenas alguns exemplos de aplicações que utilizaram o Angular em seu desenvolvimento.

Ao longo desse curso desenvolveremos o projeto "MemoTeca", o seu mural de pensamentos. Nele você poderá colocar citações de livros, trechos de música, e aquelas frases legais que você quer deixar de reserva para postar como legenda em suas selfies.

Na tela principal da aplicação, temos o título "Meu Mural" escrito em azul, centralizado na tela, e um botão azul logo abaixo com o texto "Adicionar Pensamento". Ao clicar nesse botão, somos direcionados para a tela de cadastro, onde é possível adicionar um novo pensamento.

Nessa tela há o título "Adicione um pensamento novo:" em azul, centralizado na tela, e logo abaixo existe um formulário com três campos a serem preenchidos:

• O primeiro campo tem o título "Pensamento". Nele vamos escrever o pensamento a ser salvo.
• O segundo campo tem o título "Autoria ou fonte". Nele vamos escrever o nome do autor ou a fonte do pensamento que será salvo.
• O terceiro campo é capaz de mudar o visual das aspas e do cartão de pensamento a ser salvo. Nesse campo temos três opções para serem selecionadas: "Modelo 1", que deixa as aspas e a borda do cartão na cor azul escuro, o "Modelo 2", que deixa esses elementos na cor azul claro, e o "Modelo 3", que deixa na cor verde claro.

Vamos escrever um pensamento para testar a nossa tela de cadastro: No campo "Adicionar Pensamento", digitaremos a frase "Na minha máquina funciona!", e então apertaremos a tecla "Tab" para avançarmos ao próximo campo, "Autoria ou fonte". Nele, digitaremos "dev!", e apertaremos "Tab" novamente.

No terceiro campo, clicaremos no círculo ao lado de "Modelo 3", o que deixará as aspas na cor verde claro. Ao final da tela de cadastro temos dois botões, "Salvar" e "Cancelar". Nesse momento, clicaremos no botão "Salvar" para concluir o cadastro. Agora, o pensamento que cadastramos já aparece no mural! Após o cadastro, será possível editar esse pensamento, alterando qualquer um dos campos como quiser. Também poderemos excluir qualquer pensamento cadastrado. É uma aplicação completa.

Para quem é este curso? Este curso é para quem quer conhecer o Angular, um framework poderoso e popular que é utilizado em aplicações pelo mundo inteiro. O Angular possui uma comunidade gigantesca e muito ativa, de quase 2 milhões de pessoas. Esse framework também possui suporte do Google.

O que você vai aprender neste curso? Você vai aprender uma ferramenta muito legal chamada Angular CLI. Com ela, você vai criar um projeto e diversos tipos de arquivos, como componentes e serviços.

Você também vai entender a estrutura de um componente no Angular. Por exemplo, o cartão de pensamentos, o formulário e o mural de pensamentos que criamos são componentes.

Você vai entender também como acontece o fluxo de informações dentro de cada componente, aprendendo a adicionar rotas para criar uma navegação dinâmica entre as telas, assim como acontece quando clicamos no botão "Adicionar Pensamento" e somos redirecionados para um formulário.

Além disso, vai aprender o que são e como utilizar algumas das principais diretivas do Angular. Para renderizar os nossos cartões de pensamento, por exemplo, estamos utilizando a diretiva ngFor.

Também vai compreender o que são os "services" e como utilizar injeção de dependências no Angular. Além disso, vai realizar requisições HTTP com a ferramenta HTTP Client, utilizando os métodos get, post, put e delete.

O visual lindo do "Memoteca" que aparece na nossa tela foi feito em Figma pela nossa designer Isa, e será disponibilizado para você! Acesse o Figma do projeto neste link.

Quais são os pré-requisitos deste curso? Você precisa já ter conhecimentos em HTML e CSS, uma boa base sobre programação orientada a objetos, além de conhecer a linguagem TypeScript, pois é essa a linguagem que o Angular utiliza.

Se você não tem familiaridade com esta linguagem, eu sugiro que você faça a Formação TypeScript que está disponível na plataforma. Faça os cursos de Typescript, depois volte aqui para codar comigo, tá certo?

Mas se você já atende a todos esses pré-requisitos, seja muito bem-vinda e muito bem-vindo! Você vai conseguir desenvolver essa aplicação completa de listagem, cadastro, edição e exclusão - que é o famoso "CRUD" -, e na versão mais atual do Angular, a versão 14 lançada em Junho de 2022.

Você vai conseguir utilizar os conceitos aprendidos neste curso para os seus projetos pessoais, e vai evoluir os seus conhecimentos como pessoa desenvolvedora. Então, vem comigo mergulhar no Angular?

Conhecendo o Angular - Criando a aplicação

Você sabe o que as aplicações Forms, Gmail e Paypal têm em comum? Elas foram desenvolvidas com Angular! Já dá para perceber como este framework é poderoso. Ao longo desse curso iremos entender os motivos que fazem o Angular ser tão utilizado em aplicações pelo mundo todo.

Para iniciar o desenvolvimento do projeto, baixaremos uma ferramenta chamada Angular CLI. Ela é a interface da linha de comando do Angular. Então, ao invés de criarmos a infraestrutura inicial manualmente, o que demandaria bastante tempo e trabalho, com algumas linhas de comandos simples no terminal criaremos o nosso projeto e partiremos para o desenvolvimento.

Para instalar a ferramenta, precisaremos ter o NodeJS já instalado na máquina. Para verificar se o programa está instalado, abriremos o prompt de comando do computador, digitaremos node -v e depois a tecla "Enter". Se o programa estiver instalado, o prompt devolverá o número da versão.

Após esse procedimento, acessaremos o site da documentação do Angular através do endereço web "angular.io/cli", e na seção "Instaling Angular CLI" copiaremos o comando npm install -g @angular/cli, que será responsável por instalar a ferramenta.

Dentro do prompt, colaremos o comando de instalação e digitaremos "Enter". Para confirmar a instalação e verificar a versão do programa, digitaremos o comando ng versione apertaremos "Enter" novamente. Saberemos que a instalação foi bem sucedida se for possível visualizar o nome Angular CLI em vermelho e logo abaixo a sua versão. A versão mais recente do Angular CLI no momento em que este curso foi gravado era a versão 14.0.3.

Agora que temos essa ferramenta, voltaremos ao site "angular.io/cli", onde encontraremos o comando para criar um novo projeto: ng new. Voltando ao prompt, digitaremos ng new e logo em seguida o nome do projeto, que no nosso caso será memoteca. Depois, apertaremos "Enter", e em seguida o Angular CLI já vai baixar todos os arquivos necessários para iniciarmos o projeto.

ng new memoteca

Antes de finalizar a instalação, o Angular CLI vai devolver algumas perguntas no terminal.

A primeira nos questiona se queremos adicionar o arquivo de rotas ("Angular routing", no original). Nós vamos utilizar esse arquivo no nosso projeto, portanto responderemos que "sim", digitando a letra "y" e depois "Enter".

Já a segunda pergunta nos questiona qual estilo ("stylesheet", no original) utilizaremos no nosso projeto. Podemos navegar com as setinhas "cima" e "baixo" do teclado para escolher entre CSS, SCSS, Sass e Less. Para este trabalho, escolheremos o CSS e apertaremos "Enter".

Nosso projeto já foi criado. Agora entraremos no projeto com o comando cd memoteca. Em seguida, vamos inicializar o projeto com ng serve.

Pronto! Nosso projeto está criado e inicializado, e podemos conferir na tela qual o nome da porta padrão, que neste caso é "localhost:4200/". Abriremos o projeto digitando o endereço da porta padrão no campo de pesquisa na parte superior do nosso navegador.

Ao darmos "Enter" podemos ver a mensagem "memoteca app is running!". Essa é a carinha inicial de um projeto Angular! Agora que temos um projeto criado e sendo executado, eu te espero a seguir para entendermos a estrutura de um projeto Angular e saber por onde começar.

Conhecendo o Angular - Construindo o cabeçalho

No prompt de comando, dentro do projeto, digitaremos o comando code +"espaço" + ., pois estamos utilizando o editor de texto Visual Studio Code.

code .

Na seção Para saber mais, que já estudamos, são explicadas as funcionalidades de todos os arquivos na lista à esquerda do Visual Studio Code. Lá também temos a explicação de como funciona a inicialização de uma aplicação em Angular. A partir de agora, vamos aos próximos passos.

Primeiro, vamos inserir alguns estilos no nosso projeto. Nesta parte, copiaremos e colaremos os códigos disponíveis na descrição deste vídeo dentro de alguns arquivos que estão na lista à esquerda do Visual Studio Code.

A primeira alteração será a modificação do estilo global no arquivo styles.css.

Você consegue acessar o conteúdo do styles.css neste link, e pode copiá-lo e colá-lo em sua própria versão.

Estamos disponibilizando os códigos HTML e CSS já preparados pois este não é o foco do curso. A ideia é focarmos 100% nos conteúdos de Angular. Caso tenha dúvidas ou curiosidades, pode buscar em nossa plataforma outros cursos sobre HTML, CSS e responsividade.

Outra modificação será feita colando o código abaixo no arquivo app.component.css, acessado também pelo explorador à esquerda:

main {
  background: url(/assets/imagens/background-completo.png);
  background-size: cover;
  min-height: 60vh;
}

O próximo passo é colocar a pasta com todas as imagens da aplicação dentro da pasta "assets" do Visual Studio Code.

Atenção: é importante que os nomes das imagens não sejam modificados, pois a estilização foi criada com base nessa nomenclatura.

Agora, vamos criar o primeiro componente do projeto, que será o cabeçalho. Dentro dele temos, à esquerda, uma imagem com o logotipo da "Memoteca", logo abaixo da imagem um parágrafo de texto, e à direita a imagem de um computador.

Em primeiro lugar, voltaremos ao Visual Studio Code e criaremos, dentro do diretório "app" à esquerda, uma nova pasta chamada "componentes". Em seguida, acessaremos o terminal pelo próprio VS Code. À direita encontraremos um "+" ("new terminal"), seguido de uma seta que nos permite abrir outras opções. Dentre elas, selecionaremos a opção "Git Bash".

Após essa alteração no terminal, digitaremos o comando ng generate e o caminho componentes juntamente com o nome do componente, que será "cabecalho":

ng generate component componentes/cabecalho

Após darmos "Enter", o Angular criará dentro da pasta "componentes" uma nova pasta com o componente "cabecalho", e dentro dela estarão quatro arquivos: CSS, HTML, Typescript e o arquivo de testes.

Clicaremos no arquivo CSS recém-criado e colaremos mais um trecho de código do arquivo cabecalho.component.css.

Em seguida, criaremos o HTML do cabeçalho. Para isso, clicaremos no arquivo HTML recém-criado, apagaremos o parágrafo gerado automaticamente pelo Angular CLI e criaremos a tag header, com a classe cabecalho e o atributo ff-inter, onde ff se refere a "font family".

<header class="cabecalho ff-inter">
</header>

Dentro do header, criaremos uma div com a classe logo, e dentro dela colocaremos a imagem do logotipo, digitando o caminho em que ela se encontra dentro do atributo src. Depois, incluiremos a descrição da imagem no atributo alt.

<div class="logo">
    <img src="../../../assets/imagens/logo-memoteca.png" alt="Logo da aplicação Memoteca">
</div>

Em seguida, ainda dentro da div, abaixo da imagem, colocaremos a tag <p> e incluiremos nela o parágrafo de texto que temos no cabeçalho.

<p>Guarde trechos de músicas, citações de livros, pensamentos e suas melhores ideias</p>

Agora vamos inserir a outra imagem. Abaixo da nossa div, digitaremos o mesmo comando de inserção de imagens, só que desta vez vamos colocar o caminho da nova imagem no atributo src e outra descrição no atributo alt. Além disso, vamos atribuir uma classe para esta imagem.

<img class="imagem" src="../../../assets/imagens/computador-cabecalho.png" alt="Imagem de um computador">

O código completo da nossa header ficará assim:

<header class="cabecalho ff-inter">
  <div class="logo">
    <img src="../../../assets/imagens/logo-memoteca.png" alt="Logo da aplicação Memoteca">
    <p>Guarde trechos de músicas, citações de livros, pensamentos e suas melhores ideias.</p>
  </div>
  <img class="imagem" src="../../../assets/imagens/computador-cabecalho.png" alt="Imagem de um computador">
</header>

Feito isso, vamos renderizar o nosso cabeçalho na tela.

Uma dica: sempre que criamos um novo componente, devemos parar a aplicação no terminal com o atalho "Ctrl + C", criar o componente e logo em seguida inicializar novamente a aplicação com o comando ng serve. Esse procedimento evita futuros problemas.

Abriremos o navegador na porta http://localhost:4200 e veremos que nosso cabeçalho ainda não aparece.

Deixaremos o navegador aberto e voltaremos ao Visual Studio Code. Em seguidam, acessaremos o arquivo app.component.html, selecionaremos todo o seu conteúdo com o atalho "Ctrl + A" e apagaremos com "Delete". Depois, vamos clicar em cabecalho.component.ts e copiar o seletor do componente app-cabecalho que se encontra dentro do arquivo.

Depois disso, abriremos novamente o arquivo app.component.html, abriremos uma tag e colaremos o seletor desse do componente app-cabecalho.

<app-cabecalho></app-cabecalho>

Agora, voltaremos ao navegador e notaremos que já aparecem as duas imagens e o parágrafo de texto no cabeçalho da página.

Te espero a seguir onde codaremos juntos o rodapé!

Sobre o curso Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD

O curso Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD possui 177 minutos de vídeos, em um total de 58 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:

• Conhecendo o Angular
• Entendendo o fluxo de dados
• Navegação com roteamento
• Diretivas
• Comunicação com o Backend
• Requisições HTTP