Como funciona o Angular?

O Angular funciona com base numa arquitetura MVC/MVVM. Utiliza componentes, ligação de dados e injeção de dependências para construir aplicações web interativas.

Conceitos principais:

• Componentes: Blocos de construção da aplicação, compostos por um template, uma classe e estilos.
• Módulos (NgModules): Agrupam componentes relacionados, serviços e outros elementos.
• Ligação de dados: Sincroniza dados entre o modelo e a vista.
  • Ligação unidirecional: Os dados fluem numa direção (por exemplo, do modelo para a vista).
  • Ligação bidirecional [()]: Alterações no modelo afetam a vista e vice-versa.
• Serviços: Fornecem funcionalidades que podem ser utilizadas por diferentes componentes (por exemplo, trabalho com pedidos HTTP).
• Injeção de dependências (DI): Mecanismo para fornecer dependências (como serviços) aos componentes.
• Templates: HTML com extensões de sintaxe Angular para mostrar dados e lidar com eventos.
• Diretivas: Alteram o comportamento ou a aparência dos elementos DOM.
  • Estruturais: Adicionam, removem ou manipulam elementos DOM (por exemplo, *ngIf, *ngFor).
  • Atributo: Alteram a aparência ou comportamento de um elemento existente (por exemplo, [ngClass], [ngStyle]).
• Ciclo de vida dos componentes: Conjunto de hooks que permitem executar código em diferentes fases da vida do componente (por exemplo, OnInit, OnDestroy).
• Zonas (NgZone): Garantem a deteção automática de mudanças e a atualização da vista em operações assíncronas.

Processo de funcionamento:

1. Carregamento: A aplicação é carregada, o módulo Bootstrap inicia o componente raiz.
2. Renderização: Angular compila os templates e cria a estrutura DOM.
3. Ligação de dados: Estabelece-se a ligação entre dados e vista.
4. Manipulação de eventos: Os ouvintes de eventos reagem às ações do utilizador.
5. Deteção de mudanças: A zona monitora operações assíncronas.
6. Atualização da vista: Quando são detetados mudanças, o Angular atualiza as partes correspondentes do DOM.

Exemplo de ligação bidirecional de dados:

<!-- Na template -->
<input [(ngModel)]="userName">
<p>Olá, {{ userName }}!</p>

// Na classe do componente
export class MyComponent {
  userName: string = '';
}