🧩 Exercícios Práticos: Injeção de Dependências e Função inject()

Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 09.1 — Serviço Injetável com @Injectable({ providedIn: ‘root’ })

Contexto: Serviço Injetável com @Injectable({ providedIn: ‘root’ }) no contexto de Injeção de Dependências e Função inject().

Requisitos de Execução:

  1. Declarar ProdutoService como singleton corporativo acessível em toda a aplicação.

Resultado Esperado

Serviço singleton injetado com injeção automática no root injector.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_1_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Injeção de Dependências e Função inject()
🔑 Gabarito de Código & Solução Comentada 
// produto.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ProdutoService {
  obterProdutos() {
    return [{ id: 1, nome: 'Mouse' }, { id: 2, nome: 'Teclado' }];
  }
}

🔍 Nível 2: Prática

Problema 09.2 — Injeção Moderna com a Função inject() no Angular 18

Contexto: Injeção Moderna com a Função inject() no Angular 18 no contexto de Injeção de Dependências e Função inject().

Requisitos de Execução:

  1. Substituir construtores longos pela função moderna private service = inject(ProdutoService).

Resultado Esperado

Dependências resolvidas via função inject() de forma elegante.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_2_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Injeção de Dependências e Função inject()
🔑 Gabarito de Código & Solução Comentada 
// lista-inject.component.ts
import { Component, inject } from '@angular/core';
import { ProdutoService } from './produto.service';

@Component({
  selector: 'app-lista-inject',
  standalone: true,
  template: `<div>Total: {{ produtos.length }}</div>`
})
export class ListaInjectComponent {
  private produtoService = inject(ProdutoService);
  produtos = this.produtoService.obterProdutos();
}

⚡ Nível 3: Integração

Problema 09.3 — Hierarquia de Injetores (Component-level providers)

Contexto: Hierarquia de Injetores (Component-level providers) no contexto de Injeção de Dependências e Função inject().

Requisitos de Execução:

  1. Fornecer nova instância do serviço em nível de componente com providers: [LocalLogService].

Resultado Esperado

Instância isolada de serviço criada para o escopo exclusivo do componente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_3_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Injeção de Dependências e Função inject()
🔑 Gabarito de Código & Solução Comentada 
// local-provider.component.ts
import { Component, inject } from '@angular/core';

class LocalService { id = Math.random(); }

@Component({
  selector: 'app-local-demo',
  standalone: true,
  providers: [LocalService],
  template: `<p>ID da Instância Local: {{ local.id }}</p>`
})
export class LocalDemoComponent {
  local = inject(LocalService);
}

🏆 Nível 4: Desafio Corporativo

Problema 09.4 — Injection Tokens Customizados para Configurações Tipadas

Contexto: Injection Tokens Customizados para Configurações Tipadas no contexto de Injeção de Dependências e Função inject().

Requisitos de Execução:

  1. Criar InjectionToken<AppConfig>('APP_CONFIG') e injetar configurações em tempo de execução.

Resultado Esperado

Configurações da aplicação injetadas com tipagem estrita via InjectionToken.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_4_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Injeção de Dependências e Função inject()
🔑 Gabarito de Código & Solução Comentada 
// app-config.token.ts
import { InjectionToken, inject } from '@angular/core';

export interface AppConfig { apiUrl: string; retryAttempts: number; }
export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');

export function useApiUrl() {
  const config = inject(APP_CONFIG);
  return config.apiUrl;
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos