Como funciona o Angular?

O Angular funciona como um framework para criar aplicações de página única (SPA). Os seus componentes principais e princípios:

• Modularidade: As aplicações são construídas a partir de módulos. @NgModule define quais os componentes, serviços e outros elementos pertencem ao módulo.
• Componentes: Os blocos de construção principais das aplicações Angular. Cada componente consiste numa template (HTML), numa classe TypeScript (lógica) e estilos (CSS). O decorador Component liga-os.
• Ligação de dados (Data Binding): O Angular fornece a ligação entre os dados na classe do componente e a vista na template. Existem ligações unidirecionais (property binding, interpolação) e bidirecionais (ngModel).
• Diretivas: Alteram o comportamento ou a aparência dos elementos DOM. Podem ser estruturais (*ngIf, *ngFor) ou atributivas (ngClass, ngStyle).
• Serviços: Classes que contêm lógica que pode ser utilizada por vários componentes. São usados para obter dados, lógica de negócio, etc.
• Injeção de dependências (Dependency Injection): Mecanismo pelo qual o Angular fornece serviços a componentes ou outros serviços. Permite tornar o código mais flexível e testável.
• Roteamento (Routing): Permite navegar entre diferentes vistas (componentes) da aplicação sem recarregar a página. É definido através de RouterModule e da configuração de rotas.
• Ciclo de vida do componente (Component Lifecycle): Série de eventos que ocorrem desde a criação até à destruição do componente. O Angular fornece ganchos (métodos) que podem ser implementados para realizar ações em etapas específicas (por exemplo, ngOnInit, ngOnDestroy).
• Detecção de mudanças (Change Detection): Mecanismo que determina quando atualizar a vista (DOM) com base em alterações nos dados da aplicação. O Angular usa zonas (NgZone) para rastrear eventos assíncronos e lançar automaticamente a deteção de mudanças.
• Templates: HTML com extensões do Angular para ligação de dados, diretivas e expressões.
• RxJS: O Angular usa ativamente a biblioteca RxJS para trabalhar com dados assíncronos e fluxos de eventos.

Processo de trabalho a alto nível:

1. Carregamento: O navegador carrega index.html.
2. Início: A raiz da aplicação é iniciada, geralmente em main.ts.
3. Bootstrap: @NgModule para o módulo raiz (geralmente AppModule) é carregado com platform-browser.
4. Renderização: O Angular cria e renderiza os componentes, começando pelo raiz.
5. Ligação de dados: Os dados das classes de componentes são ligados às templates.
6. Detecção de mudanças: O Angular monitora as mudanças nos dados e atualiza a vista.
7. Roteamento: As transições entre vistas são geridas pelo roteador.

// Exemplo de um componente simples
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Nome da tag para uso na template
  template: `<p>{{ message }}</p>`, // Template do componente
  styles: ['p { color: blue; }'] // Estilos do componente
})
export class GreetComponent {
  // Lógica do componente
  message = 'Olá do Angular!';
}

// Exemplo de uso de um serviço com DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Serviço disponível no injetor raiz
})
export class DataService {
  getData(): string {
    return 'Dados do serviço';
  }
}

// Num componente que usa o serviço
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Injeção do serviço
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

O Angular compila TypeScript e templates HTML em JavaScript durante o processo de build (compilação AOT por padrão), o que melhora o desempenho.