📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 01: Ecossistema Angular & Standalone

Especialização em Frontend com Angular

---

🗺️ A Nova Arquitetura Standalone do Angular Moderno

flowchart TD
    MAIN["main.ts -> bootstrapApplication(AppComponent, appConfig)"]
    --> CONFIG["appConfig (provideRouter, provideHttpClient, provideAnimations)"]
    --> ROOT_COMP["@Component({ standalone: true, imports: [RouterOutlet, HeaderComponent] })"]
    ROOT_COMP --> LAZY_ROUTES["Rotas com loadComponent: () => import('./tela.component')"]
    LAZY_ROUTES --> VITE["Novo Build System com esbuild + Vite Dev Server (HMR Instantâneo!)"]

    subgraph FIM_NGMODULES ["Fim dos NgModules Legados"]
        A1["Zero @NgModule / Menos Boilerplate"]
        A2["Tree-Shaking Perfeito de Componentes"]
        A3["Carregamento Preciso de Dependências"]
    end
    CONFIG -.-> FIM_NGMODULES

    style MAIN fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style CONFIG fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style ROOT_COMP fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style LAZY_ROUTES fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style VITE fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
    style FIM_NGMODULES fill:#ffebee,stroke:#d32f2f,stroke-width:1.5px

---

🎯 Slide 1: A Revolução Standalone

• No Angular 17/18+, todos os componentes são standalone: true por padrão.

• Zero NgModule: Componentes declaram suas próprias dependências diretamente no array imports: [...].

• esbuild & Vite: Builds de desenvolvimento e produção até 4x mais rápidos!

---

🎯 Slide 2: O Novo Ponto de Entrada: bootstrapApplication

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

---

🎯 Slide 3: O Angular CLI Moderno

• ng new meu-app --ssr --routing --style=scss
• ng g c componentes/card-produto: Cria o componente standalone com TypeScript, HTML, SCSS e spec de testes.

---

🔗 Navegação do Capítulo 01

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim