step 10

first-app/src/app/app.html

@@ -1,8 +1,7 @@
-<main>
-    <header class="brand-name">
-        <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
-    </header>
+<main><a [routerLink]="['/']">
+    <header class="brand-name"><img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true"/></header>
+</a>
     <section class="content">
-        <app-home></app-home>
+        <router-outlet></router-outlet>
     </section>
 </main>

first-app/src/app/app.ts

@@ -1,12 +1,13 @@
 import {Component} from '@angular/core';
 import {Home} from './home/home';
+import {RouterModule} from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  imports: [Home],
-  templateUrl: './app.html',
-  styleUrls: ['./app.css'],
+    selector: 'app-root',
+    imports: [Home, RouterModule],
+    templateUrl: './app.html',
+    styleUrls: ['./app.css'],
 })
 export class App {
-  title = 'homes';
+    title = 'homes';
 }

first-app/src/app/details/details.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-details',
+  imports: [],
+  template: `
+    <p>
+      details works!
+    </p>
+  `,
+  styles: ``
+})
+export class Details {
+
+}

first-app/src/app/routes.ts

@@ -0,0 +1,17 @@
+import {Routes} from '@angular/router';
+import {Home} from './home/home';
+import {Details} from './details/details';
+
+const routeConfig: Routes = [
+    {
+        path: '',
+        component: Home,
+        title: 'Home page',
+    },
+    {
+        path: 'details/:id',
+        component: Details,
+        title: 'Home details',
+    },
+];
+export default routeConfig;

first-app/src/main.ts

@@ -4,7 +4,8 @@
  */
 import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
 import {App} from './app/app';
-
-bootstrapApplication(App, {providers: [provideProtractorTestingSupport()]}).catch((err) =>
-  console.error(err),
-);
+import {provideRouter} from '@angular/router';
+import routeConfig from './app/routes';
+bootstrapApplication(App, {
+    providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)],
+}).catch((err) => console.error(err));