Primeiros passos com o Angular

Se você está inserido dentro do cenário do Desenvolvimento Web, é extremamente provável que você já tenha ouvido falar sobre o Angular. Juntamente com o React.js e o Vue.js, ele compõe o triunvirato das ferramentas JavaScript mais populares, requisitadas e utilizadas pelas empresas e desenvolvedores. Neste artigo aprenderemos um pouco mais sobre o Angular e criaremos nosso primeiro projeto juntos.

Vamos lá?

O que é o JavaScript?

Se você está caindo de paraquedas e não sabe o que é o JavaScript, saiba que esta é uma linguagem de programação aplicada geralmente em Desenvolvimentos Web e de Software, desempenhando ótimos resultados tanto para o Front End quanto para o Back End. Esta linguagem de alto nível está entre as principais tecnologias Web, juntando-se a outras como HTML e CSS.

O que é o Angular?

O Angular é uma plataforma de aplicações web lançado em 2012 pelos engenheiros da Google, Misko Hevery e Adam Abrons, utilizado para construir páginas dinâmicas em aplicações web que até então exigiam um nível de complexidade considerável.

O Angular utiliza a arquitetura Model-View-Controller (MVC), que consiste em dividir uma aplicação em uma estrutura com três blocos principais, onde um é responsável por receber as solicitações recebidas e gerenciá-las (model), a outra é responsável por apresentar as informações (View) e, por fim, a terceira (controller) responde aos comandos e se relaciona diretamente com a primeira camada citada.

Trazendo para o cenário do Angular, o mesmo é o modelo, o HTML é a visão e o JavaScript é o controle. Ao combinar JavaScript e HTML, o Angular sincroniza o código entre eles, tornando o trabalho dos desenvolvedores mais fácil e reduzindo a quantidade de código necessário para criar páginas dinâmicas.

Agora que aprendemos um pouco sobre o Angular, sua importância na época em que foi lançado e sua relevância na atualidade, que tal irmos para a prática?

Instalando e criando o primeiro projeto Angular

Vamos começar nossa jornada com o Angular executando a sua instalação (e sempre com a documentação debaixo do braço, para tirar qualquer dúvida que surja!). Utilizaremos para a instalação o npm como ferramenta de gerenciamento de pacotes, mas escolha qual você achar melhor, visto que em nada irá atrapalhar no nosso desenvolvimento, contanto que seja instalado corretamente. Dito isto, execute o comando a seguir para instalar o Angular em seu computador:

npm install -g @angular/cli

Uma vez concluída a instalação, vamos criar o nosso primeiro projeto. Utilize o comando a seguir para tal ação:

ng new nome-do-projeto

Substitua o prefixo “nome-do-projeto” pelo nome que você achar mais válido para a aplicação que irá criar. No nosso caso, utilizaremos um nome genérico, “angular-js”. Após a execução do comando citado, você notará que, no terminal que utilizou, após questionar qual será a forma de estilização (CSS puro, SASS, Less, etc.), o projeto será criado. Ele terá uma cara mais ou menos assim:

Execute o comando “npm start” em um terminal aberto na raiz deste projeto para que ele seja executado no seu navegador. Se tudo deu certo com a criação do projeto, será gerado no seu terminal uma url que, ao clicar nela, você será redirecionado para a seguinte página:

Criando Componentes

O componente responsável por criar esta página é o conjunto de arquivos dentro do diretório “app” que começam com o prefixo “app.component…”. Aqui, vem uma primeira grande característica do Angular: sempre que um componente é criado, é criado um arquivo HTML, um arquivo CSS, um arquivo Typescript e um arquivo de testes para ele. Desta forma, para editar um determinado componente, basta manipular estes arquivos. Tente apagar todos os elementos criados no arquivo “app.component.html”, insira algum outro elemento, salve e você verá que a página inicial da nossa aplicação terá mudado completamente:

Agora que você entendeu a estrutura básica de um componente, que tal criarmos o nosso primeiro? Execute em um terminal inicializado na pasta raiz do projeto o seguinte comando:

