Primeiras aulas do curso Angular: Começando com o framework

Angular: Começando com o framework

Conhecendo o ambiente - Apresentação

Olá, eu sou o Anderson e serei o instrutor deste curso "Começando com Angular". Durante esse curso nós iremos ver vários passos essenciais para quem está começando com o framework.

Enquanto nós damos os primeiros passos, enquanto nós engatinhamos, iremos implementar duas funcionalidades dentro do banco digital ByteBank, que é o cadastro de uma nova transferência e a exibição dessas transferências já cadastradas.

Para fazer essa implementação, o que nós fizemos? Nós construímos duas páginas. Uma é nossa página de extrato, nossa página de transferências, e temos também uma página de nova transferência. Na página de nova transferência, se eu adiciono um valor e uma conta de destino e clico em "transferir", o que vai acontecer?

Ele vai guardar essa informação e me redirecionar para a página de extrato novamente. Aqui na página de extrato, além de exibir os valores que já foram cadastrados anteriormente, agora ele exibe a última informação cadastrada, a última transferência cadastrada.

As duas páginas são navegáveis entre si, então se clico em "ByteBank" eu vou para a página de extrato, se clico em "nova transferência" ele vai para a página de nova transferência. Não sei se você notou, mas o que carregou foi só o centro da página, não tive um carregamento de todo o browser. Isso é um comportamento de uma SPA, o angular produz uma single page application. Então vamos dar uma olhada em como ficou o código.

No Visual Studio Code podemos ver que o app.component é a porta de entrada para uma aplicação no angular, ele é o componente principal. Aqui no componente principal ele atuou apenas como layout, como template, porque nós temos um cabeçalho, e alguma coisa vai acontecer aqui embaixo no <main>.

<header>
    <a routerLink="extrato">Bytebank</a>
    <a routerLink="nova-transferencia" routerLinkActive="ativo"></a>
</header>
<main>
<router-outlet></router-outlet>
</main>

O que vai acontecer aqui embaixo? Vai renderizar os nossos componentes, que é nosso componente de extrato (extrato.componente.html), onde tem todo o código responsável por renderizar a tabela na nossa tela, e temos também o componente de nova transferência (nova-transferencia.componente.html).

Aqui no componente de nova transferência temos nosso formulário, onde, se você perceber, temos algo que não é comum do HTML, que é um ngModel. O ngModel é um recurso do Angular. Através de módulos de formulário do Angular conseguimos capturar as informações que o usuário imputa, as informações que o usuário adicionou na tela, e encaminhar esse dado lá para o nosso arquivo .ts.

Lá no nosso arquivo .ts, na nossa classe, o que nós fizemos? Para conseguir que os dois componentes tivessem acesso a esse dado, a essa informação de uma maneira quente, de uma maneira atualizada, nós construímos uma classe de serviço (transferencia.service.ts). Então temos uma classe responsável por gerenciar e lidar com a informação, e nossos componentes simplesmente se comunicam com essa classe.

Para fazer com que nossos componentes realmente se transformassem em páginas, o que nós fizemos? Configuramos essas rotas para a nossa página em app-routing.module.ts. Temos as configurações de rota do nosso extrato, da nossa nova transferência, tudo certo.

E claro, esse curso é um curso iniciante, então estamos dando os primeiros passos. Alguns conceitos um pouco mais avançados, como como modularizar nossa aplicação, como posso criar meus próprios paths, minhas próprias diretivas, isso vai ficar para um segundo curso quando nós já conseguirmos dar nossos primeiros passos.

Então, se você se interessou, não se esqueça de dar uma olhada nos cursos de pré-requisito, e claro, se você já souber uma pitada de JavaScript você vai conseguir explorar esse curso ao máximo. E te vejo no próximo vídeo para começarmos. Até lá.

Conhecendo o ambiente - Criando o projeto

Neste momento nós iremos ver como eu posso começar com o framework Angular. Estou na página inicial do framework, https://angular.io/, e ele vai me dar algumas várias dicas do que posso ou não posso fazer. Essa página vai ser o seu guia. Aqui tenho documentação ("docs"), consigo ver quais são as classes que o framework tem, posso ver o get started, posso ver boas práticas. Enfim, diversas coisas.

