Angular: o que é, para que serve e um Guia para iniciar no framework JavaScript

O que é Angular?

Angular é um framework de código aberto desenvolvido pelo Google para a criação de aplicativos dinâmicos e interativos da web.

Ele se baseia em TypeScript, uma linguagem superset do JavaScript, e utiliza uma abordagem orientada a componentes para a construção de interfaces. O Angular oferece uma estrutura sólida para desenvolvimento, incluindo suporte a gerenciamento de estado, roteamento, validação de formulários e muito mais.

Além disso, sua arquitetura modular e o poderoso sistema de injeção de dependência facilitam a manutenção de aplicações complexas.

Veja também:

• Qual a melhor forma para aprender Framework? Com Alberto Souza | #HipstersPontoTube
• Angular Framework — Para que serve? - YouTube

O que é Angular JS?

O Angular é um framework consolidado que foi desenvolvido pela equipe do Google em 2010. Essa primeira versão era conhecida como Angular JS, mas também podemos encontrar a grafia Angular.JS. Desde então, passou por diversas mudanças e evoluções.

A mais importante delas foi a ocorrida em 2016, quando o framework foi praticamente reescrito, modificando sua estrutura e abordagem, passando a ser chamado apenas de Angular 2.0 ou Angular 2+ no caso das versões posteriores.

Para compreender melhor a história e diferenças entre Angular e AngularJS, recomendamos que assista ao vídeo O que é Angular e AngularJS? | #HipstersPontoTube

Por que usar Angular?

O Angular é o framework escolhido por muitas empresas e pessoas desenvolvedoras devido à sua robustez e conjunto de recursos abrangente. Sua estrutura modularizada promove a reutilização de código e a manutenção mais fácil.

Além disso, ele traz poderosas ferramentas para lidar com tarefas complexas, como:

• Gerenciamento de estados;
• Manipulação de formulários; e
• Roteamento.

O uso do TypeScript como linguagem base proporciona tipagem estática e segurança, enquanto a forte comunidade e a documentação extensa facilitam a aprendizagem e o suporte contínuo. Sua integração com bibliotecas como o RxJS para gerenciar fluxos de dados e o Angular Material para criar interfaces atraentes o torna uma solução completa para o desenvolvimento web moderno.

Angular x React

O angular é tão completo que é considerado uma verdadeira plataforma de desenvolvimento. Ele serve para a criação de aplicações de página única, as famosas Single Page Aplications (SPA’s), assim como outros frameworks como React e Vue, com algumas diferenças.

Uma delas é que o React é, na verdade, uma biblioteca e necessita da inclusão de outras bibliotecas para a construção das SPA’s. Já o Angular é um framework e possui todos os recursos necessários para o desenvolvimento.

Saiba mais a respeito dessa batalha no Front-end e acesse o artigo sobre Angular Vs React Vs Vue.

Angular CLI

O angular possui uma interface de linha de comando (CLI) que facilita bastante o desenvolvimento de um novo projeto, simplificando a criação, compilação e implantação de aplicativos.

Com ela não é mais necessário se preocupar com a criação de toda a estrutura de pastas e arquivos de configuração; pois com apenas um comando no terminal, todos esses pacotes são criados e toda a estrutura para começar a desenvolver a sua aplicação estará pronta.

Se você quer entender como criar um novo projeto em Angular utilizando a CLI e entender para que servem os arquivos criados, acesse:

• Criando aplicações com Angular CLI

Pré requisitos

Para começar a utilizar o Angular, você já deve ter conhecimentos sobre:

• HTML;
• CSS; e
• JavaScript.

É importante também já ter alguma familiaridade com TypeScript (TS), pois o Angular utiliza essa linguagem por padrão. O TS é um superset do JS, ou seja, possui todas as funcionalidades do JS e acrescenta outras, entre elas, o destaque é para a tipagem.

Leia o artigo Como começar com Angular e obtenha mais informações sobre como iniciar seus estudos com o framework.

Confira também a apostila Desenvolvimento web com HTML, CSS E JavaScript.

TypeScript no Angular

O TypeScript desempenha um papel crucial no desenvolvimento Angular. Ele adiciona recursos de tipagem estática ao JavaScript, tornando o código mais seguro e legível.

O TypeScript oferece as seguintes vantagens:

• Facilita a detecção de erros em tempo de desenvolvimento;
• Aprimora a manutenção do código; e
• Oferece suporte a recursos avançados, como classes, interfaces e enums.

