O que é Angular?

O que é Angular? é uma das principais plataformas para o desenvolvimento de aplicativos web modernos, especialmente aqueles de página única (SPAs). Criado pelo Google, o Angular permite criar interfaces dinâmicas e altamente interativas de maneira escalável e organizada. Esse artigo aborda o conceito, sua estrutura baseada em componentes, e inclui exemplos práticos para você entender o básico da plataforma.

---

1. Introdução ao Angular

Angular é uma plataforma de desenvolvimento front-end open-source que utiliza TypeScript para desenvolver aplicações mais seguras e eficientes. Baseado em uma arquitetura de componentes e módulos, ele permite criar projetos complexos com menos código repetido e melhor manutenção. Sua estrutura modular facilita a integração de funcionalidades como data binding (ligação de dados), roteamento e injeção de dependências, simplificando a construção de interfaces dinâmicas.

2. Instalando o Angular

Para começar a usar a plataforma, instale o Angular CLI, uma ferramenta de linha de comando que facilita a criação, desenvolvimento e gerenciamento de aplicativos.

Execute o seguinte comando no terminal para instalar o Angular CLI:

npm install -g @angular/cli

Após a instalação, você pode criar um novo projeto com:

ng new meu-projeto
cd meu-projeto
ng serve

Esses comandos iniciam o servidor de desenvolvimento, permitindo acessar o aplicativo na URL http://localhost:4200/.

3. Estrutura Básica

Um projeto Angular segue uma estrutura modular. Vamos ver um exemplo básico de como funciona a estrutura de componentes e módulos.

Exemplo de Módulo e Componente no Angular

Um módulo é representado por uma classe que utiliza o decorador @NgModule para declarar componentes, diretivas e serviços que fazem parte do módulo. Já os componentes são representados por classes que utilizam o decorador @Component, que inclui as configurações do componente.

Criando um Componente:No Angular CLI, crie um novo componente com o comando:

ng generate component saudacao 

Esse comando cria uma pasta chamada saudacao e quatro arquivos principais. Vamos editar o arquivo saudacao.component.ts para adicionar conteúdo ao componente.

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

@Component({
  selector: 'app-saudacao',
  template: `<h1>{{ mensagem }}</h1>`,
})
export class SaudacaoComponent {
  mensagem: string = 'Olá, mundo!';
}

Neste exemplo, o componente exibe uma saudação. A variável mensagem será renderizada no HTML, graças ao data binding do Angular.

Declarando o Componente no Módulo Principal:Agora, declare o componente no módulo principal da aplicação, localizado em app.module.ts:

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

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

Aqui, SaudacaoComponent é registrado dentro do módulo principal AppModule, o que permite o uso do seletor <app-saudacao> em qualquer parte da aplicação.

Exibindo o Componente na Página Principal:No arquivo app.component.html, insira o seletor <app-saudacao> para exibir o componente:

<app-saudacao></app-saudacao> 

Agora, ao rodar a aplicação (ng serve), a mensagem “Olá, mundo!” será exibida na página.

4. Principais Conceitos

• Data Binding (Ligação de Dados): Permite a ligação entre o modelo de dados e a interface. O exemplo acima demonstra o data binding entre a propriedade mensagem e o HTML.
• Injeção de Dependência: Facilita a reutilização de serviços e a modularização da aplicação.
• Routing (Roteamento): Usado para gerenciar navegação e URLs em aplicações de página única.

5. Conclusão

Angular é uma poderosa plataforma de desenvolvimento para aplicativos web modernos, oferecendo uma arquitetura organizada e eficiente. Com os conceitos apresentados aqui e o exemplo de criação de um componente, você já está pronto para explorar e construir interfaces ricas e dinâmicas.

A prática de construir novos componentes e aprender sobre módulos adicionais, como serviços e roteamento, será essencial para avançar no domínio do Angular.