htlstp.if.scre

# Angular Routing

---
#### Motivation
```angular181html
@switch (state) {
  @case (login) {
    <app-login></app-login>
  }
  @case (shop) {
    <app-shop></app-shop>
  }
  @case (product-details) {
    <app-details [product]='product'></app-details>
  }
  @case (user-details) {
    <app-user [user]='user'></app-user>
  }
  @case (admin) {
    @if (isAdmin(user)) { <app-admin></app-admin> }
  }
  @default {
    <app-not-found></app-not-found>
```

* 😕

* Back-Button ⚠️

---
#### Setup

```typescript
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withComponentInputBinding()),]
};
```

```typescript
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'shop', component: ShopComponent }
];
```

```angular181html
<a routerLink='/login'>Login</a>
<a routerLink='/shop'>Shop</a>
<a routerLink='/search' 
   [queryParams]='{ q: "angular"}'> 
   Search</a>

<router-outlet></router-outlet>
```

----
#### Active link styling
```
<a 
  routerLink='/login' 
  routerLinkActive='active'>
  Login
</a>
<a routerLink='/shop' ... >Shop</a>
```

<p class="fragment fade-in-then-semi-out">css-Klasse <code>active</code>, falls aktuelle Route <code>/login</code></p>

---
#### Routing mit input
```typescript
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'shop', component: ShopComponent },
  { path: 'products/:id', component: ProductComponent }
];
```

```typescript
export class ProductComponent implements OnInit{
  id = input.required<number>();
  
  constructor() {
      // input not yet available
  }
  
  ngOnInit() {
      console.log(this.id());
  }
}
```

----
#### Wildcard Routes
```typescript
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'shop', component: ShopComponent },
  { path: 'products/:id', component: ProductComponent },
  { path: '**', component: PageNotFoundComponent }
];
```

<ul>
  <li class="fragment fade-in-then-semi-out">paths werden nach Reihenfolge versucht</li>
  <li class="fragment fade-in">⚠️ <strong>muss letzte sein</strong> ⚠️</li>
</ul>

----
#### Redirects
```typescript
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'shop', component: ShopComponent },
  { path: 'products/:id', component: ProductComponent },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];
```

auch als Funktion möglich

```typescript
{
  path: 'logout', 
  redirectTo: ({ queryParams }) =>  {
    if (condition)
      return '/login';
    else
      return '/shop';
  }
}
```

---
#### Routing aus ts
```typescript
export class ShopComponent {

constructor(private router:Router, private route: ActivatedRoute) { }
  
  navigation() {
    // /products/angular/42
    this.router.navigate(['/products','angular',42]);
    
    // /products/42
    this.router.navigate(['/products', { id: 42 }]);
    
    // /search?q=angular
    this.router.navigate(['/search', 
        { queryParams: { q: 'angular' } }]);
    
    // /shop/basket
    this.router.navigate(['basket'], { relativeTo: this.route });
  }
}
```

---
#### Route Guards
```typescript
{
  path: 'admin', 
  component: AdminComponent, 
  canActivate: [authGuard]
}
```

```typescript
export const authGuard: CanActivateFn = (
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
    const authService = inject(AuthService); // DI 
    const router = inject(Router);

if (authService.isLoggedIn()) {
        return true;
    } else {
        router.navigate(['/login']);
        return false;
    }
}
```

canDeactivate äquivalent