Além disso, o Angular CLI gera automaticamente projetos em TypeScript, simplificando a configuração inicial. TypeScript é totalmente compatível com o Angular; sua integração fluida, suporte da comunidade e recursos modernos o tornam uma opção poderosa para criar aplicativos web escaláveis e estruturados.

Acesse as formações Aplique TypeScript no front-end e Melhore sua experiência de desenvolvimento com TypeScript e conheça o poder dessa linguagem.

Componentes

O angular é baseado em componentes, ou seja, com ele criamos o projeto dividindo-o em pequenas partes, que são reutilizáveis e, juntas, compõem a aplicação. No angular, um componente é formado por 3 partes principais:

• 1 arquivo de estilo com extensão CSS ou SCSS;
• 1 arquivo HTML, também chamado de template; e
• 1 arquivo TypeScript, que contém o comportamento do componente.

Além disso, ao criar o componente através da CLI do angular, também é criado por padrão um arquivo de testes dentro da pasta do componente, com alguns testes unitários.

Veja este artigo e entenda como funciona um componente no Angular.

Ciclo de vida

Os componentes no Angular possuem ciclo de vida, ou seja, eles são inicializados, renderizados, sofrem mudanças e são destruídos.

Entender quando cada evento é acionado e como usá-lo pode ser fundamental para garantir o comportamento adequado e a eficiência de seus componentes. Acesse o curso e conheça mais sobre os hooks do ciclo de vida de componentes angular.

Data binding

O data binding é um recurso central no Angular que permite a sincronização automática de dados entre o modelo de um componente e a sua exibição no template HTML.

Ele simplifica a manipulação e a atualização de dados, tornando a interface mais dinâmica e responsiva.

No one-way binding, os dados fluem apenas do componente para o template ou do template para o componente, garantindo que a interface reflita o estado atual do modelo de dados.

Já no two-way data binding, os dados fluem em ambas as direções, permitindo que as mudanças no template atualizem automaticamente o modelo e vice-versa.

Isso é particularmente útil em formulários, onde os valores de entrada podem ser atualizados em tempo real.

Diretivas

As diretivas no Angular são marcadores em um elemento DOM para:

• Adicionar um determinado comportamento a esse elemento; ou
• Modificar sua aparência.

Elas são uma parte fundamental da estrutura do Angular e são usadas para estender o HTML com novos atributos e comportamentos personalizados, servindo para gerenciar formulários, listas, estilos e tudo o que as pessoas visualizam.

Existem dois tipos principais de diretivas no Angular:

• Diretivas Estruturais;
• Diretivas de Atributo.

1) Diretivas Estruturais

Diretivas Estruturais alteram a estrutura do DOM, adicionando ou removendo elementos. Exemplos de diretivas estruturais incluem ngIf e ngFor:

• ngIf: esta diretiva permite que você mostre ou oculte um elemento com base em uma condição;
• ngFor: usada para repetir elementos com base em uma coleção de dados.

A partir da versão 17 do Angular, a sintaxe das diretivas foi modificada. Assim, as diretivas ngIf e ngFor se tornaram @if e @for. Caso queira aprender a utilizar essa abordagem da versão 17, confira o artigo Novidades no Angular 17.

2) Diretivas de Atributo

Diretivas de Atributo alteram a aparência ou o comportamento de um elemento DOM existente. Exemplos de diretivas de atributo incluem ngClass, ngStyle e ngModel:

• ngClass: permite adicionar ou remover classes CSS com base em uma condição;
• ngStyle: usada para definir estilos CSS dinamicamente com base em valores no componente;
• ngModel: é usada para estabelecer ligação bidirecional entre um elemento de entrada de formulário HTML e uma propriedade do componente.

Esses são apenas alguns exemplos de diretivas no Angular. As diretivas permitem que você crie aplicativos mais dinâmicos e interativos, adicionando lógica ao seu HTML sem poluir seu código com manipulação de DOM diretamente em JavaScript.

Veja neste curso como criar uma diretiva personalizada: Angular: formulários orientados a templates.

Serviços

Um serviço é uma classe no Angular que é projetada para realizar uma tarefa específica ou fornecer funcionalidades compartilhadas em toda a aplicação, como fazer solicitações HTTP, gerenciar estados ou fornecer utilitários.

Os serviços são ideais para encapsular lógica de negócios que precisa ser compartilhada entre componentes, como a autenticação da pessoa usuária, armazenamento de dados ou serviços de terceiros.

