📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 09: Injeção de Dependências & inject()

Especialização em Frontend com Angular

---

🗺️ A Árvore Hierárquica de Injetores (Hierarchical DI)

flowchart TD
    ROOT_INJ["Root Injector (provideIn: 'root' / Singleton Global)"]
    --> ROUTE_INJ["Environment Injector (Definido nas rotas via providers: [...])"]
    --> ELEM_INJ["Element / Node Injector (Definido no @Component({ providers: [...] }))"]
    --> COMP["Componente consome: private service = inject(MeuService)"]

    style ROOT_INJ fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style ROUTE_INJ fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style ELEM_INJ fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style COMP fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px

---

🎯 Slide 1: A Nova Função inject() (Sem Construtores Gigantes)

export class ProdutosComponent {
  // Inicialização direta no campo com tipagem perfeita:
  private produtosService = inject(ProdutosService);
  private router = inject(Router);
  private destroyRef = inject(DestroyRef);
}

---

🎯 Slide 2: Injeção de Configuração com InjectionToken

export const API_URL = new InjectionToken<string>('API_URL', {
  providedIn: 'root',
  factory: () => 'https://api.empresa.com/v1',
});

// Consumo:
private apiUrl = inject(API_URL);

---

🎯 Slide 3: Flags de Injeção: optional, self, skipSelf

private logger = inject(LoggerService, { optional: true });

• Não lança NullInjectorError se o serviço não for provido!

---

🔗 Navegação do Capítulo 09

📖 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