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.
