-
Home
+
+
+ Angular Travel
+
+
+
-
-
+
+
diff --git a/src/app/app.routes.server.ts b/src/app/app.routes.server.ts
index e0c2afb..b77c9d5 100644
--- a/src/app/app.routes.server.ts
+++ b/src/app/app.routes.server.ts
@@ -1,10 +1,11 @@
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
- {
- path: 'products/:id',
- renderMode: RenderMode.Client,
- },
+ { path: 'destinations', renderMode: RenderMode.Server },
+ { path: 'destinations/:id', renderMode: RenderMode.Server },
+ { path: 'book/:id', renderMode: RenderMode.Client },
+ { path: 'trips', renderMode: RenderMode.Client },
+ { path: 'sign-in', renderMode: RenderMode.Client },
{ path: 'examples/routes/users/:id', renderMode: RenderMode.Client },
{ path: 'examples/routes/admin', renderMode: RenderMode.Client },
{ path: 'examples/routes/locked', renderMode: RenderMode.Client },
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index bb2123e..628ee69 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,15 +1,46 @@
import { Routes } from '@angular/router';
+import { signedInGuard } from './travel/auth';
+import { confirmLeaveGuard, destinationResolver, destinationTitle } from './travel/trip-routes';
export const routes: Routes = [
- { path: '', loadComponent: () => import('./pages/home').then((m) => m.Home) },
- { path: 'about', loadComponent: () => import('./pages/about').then((m) => m.About) },
{
- path: 'products',
- loadComponent: () => import('./products/product-list').then((m) => m.ProductList),
+ path: '',
+ title: 'Angular Travel',
+ loadComponent: () => import('./pages/home').then((m) => m.Home),
},
{
- path: 'products/:id',
- loadComponent: () => import('./products/product-detail').then((m) => m.ProductDetail),
+ path: 'destinations',
+ title: 'Destinations · Angular Travel',
+ loadComponent: () => import('./pages/destinations').then((m) => m.Destinations),
+ },
+ {
+ path: 'destinations/:id',
+ title: destinationTitle,
+ loadComponent: () => import('./pages/destination-detail').then((m) => m.DestinationDetail),
+ resolve: { destination: destinationResolver },
+ },
+ {
+ path: 'book/:id',
+ title: 'Book your trip · Angular Travel',
+ loadComponent: () => import('./pages/booking').then((m) => m.Booking),
+ resolve: { destination: destinationResolver },
+ canDeactivate: [confirmLeaveGuard],
+ },
+ {
+ path: 'trips',
+ title: 'My trips · Angular Travel',
+ canActivate: [signedInGuard],
+ loadComponent: () => import('./pages/trips').then((m) => m.Trips),
+ },
+ {
+ path: 'sign-in',
+ title: 'Sign in · Angular Travel',
+ loadComponent: () => import('./pages/sign-in').then((m) => m.SignIn),
+ },
+ {
+ path: 'about',
+ title: 'About · Angular Travel',
+ loadComponent: () => import('./pages/about').then((m) => m.About),
},
{
path: 'examples',
@@ -17,4 +48,6 @@ export const routes: Routes = [
data: { title: 'DevTools examples' },
loadChildren: () => import('./examples/examples.routes').then((m) => m.examplesRoutes),
},
+ { path: 'products', redirectTo: 'destinations' },
+ { path: '**', redirectTo: '' },
];
diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts
index 93fbb28..14b308d 100644
--- a/src/app/app.spec.ts
+++ b/src/app/app.spec.ts
@@ -34,7 +34,9 @@ describe('App', () => {
const fixture = TestBed.createComponent(App);
await fixture.whenStable();
const compiled = fixture.nativeElement as HTMLElement;
- const hrefs = Array.from(compiled.querySelectorAll('nav a')).map((a) => a.getAttribute('href'));
- expect(hrefs).toEqual(['/', '/', '/products', '/examples', '/about']);
+ const hrefs = Array.from(compiled.querySelectorAll('.brand, nav a')).map((a) =>
+ a.getAttribute('href'),
+ );
+ expect(hrefs).toEqual(['/', '/destinations', '/trips', '/examples', '/about']);
});
});
diff --git a/src/app/app.ts b/src/app/app.ts
index ae671dd..a39948b 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,6 +1,8 @@
-import { Component, signal } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { Component, inject } from '@angular/core';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { ThemeToggle } from './theme-toggle';
+import { Account } from './travel/auth';
+import { TravelStore } from './travel/travel.store';
@Component({
imports: [RouterOutlet, RouterLink, RouterLinkActive, ThemeToggle],
@@ -9,7 +11,14 @@ import { ThemeToggle } from './theme-toggle';
templateUrl: './app.html',
})
export class App {
- protected readonly title = signal('angular-devtools');
+ protected readonly store = inject(TravelStore);
+ protected readonly account = inject(Account);
+ private readonly router = inject(Router);
+
+ protected signOut() {
+ this.account.signOut();
+ if (this.router.url.startsWith('/trips')) void this.router.navigateByUrl('/');
+ }
/**
* `
` makes a bare `#main` resolve to `/#main`, so the browser
diff --git a/src/app/examples/example-page.ts b/src/app/examples/example-page.ts
index e64be12..c24ad4c 100644
--- a/src/app/examples/example-page.ts
+++ b/src/app/examples/example-page.ts
@@ -10,10 +10,10 @@ import { Component, input } from '@angular/core';
-