Aula 2

Uma aplicação Angular é composta por:

• Módulos: Unidades lógicas da aplicação que organizam funcionalidades.
• Componentes: As partes visuais da aplicação, responsáveis pela interface do usuário.
• Templates: HTML que define a aparência dos componentes.
• Serviços: Classes para lógica de negócios, como chamadas de API.
• Diretivas: Comandos que adicionam comportamento ao DOM.

Exemplo de Estrutura Básica

    @NgModule({
      declarations: [
        AppComponent, // Componente principal
      ],
      imports: [
        BrowserModule, // Módulos necessários
      ],
      providers: [],
      bootstrap: [AppComponent], // Inicialização da aplicação
    })
    export class AppModule {}
    

Conceito de Módulo

Um módulo organiza a aplicação Angular em partes funcionais. O módulo principal é o AppModule.

Exemplo de Módulo

    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 {}
    

Um componente é uma classe que controla uma parte da interface do usuário. Ele é composto por:

• HTML para a aparência.
• CSS para o estilo.
• TypeScript para a lógica.

Exemplo de Criação de Componente

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

    @Component({
      selector: 'app-exemplo',
      template: '<h1>Bem-vindo ao Angular!</h1>',
      styles: ['h1 { color: blue; }']
    })
    export class ExemploComponent {}
    

Uso Prático

Para usar o componente ExemploComponent, basta adicioná-lo ao módulo e incluí-lo no HTML:

    <app-exemplo></app-exemplo>