feat: examples with deep routes

apps/got-demo/src/app/app.component.html

@@ -11,14 +11,6 @@ <h1>Welcome to {{ title }}!</h1>
         Books
       </a>
     </li>
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        [routerLink]="['characters']"
-      >
-        Characters
-      </a>
-    </li>
     <li class="col-span-2">
       <a
         class="resource flex"
@@ -30,42 +22,8 @@ <h1>Welcome to {{ title }}!</h1>
   </ul>
 </main>
 
-<h2>Description</h2>
-
-<router-outlet></router-outlet>
-
-
-
-
-<main>
-  <h2>Next Steps</h2>
-  <p>Here are some things you can do with Nx.</p>
-  <details open>
-    <summary>Add UI library</summary>
-    <pre>
-# Generate UI lib
-ng g @nrwl/angular:lib ui
-
-# Add a component
-ng g @nrwl/angular:component xyz --project ui</pre
-    >
-  </details>
-  <details>
-    <summary>View dependency graph</summary>
-    <pre>nx dep-graph</pre>
-  </details>
-  <details>
-    <summary>Run affected commands</summary>
-    <pre>
-# see what's been affected by changes
-ng affected:dep-graph
+<h2>Details</h2>
 
-# run tests for current changes
-ng affected:test
+<xng-breadcrumb id="default"></xng-breadcrumb>
 
-# run e2e tests for current changes
-ng affected:e2e
-</pre
-    >
-  </details>
-</main>
+<router-outlet></router-outlet>

apps/got-demo/src/app/app.module.ts

@@ -4,13 +4,17 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { ROUTER_COMPONENTS, AppRoutingModule } from './app.routing.module';
 import { HttpClientModule } from '@angular/common/http';
+import { BookComponent } from './book/book.component';
+import { CharacterComponent } from './character/character.component';
+import { BreadcrumbModule } from '@xng/xng-breadcrumb';
 
 @NgModule({
-  declarations: [AppComponent, ...ROUTER_COMPONENTS],
+  declarations: [AppComponent, ...ROUTER_COMPONENTS, BookComponent, CharacterComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    BreadcrumbModule
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/got-demo/src/app/app.routing.module.ts

@@ -2,11 +2,23 @@ import { RouterModule, Routes } from "@angular/router";
 import { NgModule } from "@angular/core";
 import { HousesComponent } from './houses/houses.component';
 import { BooksComponent } from './books/books.component';
+import { BookComponent } from './book/book.component';
+import { CharacterComponent } from './character/character.component';
 
 export const appRoutes: Routes = [
   {
     path: "books",
     component: BooksComponent,
+  },
+  {
+    path: "books/:bookId",
+    component: BookComponent,
+    children: [
+      {
+        path: "characters/:id",
+        component: CharacterComponent,
+      }
+    ]
   }, {
     path: "houses",
     component: HousesComponent,
@@ -19,4 +31,4 @@ export const appRoutes: Routes = [
 })
 export class AppRoutingModule { }
 
-export const ROUTER_COMPONENTS = [BooksComponent, HousesComponent];
+export const ROUTER_COMPONENTS = [BooksComponent, BookComponent, HousesComponent, CharacterComponent];

apps/got-demo/src/app/book/book.component.html

@@ -0,0 +1,8 @@
+<div *ngIf="book$ | async as book; else loading">
+  <ul>
+    <li *ngFor="let character of book.characters">
+      <a [routerLink]="['./characters', character.split('/').pop()]">{{character}}</a>
+    </li>
+  </ul>
+ </div>
+<ng-template #loading>loading ...</ng-template>

apps/got-demo/src/app/book/book.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { DataService } from '../data.service';
+import { Observable } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'got-book',
+  templateUrl: './book.component.html',
+  styleUrls: ['./book.component.css']
+})
+export class BookComponent implements OnInit {
+  book$: Observable<any[]>
+  constructor(private dataService: DataService, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.book$ = this.dataService.getBook(this.route.snapshot.paramMap.get('bookId'));
+  }
+}

apps/got-demo/src/app/books/books.component.html

@@ -1,3 +1,5 @@
+<router-outlet></router-outlet>
+
 <div *ngIf="books$ | async as books; else loading">
   <ul>
     <li *ngFor="let book of books">

apps/got-demo/src/app/character/character.component.html

@@ -0,0 +1 @@
+<p>character works!</p>

apps/got-demo/src/app/character/character.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'got-character',
+  templateUrl: './character.component.html',
+  styleUrls: ['./character.component.css']
+})
+export class CharacterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

apps/got-demo/src/app/data.service.ts

@@ -17,6 +17,11 @@ export class DataService {
     return this.http.get<any[]>(`${this.API}/books`);
   }
 
+  getBook(id: string): Observable<any[]> {
+    return this.http.get<any[]>(`${this.API}/books/${id}`);
+  }
+
+
   getCharacters(): Observable<any[]> {
     return this.http.get<any[]>(`${this.API}/characters`);
   }