Angular Principais Conceitos

O Angular é um framework para desenvolvimento de aplicações web modernas, criado e mantido pela equipe do Google. Ele oferece uma estrutura robusta para criar interfaces dinâmicas e escaláveis, utilizando conceitos bem definidos que ajudam a organizar o código e facilitar sua manutenção. Neste artigo, vamos explorar os principais conceitos do Angular de forma clara e direta.

1. Componentes

Os componentes são a base de qualquer aplicação Angular. Cada componente é responsável por uma parte específica da interface do usuário (UI). Eles são compostos por três partes principais:

• Template (HTML): Define o layout e a estrutura do componente.
• Classe (TypeScript): Contém a lógica e os dados associados ao componente.
• Estilos (CSS ou SCSS): Define a aparência do componente.

Exemplo básico de um componente:

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

@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
title = 'Meu Componente Angular';
}

2. Módulos

Os módulos são utilizados para organizar os diferentes componentes, diretivas, pipes e serviços da aplicação. O Angular possui um módulo principal, o AppModule, mas é possível criar módulos adicionais para dividir a aplicação em partes menores e mais fáceis de gerenciar.

Um módulo básico é declarado assim:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

3. Templates

Os templates definem a estrutura HTML que será exibida ao usuário.

4. Diretivas

As diretivas são instruções que você pode aplicar a elementos no DOM para alterar seu comportamento ou aparência. Existem três tipos principais de diretivas no Angular:

• Diretivas Estruturais: Alteram a estrutura do DOM, adicionando ou removendo elementos. Exemplos:
• *ngIf: Exibe ou oculta elementos com base em uma condição.
• *ngFor: Itera sobre uma coleção, criando um elemento para cada item.
• Diretivas Atributo: Alteram a aparência ou o comportamento de elementos já existentes. Exemplo:
• [ngClass]: Adiciona classes CSS dinamicamente.
• Diretivas Personalizadas: Criadas pelo desenvolvedor para adicionar comportamentos específicos.

Exemplo de uso do *ngIf:

<div *ngIf="isVisible">Este elemento aparece se 'isVisible' for verdadeiro.</div>

5. Serviços e Injeção de Dependência

Os serviços são usados para encapsular lógica reutilizável e compartilham dados entre componentes. Eles seguem o princípio de separação de responsabilidades, mantendo o código mais organizado.

A injeção de dependência é o mecanismo pelo qual o Angular fornece instâncias de serviços para os componentes que precisam deles. Isso é feito usando o sistema de provedores.

Exemplo de um serviço simples:

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

@Injectable({
providedIn: 'root' // Torna o serviço disponível em toda a aplicação
})
export class ExampleService {
getMessage() {
  return 'Mensagem do serviço!';
}
}

E como usá-lo em um componente:

import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
selector: 'app-root',
template: '<p>{{ message }}</p>'
})
export class AppComponent {
message: string;

constructor(private exampleService: ExampleService) {
  this.message = this.exampleService.getMessage();
}
}

6. Roteamento

O roteamento permite a navegação entre diferentes páginas ou componentes da aplicação. Ele é configurado no arquivo de rotas da aplicação (app-routing.module.ts).

Exemplo básico de configuração de rotas:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

Com isso, ao acessar /about na URL, o componente AboutComponent será exibido.

7. Data Binding (Ligação de Dados)

O data binding é uma funcionalidade que conecta os dados no TypeScript com o template (HTML). Ele pode ser unidirecional ou bidirecional.

• Interpolation ({{ }}): Insere valores diretamente no HTML.
• Property Binding ([ ]): Define valores de atributos ou propriedades de elementos HTML.
• Event Binding (( )): Liga eventos do DOM a métodos no TypeScript.
• Two-Way Binding ([( )]): Sincroniza o modelo e a visualização.

Exemplo de two-way binding:

<input [(ngModel)]="name" placeholder="Digite seu nome">
<p>Olá, {{ name }}!</p>

8. Pipes

Os pipes são usados para transformar dados antes de exibi-los no template. O Angular fornece pipes nativos, como:

• date: Formata datas.
• currency: Formata valores monetários.
• uppercase/lowercase: Altera o texto para letras maiúsculas ou minúsculas.

Exemplo de uso do pipe currency:

<p>Preço: {{ price | currency:'BRL' }}</p>

Você também pode criar pipes personalizados para necessidades específicas.

9. RxJS e Programação Reativa

O Angular utiliza o RxJS para gerenciar operações assíncronas, como chamadas a APIs e eventos do usuário. RxJS é baseado no conceito de observables, que representam fluxos de dados que podem ser manipulados usando operadores.

Exemplo básico de um observable:

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';

@Component({
selector: 'app-root',
template: '<p>{{ data }}</p>'
})
export class AppComponent implements OnInit {
data: string;

ngOnInit() {
  of('Olá, RxJS!').subscribe(value => {
    this.data = value;
  });
}
}

10. Angular CLI

O Angular CLI é uma ferramenta de linha de comando que facilita a criação e manutenção de projetos. Ele automatiza tarefas como:

• Criar novos componentes, serviços e módulos.
• Construir e servir a aplicação localmente.
• Gerar builds otimizadas para produção.

Exemplo de comando para criar um novo componente:

ng generate component nome-do-componente

11. Formulários

O Angular oferece duas abordagens para trabalhar com formulários:

• Template-driven forms: Formulários definidos no template, ideais para casos mais simples.
• Reactive forms: Formulários definidos no TypeScript, mais adequados para casos complexos e validadores personalizados.

Exemplo de reactive form:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'app-form',
template: `
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input formControlName="name" placeholder="Nome">
    <button type="submit">Enviar</button>
  </form>
`
})
export class FormComponent {
form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    name: ['']
  });
}

onSubmit() {
  console.log(this.form.value);
}
}

Conclusão

O Angular é um framework completo, que oferece recursos robustos para criar aplicações modernas e escaláveis. Os conceitos apresentados — como componentes, módulos, diretivas, roteamento e RxJS — formam a base do desenvolvimento com Angular. Ao dominar esses conceitos, você estará preparado para explorar o potencial total do framework e criar aplicações de alta qualidade.