📊 Capítulo 14: Roteamento & Functional Guards

Especialização em Frontend com Angular

🗺️ A Pipeline de Navegação e Guards Funcionais

flowchart TD
    URL["Usuário navega para /admin/dashboard"]
    --> ROUTER["Angular Router"]
    --> GUARD{"authGuard (canActivateFn)"}
    GUARD -- "NÃO AUTENTICADO" --> REDIRECT["return inject(Router).parseUrl('/login')"]
    GUARD -- "AUTENTICADO" --> RESOLVER["produtoResolver (Busca dados antes de montar a tela)"]
    RESOLVER --> LAZY["loadComponent(() => import('./admin.component')) (Baixa JS sob demanda!)"]
    LAZY --> VIEW["Monta Componente na Viewport"]

    style URL fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style ROUTER fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style GUARD fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style REDIRECT fill:#ffebee,stroke:#d32f2f,stroke-width:2px
    style RESOLVER fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style LAZY fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
    style VIEW fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: Functional Guards Modernos (canActivateFn)

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  return authService.isAutenticado()
    ? true
    : router.parseUrl('/login');
};

• Não precisa mais criar classes inteiras com @Injectable() para guards de rota!

🎯 Slide 2: Lazy Loading Preciso de Componentes

export const routes: Routes = [
  {
    path: 'catalogo',
    loadComponent: () => import('./catalogo/catalogo.component').then(m => m.CatalogoComponent),
  },
];

🎯 Slide 3: withComponentInputBinding()

• Permite receber parâmetros de URL (/produtos/:id) diretamente como inputs do componente (id = input.required<string>()) sem precisar injetar o ActivatedRoute manualmente!