🅰️ Capítulo 01: Introdução ao Angular Standalone, Angular CLI e Arquitetura SPA

🎯 Objetivos da Aula

Ao final desta aula, você será capaz de:

1. Compreender o funcionamento do Angular como um framework completo (batteries-included) para desenvolvimento de SPAs corporativas.
2. Identificar a evolução para a arquitetura Angular Standalone, que elimina a necessidade de declaração em NgModule.
3. Instalar e utilizar a ferramenta de linha de comando Angular CLI (ng) para criação e inicialização de projetos.
4. Executar o servidor de desenvolvimento local com ng serve e entender a estrutura de pastas gerada.

---

🧠 1. O que é o Angular Standalone?

O Angular é um framework frontend mantido pelo Google para a criação de aplicações web de página única (Single Page Applications — SPAs). Na arquitetura moderna Angular Standalone, todo componente é independente, declarando diretamente suas próprias dependências na propriedade @Component({ standalone: true, imports: [...] }).

flowchart TD
    subgraph AngularApp ["Aplicação Angular Standalone"]
        RootComp["AppComponent (Componente Raiz)"] --> HeaderComp["HeaderComponent (Standalone)"]
        RootComp --> SidebarComp["SidebarComponent (Standalone)"]
        RootComp --> MainComp["DashboardComponent (Standalone)"]
        
        MainComp --> ServiceHTTP["AlunoService (HttpClient)"]
    end
    
    style RootComp fill:#e3f2fd,stroke:#1e88e5
    style MainComp fill:#e8f5e9,stroke:#2e7d32

Vantagens do Angular Standalone:

• Menos Código Boilerplate: Não exige a criação e manutenção de arquivos app.module.ts.
• Carregamento sob Demanda (Lazy Loading) Simplificado: Rotas podem carregar componentes standalone diretamente sem carregar módulos inteiros.
• Tree-Shaking Aprimorado: O compilador do Angular consegue remover todo o código não utilizado, reduzindo o tamanho final do pacote em produção.

---

💻 2. Prática Guiada: Criando um Projeto Angular Standalone com a CLI

1. Instalação da Angular CLI Globalmente:

# Instalar a CLI oficial do Angular
$ npm install -g @angular/cli
 
# Verificar a versão instalada
$ ng version

2. Inicialização de Projeto Standalone:

# Criar novo projeto Angular Standalone
$ ng new portal-academico --standalone --style=css --ssr=false
 
# Navegar para o diretório do projeto
$ cd portal-academico
 
# Iniciar o servidor local com recarregamento automático (Hot Reload)
$ ng serve --open

O aplicativo será compilado e aberto automaticamente no navegador no endereço http://localhost:4200/.

---

💻 3. Anatomia do Primeiro Componente Standalone (app.component.ts)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `
    <header class="cabeçalho">
      <h1>{{ tituloPortal }}</h1>
      <p>Status da Plataforma: <strong>{{ statusSistema }}</strong></p>
    </header>
  `,
  styles: [`
    .cabeçalho {
      background-color: #0d47a1;
      color: #ffffff;
      padding: 24px;
      font-family: Arial, sans-serif;
    }
    h1 { margin-bottom: 8px; }
  `]
})
export class AppComponent {
  public tituloPortal: string = 'Portal de Gestão Escolar (Angular Standalone)';
  public statusSistema: string = 'OPERACIONAL';
}

---

⚔️ 4. Desafios Práticos (Exercícios 30/50/20)

🥉 Nível Bronze (Fixação)

1. Qual a principal diferença entre a arquitetura tradicional baseada em NgModule e a nova arquitetura Angular Standalone?
2. Para que serve o comando ng serve --open na Angular CLI?

🥈 Nível Prata (Aplicação)

3. Modifique o componente AppComponent criado no exemplo acima para incluir uma propriedade versaoFramework: string = '17+' e exiba essa propriedade no template HTML usando a interpolação {{ versaoFramework }}.

🥇 Nível Ouro (Desafio)

4. Crie um novo componente standalone usando a Angular CLI com o comando ng generate component componentes/cabecalho (ou ng g c componentes/cabecalho) e adicione-o ao array imports do AppComponent para exibi-lo na tela.

---

💡 Gabaritos Sanfonados de Resposta

💡 Ver Gabarito do Nível Bronze

1. A arquitetura Standalone permite criar componentes, diretivas e pipes que declaram suas próprias dependências diretamente no decorator @Component, eliminando a necessidade de registrar arquivos de módulo app.module.ts.
2. O comando ng serve compila a aplicação em memória, inicia um servidor HTTP local na porta 4200 e o parâmetro --open abre automaticamente a página no navegador padrão.

💡 Ver Gabarito do Nível Prata & Ouro (Código Angular)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <main style="padding: 20px; font-family: sans-serif;">
      <h1>{{ tituloPortal }}</h1>
      <p>Versão do Framework: {{ versaoFramework }}</p>
    </main>
  `
})
export class AppComponent {
  tituloPortal = 'Portal de Cadastro de Alunos';
  versaoFramework = 'Angular 17+ Standalone';
}

---

📚 Referências Teóricas Oficiais

• ANGULAR OFFICIAL DOCUMENTATION. Getting Started with Standalone Components (https://angular.dev/guide/components/importing).
• ANGULAR CLI REFERENCE. ng serve Command Options.

---

⬅️ Voltar ao Sumário da Fase 06 | Próximo Capítulo (Estrutura de Componentes Standalone) ➡️