Neste momento nós vamos ver o get started, nós estamos começando. Vou clicar no botão de get started que vai me mandar para a página https://angular.io/docs, de documentação, e aqui vou clicar no primeiro card, o get started novamente.

Nessa página teremos alguns pré-requisitos que preciso ter na minha máquina, inclusive o NodeJS, acredito que você já tenha instalado, npm, tudo mais. O próximo passo é instalar o CLI. Só que é interessante falar que o próprio Angular CLI tem um site também que contém essas informações de uma maneira mais enxuta, mais resumida.

Vamos para esse site, que é o http://cli.angular.io. Nesse site temos um card com os quatro comandos que eu preciso rodar para ter uma aplicação funcionando na minha máquina, então vamos rodar esses comandos.

Vou abrir um terminal e vou executar as mesmas coisas que estão sendo declaradas no site, que está de fundo no vídeo. O primeiro passo é instalar o pacote do cli globalmente na minha máquina com npm install -g @angular/cli. Mas o que é esse CLI? Esse CLI é uma ferramenta de linha de comando que vai me dar um adicional, um comando que posso dar no meu terminal para fazer diversas coisas do framework, como criar projetos, criar componentes e tudo mais.

Vou instalar ele globalmente, porque além desse diretório quero que meu usuário em qualquer diretório consiga acessar esse CLI, e tem um detalhe. Se eu só der enter nesse momento ele vai instalar a última versão do framework. Só que não é bem isso que eu quero, porque hoje, nesse momento, estou instalando a última versão.

Contudo, no momento em que você está vendo essa aula com toda certeza o framework já vai ter evoluído, e pode ser que apareça alguma pergunta para você que não vai aparecer para mim. Então para que nós possamos ver as mesmas coisas, ter as mesmas dificuldades, rodar os mesmos comandos, vamos declarar a versão que vamos utilizar.

Eu quero utilizar a versão 10.1.6, essa é a última versão que está lançada atualmente do Angular CLI. Para isso, logo após o pacote, usarei a instruçãõ `@10.1.6` e pressionarei "Enter".

npm install -g @angular/cli@10.1.6

Essa operação pode demorar um pouco, então vou dar uma pausa e volto quando estiver concluído. Meu comando foi concluído e agora tenho acesso a uma ferramenta chamada ng no meu terminal. Inclusive se eu usar o comando ng version, ele deverá exibir exatamente a versão que instalei: Angular CLI na versão 10.1.6.

Com a ferramenta instalada, vou rodar agora o próximo comando, que vai criar meu projeto. Escreverei ng new ByteBank, que é o nome do projeto. Vou pressionar enter, e ele vai de começo me fazer algumas perguntas, como se eu quero adicionar o angular routing no meu projeto.

Esse é um recurso que nós vamos utilizar, só que nós vamos fazer passo a passo para entender como é o processo. Por enquanto vou dizer que não, vou pressionar a tecla “N” e vou dar “Enter”.

A segunda pergunta que ele me faz é qual o formato de CSS, ou seja, de estilos que quero utilizar - se quero utilizar CSS, SCSS, Sass, Less ou Stylus. Eu vou na segunda opção, SCSS. Vou navegar com a seta até que a segunda opção seja selecionada e vou pressionar “Enter”.

Nesse momento ele criou os arquivos que precisa para rodar uma aplicação Angular e está instalando os pacotes. Essa é outra operação que pode demorar um tempo, porque ele precisa baixar muita coisa da internet, então vou dar uma pausa e volto quando estiver concluído.

O processo terminou, ele criou os arquivos do meu projeto, instalou os pacotes, e por fim deu alguns alertas, mas isso pode ignorar, não tem problema. Por fim ele deu uma mensagem de git. Pode ser que você não esteja vendo essa memnsagem, porque o usuário que estou utilizando ainda não tem as credenciais do git configuradas.

Um dos passos que ele tenta fazer no final é adicionar o meu projeto a um versionador git. Como esse usuário não está configurado na minha máquina, ele deu essa mensagem. Pode ser que você não esteja vendo, mas se você está vendo essa mensagem e não faz ideia do que é isso, você pode procurar aqui na plataforma Alura mesmo que temos alguns cursos sensacionais de git que vão te ensinar passo a passo o que é isso, como você usa, e tudo mais.