Você pode criar um serviço usando o comando ng generate service nome-do-service no Angular CLI ou simplesmente criando uma classe TypeScript e decorando-a com o @Injectable() para torná-la um serviço injetável.

Injeção de Dependências

A injeção de dependências é um padrão de projeto que permite que os componentes recebam as dependências de que precisam (como serviços) em vez de criá-las internamente. Isso torna o código mais:

• Modular;
• Reutilizável; e
• Fácil de testar.

O Angular possui um injetor de dependências que gerencia a criação e a distribuição de instâncias de serviços para os componentes que os solicitam. Quando um componente precisa de um serviço, ele declara o serviço como um parâmetro no construtor e o Angular cuida da criação e da injeção da instância apropriada.

Veja este artigo e aprenda mais sobre services e injeção de dependências.

Comunicação com Servidor

A comunicação com o servidor no Angular ocorre principalmente por meio de solicitações HTTP. O Angular fornece um conjunto de módulos e classes que facilitam a busca e o envio de dados.

Antes de realizar solicitações HTTP, você precisa importar o módulo HttpClientModule na sua aplicação para poder usar o serviço HttpClient fornecido pelo Angular.

Aqui está um exemplo de um serviço que realiza uma solicitação GET:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://exemplo.com/api'; // URL da API

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/endpoint`);
  }
}

Em componentes ou outros serviços, você pode injetar o serviço HttpClient e usar seus métodos, como get(), post(), put(), delete(), etc., para realizar solicitações HTTP.

Por exemplo, para realizar uma solicitação GET:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  template: '<button (click)="fetchData()">Fetch Data</button>',
})
export class ExampleComponent implements OnInit {
  constructor(private dataService: DataService) {}

  ngOnInit() {}

  fetchData() {
    this.dataService.getData().subscribe((data) => {
      // Manipule os dados recebidos aqui
    });
  }
}

A comunicação com o servidor é assíncrona e, no Angular, o uso de Observables é uma prática comum para gerenciar a assincronicidade.

Formulários e validação

Nas aplicações web, os formulários desempenham um papel fundamental na interatividade e experiência de uso.

Os formulários permitem:

• Coletar informações;
• Validar entradas; e
• Tomar decisões com base nos dados fornecidos.

No angular, existem dois tipos principais de formulários:

• Formulários Orientados a Template; e
• Formulários reativos.

Nos formulários orientados a template, a lógica e a validação são definidas diretamente no template HTML usando diretivas como ngModel. É uma escolha mais simples e rápida para formulários básicos.

Já os formulários reativos oferecem um alto nível de controle e flexibilidade. Eles são construídos programaticamente no TypeScript usando objetos como FormGroup e FormControl, o que permite uma validação mais avançada e tratamento de formulários complexos.

A escolha entre as abordagens depende da complexidade do seu formulário e dos requisitos de validação.

Veja como aplicar validação em formulários reativos no angular.

Módulos

Um módulo no Angular é um mecanismo para organizar o código do aplicativo em blocos funcionais independentes e reutilizáveis. Cada módulo contém:

• Componentes;
• Diretivas;
• Serviços; e
• Outros recursos relacionados.

Cada módulo é definido em um arquivo TypeScript separado que contém metadados específicos, como os componentes e serviços que ele declara, bem como outras informações de configuração.

Propósitos dos Módulos

• 1. Organização;
• 2. Escopo de Funcionalidade; e
• 3. Reutilização.

1) Organização

Os módulos ajudam a organizar o código do aplicativo em partes coesas, tornando-o mais compreensível e fácil de manter.

2) Escopo de Funcionalidade

Os módulos definem escopos de funcionalidade. Isso significa que os componentes, diretivas e serviços declarados em um módulo estão disponíveis apenas para outros componentes do mesmo módulo, a menos que sejam exportados.

3) Reutilização

Os módulos podem ser reutilizados em diferentes partes do aplicativo. Isso promove a reutilização de código.

Módulo raiz (root module) no Angular

Todo aplicativo Angular possui um módulo raiz (root module) que é inicializado quando o aplicativo é carregado. Esse módulo é conhecido como AppModule por convenção.

Em aplicativos Angular maiores, é comum dividir as funcionalidades em módulos separados. Por exemplo, você pode ter um módulo para autenticação, outro para administração e assim por diante. Os módulos secundários normalmente são importados no módulo raiz ou em outros módulos secundários, conforme necessário.

Os módulos desempenham um papel crucial na estruturação e organização de aplicativos Angular. Eles permitem que você crie aplicativos escaláveis, mantendo a modularidade e a reutilização de código, o que é essencial para projetos de desenvolvimento de software bem-sucedidos.

Para aprender sobre modularização, você pode conferir o curso Angular: boas práticas de desenvolvimento com Modularização, Lazy Loading e Interceptors.

Lazy loading

Uma forma de otimizar a sua aplicação é usando o carregamento de módulos sob demanda, também conhecido como lazy loading.

O Lazy Loading é uma técnica fundamental no Angular para melhorar o desempenho e a eficiência das aplicações.

Essa abordagem permite carregar módulos sob demanda, em vez de carregar todos os módulos de uma vez. Assim, apenas os módulos necessários são carregados quando se navega para uma determinada parte do projeto, reduzindo o tempo de carregamento inicial.

Rotas

O sistema de roteamento do Angular permite criar aplicativos de página única (SPA) que podem navegar entre diferentes visualizações ou componentes sem a necessidade de recarregar a página.

Isso proporciona uma experiência de navegação mais suave, pois apenas partes específicas da página são atualizadas conforme a navegação ocorre. As rotas são gerenciadas por um módulo de roteamento, permitindo a definição de URLs amigáveis, parâmetros dinâmicos e até mesmo roteamento aninhado.

RxJS

O Reactive Extensions para JavaScript - RxJS é uma biblioteca que oferece suporte a programação reativa no Angular.

Ele permite trabalhar com fluxos de dados assíncronos de forma mais fácil e poderosa. No contexto do Angular, o RxJS é amplamente usado para:

• Tratar eventos;
• Fazer solicitações HTTP;
• Gerenciar estado; e
• Criar aplicativos mais responsivos e eficientes.

Veja o Curso sobre RxJS.

Animações

O Angular oferece suporte nativo para animações, permitindo a criação de:

• Transições suaves; e
• Interações visuais em elementos da interface.

Isso é alcançado por meio de uma poderosa API que permite definir transições de estado e animações de forma declarativa. As animações podem ser aplicadas a eventos específicos, como a exibição ou ocultação de elementos, por exemplo.

Isso melhora significativamente a experiência de uso e possibilita a criação de aplicações mais atraentes, modernas e dinâmicas.

Acesse os cursos abaixo e aprenda a incluir animações e dar vida aos seus projetos Angular:

• Angular: aprimore suas técnicas de animação e crie interfaces ainda mais atraentes
• Angular: torne sua aplicação interativa e personalizada com animações

Acessibilidade

A acessibilidade desempenha um papel relevante no desenvolvimento web e o Angular incorpora práticas voltadas para essa área.

Os recursos integrados do Angular são essenciais para criar aplicativos acessíveis, tornando-os compatíveis com leitores de tela e em conformidade com as diretrizes de acessibilidade.

Isso inclui:

• Suporte a rótulos;
• Descrições para elementos visuais;
• Capacidades de foco e navegação via teclado;
• Adição de atributos ARIA (Accessible Rich Internet Applications) para melhorar a experiência de pessoas usuárias com deficiência visual ou mobilidade reduzida.

Caso queira aprender a tornar aplicações acessíveis com Angular, recomendamos o curso Acessibilidade no Angular: aprimorando formulários, modais e rotas.

Angular material

O Angular Material é uma biblioteca de componentes UI que segue os princípios do Material Design, criada pelo Google.

Ela oferece uma ampla variedade de componentes pré-construídos, como botões, caixas de diálogo, tabelas e muito mais, que podem ser facilmente integrados em aplicativos Angular.

O uso do Angular Material é vantajoso pelos seguintes motivos:

• Economiza tempo de desenvolvimento;
• Mantém a consistência visual; e
• Fornece componentes acessíveis por padrão.

Isso torna mais fácil criar aplicativos que sejam inclusivos e atendam a um público mais amplo.

Aprenda sobre componentização com angular material:

• Angular: componentização e design com Angular Material.

Testes

O Angular oferece uma sólida estrutura de testes integrada, tornando a detecção de problemas e a manutenção de código uma tarefa mais acessível. Isso abrange tanto testes unitários, que examinam o comportamento de partes individuais do aplicativo, quanto testes de integração, que asseguram a harmonia entre as diferentes partes do sistema.

A utilização de ferramentas como Jasmine e Karma agiliza o processo de teste, tornando-o eficiente e eficaz.

Esses testes desempenham um papel fundamental na garantia de que o aplicativo continue a operar conforme o esperado mesmo após atualizações, o que contribui para aprimorar a qualidade e a confiabilidade do software.

Aprenda a implementar testes no angular com a Formação testes.

Recentemente, o Karma foi depreciado. Haviam alguns pontos de atenção em relação ao Karma por que ao usar navegadores reais na execução, os testes unitários acabavam sendo mais lentos, pesados e difíceis de integrar a sistemas CI (Continuous Integration).

Por isso, a versão 16 do Angular trouxe suporte experimental ao Jest, que é um executor de testes unitários baseado na execução direta no Node, sem a utilização de um navegador real. Assim, a equipe Angular ainda está trabalhando para tornar o Jest tão bem integrado ao framework quanto o Karma.

Já para os testes unitários já existentes baseados em navegadores, a equipe do Angular recomenda o uso do Web Test Runner e pretende adicionar suporte nas versões futuras do framework, inclusive, integrando o Web Test Runner ao Jasmine para tornar a experiência o mais similar possível à da atual composta por Jasmine e Karma.

Build

O processo de construção (build) no Angular representa a etapa em que o código-fonte é transformado em uma forma otimizada, pronta para implantação. O Angular CLI simplifica a criação e configuração desses builds, convertendo o código TypeScript em JavaScript e automatizando tarefas essenciais de construção.

Isso inclui a:

• Minificação do código;
• Otimização de imagens; e
• Criação de pacotes (bundles) para reduzir o tamanho do aplicativo.

Tudo isso resultando em um melhor desempenho e eficiência durante a execução em produção. Além disso, o Angular oferece suporte ao conceito de lazy loading, reduzindo o tamanho inicial do carregamento e melhorando a experiência de uso.

Comunidade e Recursos de Aprendizado

O Angular tem uma comunidade ativa com fóruns e grupos de discussão, além do oferecimento da documentação oficial.

Você também pode utilizar bons livros de tecnologia e acessar o Guia de carreira em Angular.

Estude com as Formações de Angular da Alura:

• Formação Angular: crie aplicações web ágeis;
• Explore o Framework Angular; e
• Desenvolva aplicações escaláveis com Angular.

Aprenda mais sobre ANGULAR gratuitamente

Acesse gratuitamente as primeiras aulas das formações Angular: crie aplicações web ágeis e Formação: Explore o framework Angular, feitas pela Escola de Front-end da Alura e continue aprendendo sobre temas como:

• Angular:construa uma aplicação web com componentes, linguagem de template e CLI
• Angular: evoluindo com formulários e roteamento
• Angular: comunicando-se com uma API via requisições HTTP
• Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD
• Angular 14: evoluindo a aplicação
• Angular: formulários orientados a templates
• Angular: ciclo de vida
• RxJS e Angular: programando de forma reativa
• Angular: torne sua aplicação interativa e personalizada com animações
• Angular: aprimore suas técnicas de animação e crie interfaces ainda mais atraentes

Ah! E aqui vai um vídeo caso você queira aprender a aprender melhor para potencializar seus estudos! Como aprender melhor? Com Diogo Pires | #HipstersPonto

Apostilas — Você profissional em T

Com as Apostilas de tecnologia sobre Front-End, Programação, UX & Design e Ciências de Dados da Alura avance nos estudos e no desenvolvimento da sua carreira em T.

Você poderá se aprofundar nos seguintes tópicos:

• Desenvolvimento Web com HTML, CSS e JavaScript;
• UX e Usabilidade aplicados em Mobile e Web;
• Java para Desenvolvimento Web;
• Java e Orientação a Objetos;
• Python e Orientação a Objetos;
• C# e Orientação a Objetos;
• SQL e modelagem com banco de dados.

Baixe elas completas em: Apostilas da Alura — Conteúdo livre para o seu aprendizado.

Conclusão

Em resumo, o Angular é uma estrutura robusta que oferece ferramentas e abordagens avançadas para a criação de aplicativos web de alta qualidade e alto desempenho. Desde a construção da interface de uso até a comunicação com o servidor e a garantia de acessibilidade, o Angular abrange uma ampla gama de aspectos essenciais no desenvolvimento moderno de aplicativos web.

Novas versões e recursos estão sempre sendo desenvolvidos para atender às necessidades em constante evolução das pessoas desenvolvedoras e do mercado.

Que tal embarcar nessa jornada de aprendizado e fazer parte dessa comunidade também?