ng generate component nome-do-componente

Substitua o prefixo “nome-do-componente” pelo nome que você acredita que se encaixa melhor para o componente criado. Ao executar este comando, será criado um diretório com o nome que você indicou, com quatro arquivos dentro dele (com extensões “.html”, “.css”, “.spec.ts” e “.ts”, como já foi explicado anteriormente).

E como utilizar este componente? É simples demais! No arquivo com extensão “.ts” haverá um objeto com uma chave “selector”. Para o seu valor, é criado um elemento que você pode utilizar dentro do componente “app”! Entenda melhor:

Simples demais, não acha? É só descobrir o nome que foi criado para o componente (que sempre estará no arquivo com extensão typescript e geralmente é nomeada como “app-nome-do-componente”) e utilizá-lo como uma tag HTML no arquivo desejado, que no nosso caso foi o principal. Já que estamos por aqui, vamos embelezar um pouquinho mais o nosso cabeçalho, aproveitando para revisar os pontos principais para manipular componentes com o Angular:

OBS - Sempre que for necessário criar estilizações gerais para toda a aplicação, ou que afetem mais de um componente, utilize o arquivo “styles.css”, conforme exemplo:

Exibindo dados existentes no componente

Analisando o cabeçalho que criamos, constatamos rapidamente que ele não faz muito sentido, porque o nome do usuário é digitado estaticamente direto no HTML, ao invés de ser de fato um dado que pode ser alterado. Precisamos corrigir isto.

O Angular é desenvolvido com o uso de classes, de forma que podemos usar as propriedades criadas nela sem muita dificuldade na nossa exibição. Dito isto, vamos criar, na classe criada para o nosso cabeçalho, uma propriedade chamada “name”:

Agora, lá no documento HTML, iremos utilizar esta propriedade, utilizando duplos colchetes para trazer o valor que inserimos para a exibição:

Exibindo dados do componente Pai

Para fins de compreensão, chamaremos de “componente pai” um determinado componente que possua outros componentes em seu conteúdo e, por consequência, de “componente filho” aquele que está contido em um determinado componente. Vamos enxergar o seguinte código como exemplo:

Perceberemos na figura 13 que o componente Header (linha 3) é inicializado no conteúdo do componente App. Desta forma, App é o componente pai do componente Header e, consequentemente, Header é o componente filho de App.

Vimos, até então, que é possível trabalhar com dados de um determinado componente que esteja na sua classe correspondente. Todavia, também é possível acessar informações que estejam contidas no componente pai e é isto que veremos agora: imagine que o atributo name não seja inicializado com nenhum valor na classe relacionada ao componente Header:

Suponha que a informação do nome do usuário seja criada no componente App e não mais em Header. Para isso, criaremos um atributo no componente citado:

Agora, só precisamos definir que o atributo “name” existente em Header receberá os dados contidos em userName existente em App. Para tal, criamos uma propriedade no elemento “<app-header />” entre colchetes com o nome do atributo contido no elemento filho, onde seu valor será uma string com o nome do atributo do elemento pai:

Por fim, utilizamos “@Input()” antes do atributo “name”, visto que ele está recebendo um valor via propriedade de outro componente:

Tudo pronto! Nosso código já exibirá no componente Header a informação que está contida no componente App:

Considerações finais

No artigo de hoje aprendemos os motivos pelos quais o Angular é uma poderosa ferramenta para o desenvolvimento web, além de entender sua estrutura básica e traçar os primeiros passos com ele. Se você está interessado em aprender mais sobre o desenvolvimento web com o Angular, criar seu primeiro projeto e explorar seus recursos, vale a pena investir tempo e esforço nessa ferramenta poderosa.

Nos artigos posteriores, trabalharemos mais o Angular, de forma que sejam abordados todos os conceitos cruciais para a programação com o mesmo. Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está afim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do Linkedin!

Te espero ansiosamente!