Neste momento, vou só ignorar, porque não vou subir meu projeto para um git, então vamos para o próximo passo. Qual o próximo passo? No site, ele diz para eu entrar no diretório do meu projeto criado e rodar o comando ng serve, vamos lá.

Vou entrar no diretório usando o comando cd seguido do nome do meu projeto, então cd ByteBank, porque ele cria o diretório exatamente com o nome do projeto que você declarou. Dito isto, vou rodar o comando ng serve, esse comando vai primeiramente me perguntar se quero compartilhar informações de erro da minha máquina.

Por exemplo, rodei o comando e quebrou, eu quero enviar isso para que a equipe responsável possa tratar, sim ou não? Por enquanto vou dizer que não, tudo bem. Agora ele vai pegar meu projeto, vai transpilar ele para HTML, JavaScript e CSS, e vai deixar disponível um servidor de desenvolvimento, um servidor local.

Esse primeiro passo que aparece no terminal, "compilando @angular/core", "compilando @angular/commom", "@angular/plataform", dependendo do quão grade estiver seu projeto, pode ser que esse primeiro processo demore um pouco mais, porque em tempo de compilação, o angular vai pegar todas as bibliotecas que você tem instaladas e vai transpilá-las, vai converter elas para JavaScript.

Logo após ele compila os arquivos do meu projeto e deixa disponível. Então, ele falou aqui que já tem um servidor de desenvolvimento escutando na porta 4200 do localhost. Vamos ver se está mesmo.

Vou voltar para o meu navegador e acessar http://localhost:4200 e vou dar enter. Essa é a página inicial de um projeto criado, está lá a mensagem ByteBank app is running. Então se chegamos até aqui é porque deu tudo certo. Temos um servidor funcionando, nosso projeto foi criado e ele está preparado para que possamos colocar nossas lógicas, que são os próximos passos do curso. Então vamos lá.

Conhecendo o ambiente - Criando o primeiro componente

Estamos com a nossa aplicação rodando, ByteBank app is running, e temos bastante coisa neste arquivo, vamos tentar encontrá-lo na nossa aplicação? Estou com meu Visual Studio Code aberto, eu abri o diretório do meu projeto, criei um projeto chamado ByteBank, ele criou um diretório ByteBank, chamado ByteBank, e é esse diretório que abri no meu Visual Studio Code.

Aqui dentro tenho alguns arquivos, vários arquivos de configurações, coisas que o Angular precisa para que seu projeto funcione. Você vai ver que alguns arquivos você inclusive já conhece, como README.md, package.jon, .gitignore e por aí vai. Mas nós não precisamos nos preocupar muito com isso agora, porque iremos ver ao decorrer do curso os principais que precisamos para fazer nossa aplicação.

Vou entrar na pasta source, porque a pasta source é o diretório onde realmente vou trabalhar, onde está minha aplicação. Dentro da pasta source tenho um arquivo chamado index.html, que é o arquivo que está sendo visualizado no meu browser.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bytebank</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Aqui dentro, veja só, tenho as tags convencionais do html, exceto que tenho um camarada chamado <app-root>. Mas app-root não é uma tag html conhecida, porque ele é um componente que o Angular criou. Toda aplicação Angular, quando crida, já cria por padrão um componente inicial, que é esse app-root.

Como eu acho ele aqui dentro? Vou vir na minha pasta source, no meu diretório app, e aqui dentro tenho um arquivo chamado app.component.ts, que é uma classe, com um decorator de Component. O que é o decorator? É um metadata que adiciona algumas propriedades na minha classe. Tenho uma classe Component e ele adicionou essas propriedades, que é um seletor, um template url, e alguns arquivos de estilos.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'bytebank';
}

Repare que o seletor app-root é o mesmo seletor que encontramos em index.html. Se eu entrar no arquivo app.component.html, vou abri-lo, vou encontrar exatamente a visualização que estou vendo no navegador, afinal dentro do body do nosso index.htmlsó estamos chamando esse componente.

