O que você leu no título é isso mesmo. Vou contar como tem sido minha experiência para aprender Angular e explicar alguns conceitos básicos para quem tá começando como eu.
O sofrimento existe… ?
Em primeiro lugar, o que é Angular?!
Para quem não sabe, o Angular é uma plataforma de desenvolvimento criada pelo Google cujo objetivo é permitir a construção de aplicativos simples até aplicativos empresariais.
O Angular também permite a construção de aplicativos de página única (ou Single Page Applications – SPA).
Aplicativo de Página Única?! Que bruxaria é essa?!
Vou colocar uma definição retirada da Wikipedia:
“Um aplicativo de página única (em inglês “single-page application”, ou SPA) é uma aplicação web ou site que consiste de uma única página web com o objetivo de fornecer uma experiência do usuário similar à de um aplicativo desktop.
Em um SPA, todo o código necessário – HTML, JavaScript, e CSS – ou é obtido com um único carregamento de página, ou os recursos apropriados são carregados dinamicamente e adicionados à página conforme necessário, geralmente em resposta a ações do usuário.
A página não é recarregada em qualquer momento do processo, tampouco ocorre a transferência de controle para outra página, embora a URL no navegador ou a API de história do HTML5 possam ser usadas para fornecer a percepção e navegabilidade de páginas separadas ao aplicativo. Interação com aplicativos de página única muitas vezes envolve comunicação dinâmica com o servidor web por trás dos bastidores.”
Em outras palavras, aplicativo de página única (SPA) é uma página que, ao invés de ser carregada completamente, somente parte do conteúdo é que muda.
Angular e seus componentes
Voltando à minha história, comecei a usar o Angular ao desenvolver um projeto aqui na Zup. Eu sabia que se tratava de um framework complexo, cuja curva de aprendizado é maior do que a do React e do Vue. Entretanto, o que eu não imaginava é que a minha curva de aprendizado seria mais íngreme do que as ladeiras existentes no bairro onde moro… ?
A base do Angular são os componentes. Cada componente construído precisa ser colocado em um módulo para que possa aparecer na tela (confesso que levei um certo tempo para aprender esse princípio: todo aplicativo no Angular contém pelo menos um módulo. É possível criar outros módulos e importá-los no módulo principal. E é aí que comecei a achar o Angular extremamente confuso).
Componentes são blocos de código que formam um aplicativo. É uma classe do TypeScript com um decorador chamado @Component, um modelo (template) HTML e estilos.
O que há neste decorador @Component?!
selector: seletor que contém o nome do nosso componente, que vai aparecer em forma de marcador HTML quando formos usar em alguma parte do nosso aplicativo.
templateUrl: é o caminho do arquivo HTML. É uma parte importante porque mostra como o componente vai aparecer renderizado para o usuário.
styleUrls: é o caminho do arquivo CSS. É uma parte opcional responsável pela formatação do arquivo HTML.
Cadê o código?!
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})Depois desse decorador, aparece mais uma coisinha. O que é?
Aparece uma classe que vai conter todo o comportamento do nosso componente dentro de um aplicativo. Essa é a carinha da nossa classe:
export class AppComponent { }Observação: esqueci de falar, mas o Angular é construído com TypeScript. Para quem não sabe, pode-se dizer que o TypeScript (ou TS) é um superjet do JavaScript, no sentido de que podemos estabelecer os tipos de dados. Vou dar um exemplo bem básico: quando você vai criar uma variável, você pode dar um tipo específico ao valor daquela variável.
let num: number = 5; // Variável com valor do tipo número.
let someText: string = “Algum texto aqui”; // Variável com valor do tipo string ou cadeia de caracteres.
Tudo que influencia no componente aparece aqui.
Angular em ação
Vamos ver um exemplo para ficar um pouco mais fácil.
Vou criar um componente para fazer um contador. No Angular, assim como no React, precisamos fazer importações o tempo todo. Criei um arquivo chamado counter.component.ts que vai conter o modo como o nosso componente vai funcionar. Em primeiro lugar, preciso fazer uma importação:
import { Component } from '@angular/core';Depois que importei o Component, vou colocar o decorador @Component:
@Component({
selector: "counter",
templateUrl: "./counter.component.html",
styleUrls: ["./counter.component.css"]
}) Vamos entender direitinho essa parte:
- No selector coloquei o nome counter, que vou colocar lá no arquivo principal app.component.html para poder aparecer na tela.
- No templateUrl coloquei o caminho do nosso arquivo HTML, que vai refletir todo o comportamento do nosso componente.
- No stylesUrls coloquei o caminho do arquivo css para estilizar o contador depois.
Agora, vem a classe para exportação e que vai conter a lógica do nosso código.
export class CounterComponent {}O que eu preciso fazer para que o componente apareça bonitinho na tela? Vejamos as etapas a seguir:
Preciso importar esse componente que eu criei lá no arquivo app.module.ts (todas as importações de componentes criados aparecem por lá).
import { BrowserModule } from “@angular/platform-browser”;
import { NgModule } from “@angular/core”;
// Importação do componente para usar no aplicativo.
import { CounterComponent } from "../counter/counter.component";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent, CounterComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {} No decorador @NgModule, dentro do vetor de declarations, vou colocar o componente importado (acima).
Ah sim! Também esqueci de dizer como esse componente vai aparecer no HTML do componente principal Será dessa forma:
<counter></counter>Sempre que um componente é criado, ele se transforma em um marcador HTML que pode ser usado em qualquer parte do aplicativo. Assim, ele vai poder ser usado em qualquer componente do módulo em que ele é declarado ou dos módulos que importam onde ele é declarado.
Voltando…
Componente devidamente importado, vou começar a trabalhar nele. Vou incluir um título:
export class CounterComponent {
title: string = "Contador";
} Mas onde esse título vai aparecer? Lá no nosso arquivo counter.component.html. Porém, vai aparecer assim:
<h1>{{ title }}</h1>Meu Deus do céu!!!! O que está acontecendo?!?!?!
Vamos com calma:
- Lá no arquivo ts, eu criei uma variável chamada title, que recebe um valor do tipo string.
- No arquivo HTML, que é o nosso modelo, em vez de digitar “Contador”, eu vou colocar a variável title entre chaves duplas dentro do nosso marcador (porque o valor já está configurado lá na nossa variável criada no arquivo ts). Esse valor será vinculado ao arquivo HTML. Esse processo chama-se associação de dados de via única (ou one-way data binding, isto é, os dados seguem em uma única direção). É o mesmo que digitar “Contador” dentro do marcador h1:
<h1>Contador</h1>Vou fazer a mesma coisa com o valor inicial. Vou criar uma variável que receberá um valor do tipo número lá no arquivo ts:
export class CounterComponent {
title: string = "Contador";
initialValue: number = 0;
} Do mesmo modo que fiz com o título, vou chamar a variável initialValue no arquivo HTML:
<h1>{{ title }}</h1>
<h2>{{ initialValue }}</h2> Agora vou criar dois botões: um para aumentar o valor inicial e outro para diminuí-lo.
<button>Aumentar</button>
<button>Diminuir</button> Lá no arquivo ts, vou criar duas funções para aumentar e diminuir o valor inicial. Essas funções serão os “escutadores” de eventos (os famosíssimos event listeners) responsáveis por somar 1 ao valor inicial e de diminuir 1 do valor inicial.
increaseValue() {}
decreaseValue() {} Esses eventos vão aparecer no nosso arquivo HTML assim:
<button (click)="increaseValue()">Aumentar</button>
<button (click)="decreaseValue()">Diminuir</button> Bacana, não é mesmo? ?
Vou colocar a lógica dentro das funções de aumentar e diminuir o valor inicial no nosso arquivo ts:
increaseValue() {
this.initialValue = this.initialValue + 1;
}
decreaseValue() {
this.initialValue = this.initialValue - 1;
} Eu usei a variável initialValue dentro dessas funções porque vai lidar diretamente com o valor inicial, fazendo as devidas alterações. Assim que eu clicar nos botões de aumentar e diminuir, o número 0 será alterado.
E se eu quiser desabilitar um dos botões?! É só colocar o atributo disabled entre colchetes, junto com uma condição (no caso, eu vou desabilitar o botão de diminuir o valor quando chegar a zero). Fica dessa forma:
<button [disabled]="initialValue === 0" (click)="decrement()">Diminuir</button>A aparência do nosso Contador é essa:
Aprender Angular: um desafio que vale muito a pena!
É claro que não aprendi esses conceitos iniciais da noite para o dia. Bati a cabeça por muito tempo até entender como funcionam (o básico, pelo menos!). E tome assistir tutorial, ler a (quase enigmática) documentação, ver o curso da Loiane Groner no YouTube… tinha a impressão de que quanto mais estudava, menos aprendia.
Entretanto, (acho que) não estou sozinha nesse drama. Durante minhas andanças pelo Google, vi que MUITA gente têm as mesmas dificuldades (ou parecidas) que eu tenho para aprender Angular.
O Angular é uma plataforma com muitas nuances e muitos detalhes. Eu acredito que não é possível passar para um novo conceito sem ter entendido completamente o conceito anterior. Aliás, essa é uma dica que deixo aqui.
Por que estou escrevendo esse texto? É porque quero fazer uma série com meus experimentos com o Angular. Sim, é isso mesmo: quero mostrar, nas minhas próximas publicações, meus aplicativos criados com esse framework.
É um desafio? Sim, com certeza! Vai dar certo? Só tentando… Aguardem as cenas dos próximos capítulos! ?
E como é para você? Qual sua relação com o Angular? Conta para a gente nos comentários!