Agora vou apagar todo o conteúdo de app.component.html e vou colocar meu <h1>Olá mundo</h1>. Para começarmos bem, começar com hello world. Vou voltar no meu browser, e olha lá que legal, a mensagem "Olá mundo" passará a ser exibida.

Então, se nós já achamos onde é que alteramos para refletir a nossa aplicação, já podemos começar a fazer nosso ByteBank funcionar. Vamos lá? O que o nosso ByteBank precisa? Primeiramente, ele precisa cadastrar uma transferência, então vamos fazer um formulário de nova transferência.

Vou colocar uma tag form, vou colocar um título “Nova transferência”, e a partir daqui vou colocar meus inputs. Uma transferência precisa basicamente de um valor e de um destino, por enquanto vamos trabalhar com isso, um input de valor com uma label valor e outro campo destino também com a label destino. Ambos serão do tipo texto (type="text").

Além disso, vou incliur um botão (button) chamado "Transferir".

<form>
  <h2>Nova Transferência</h2>

  <div>
    <label for="valor">Valor</label>
    <input id="valor" type="text">
  </div>

  <div>
    <label for="destino">Destino</label>
    <input id="valor" type="text">
  </div>

  <button>Transferir</button>

</form>

Tenho meu formulário, título, inputs e botão. Legal. Ao atualizar a página no navegador, nosso formulário já está aparecendo. Só que veja só que eu disse a vocês que o app component html é a porta de entrada da aplicação, e acredito não vai ser muito legal que a porta de entrada da nossa aplicação já seja um formulário de nova transferência.

Então o que vou fazer? Vou pegar o conteúdo deste formulário e vou transferir para alguém que tenha essa responsabilidade. Mas dentro do Angular, tudo, absolutamente tudo são componentes. Então se tenho uma página é componente, se tenho um formulário é componente, se tenho uma tabela é componente.

Para isso, atendendo a esse requisito, vou criar um componente e o nome do meu componente vai ser "nova transferência". No diretório app vou primeiramente criar um diretório chamado "nova-transferencia", e dentro dele criarei o arquivo nova-transferencia.component.html.

É para esse HTML que eu irei mover todo esse layout que criamos em app.component.html. Mas agora preciso passar esse componente para o app.component.html. Só que lembra que falei para vocês que meu app.component.ts é o cara que tem um seletor, que dá o direcionamento? Eu ainda não tenho esse .ts do meu componente nova transferência, só tenho o layout dele por enquanto.

Dentro do diretório "nova-transferencia", vou criar o arquivo nova.transferencia.component.ts. Ele terá uma classe, export class NovaTransferenciaComponent, e aqui vou adicionar aquele decorator chamado @Component.

import { Component } from "@angular/core";

@Component({

})
export class NovaTransferenciaComponent{


}

Nesse decorator preciso passar algumas coisas. Preciso do seletor (selector), templateUrl, e estilo (styleUrl). Começaremos com selector:’nova-transferencia’. Qual o template? Interessante que aqui posso declarar o template como uma string, então se tenho o componente botão, por exemplo, não faz tanto sentido eu ter um arquivo para um botão só, então vou lá e posso passar esse template como uma string.

Nesse caso tenho já meu arquivo criado, então uso o templateUrl e coloco o endereço desse arquivo ./nova-transferencia.component.html. Quanto ao meu estilo, como eu ainda não tenho esse arquivo, vou criar o nova.transferencia.component.scss, que foi o formato que escolhemos na hora de criarmos o projeto.

Por fim, temos o styleUrls, que pede um array de strings, então posso ter mais de um arquivo de estilo para um único componente. Eu vou passar como primeiro elemento desse array no meu arquivo nova-transferencia.component.scss.

import { Component } from "@angular/core";

@Component({
    selector:'nova-transferencia',
    templateUrl:'./nova-transferencia.component.html',
    styleUrls:['./nova-transferencia.component.scss']

})
export class NovaTransferenciaComponent{


}

Sobre o curso Angular: Começando com o framework

O curso Angular: Começando com o framework possui 160 minutos de vídeos, em um total de 57 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:

Aprenda Angular acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas