staged1

src/app/app-routing.module.ts

@@ -1,26 +1,31 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'home',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
+  },
+  {
+    path: 'list',
+    loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
+  },  { path: 'toc', loadChildren: './toc/toc.module#TOCPageModule' },
+  { path: 'chapter1', loadChildren: './chapter1/chapter1.module#Chapter1PageModule' },
+  { path: 'chapter2', loadChildren: './chapter2/chapter2.module#Chapter2PageModule' },
+  { path: 'chapter3', loadChildren: './chapter3/chapter3.module#Chapter3PageModule' },
+  { path: 'chapter4', loadChildren: './chapter4/chapter4.module#Chapter4PageModule' }
 
-const routes: Routes = [
-  {
-    path: '',
-    redirectTo: 'home',
-    pathMatch: 'full'
-  },
-  {
-    path: 'home',
-    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
-  },
-  {
-    path: 'list',
-    loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
-  }
-  ];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+  ];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -3,7 +3,7 @@
     <ion-menu type="overlay">
       <ion-header>
         <ion-toolbar>
-          <ion-title>Menu</ion-title>
+          <ion-title>My Badass Zakk Wylde Storybook</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content>
@@ -21,4 +21,4 @@
     </ion-menu>
     <ion-router-outlet main></ion-router-outlet>
   </ion-split-pane>
-</ion-app>
+</ion-app>

src/app/app.component.ts

@@ -16,10 +16,10 @@ export class AppComponent {
       url: '/home',
       icon: 'home'
     },
+
     {
-      title: 'List',
-      url: '/list',
-      icon: 'list'
+      title: 'Table Of Contents',
+      url: '/toc'
     }
   ];
 

src/app/chapter1/chapter1.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { Chapter1Page } from './chapter1.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Chapter1Page
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [Chapter1Page]
+})
+export class Chapter1PageModule {}

src/app/chapter1/chapter1.page.html

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Chapter 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <img
+    src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2F736x%2F39%2Fa2%2F4f%2F39a24fa0ffdef278dbb625318c7f3943--zakk-wylde-zelda.jpg&f=1&nofb=1'>
+  <p>Zachary Phillip Wylde was born Jeffrey Phillip Wielandt in Bayonne, New Jersey, on January 14, 1967. He is of
+    Irish descent. He started playing guitar at the age of eight, but did not become serious about it until his early
+    teenage years. At the age of 14, he worked at Silverton Music in Silverton, New Jersey. He grew up in Jackson,
+    New Jersey, where he attended Jackson Memorial High School, graduating in 1985. He has stated that he often
+    played the guitar almost non-stop between coming home from school and leaving for school the next morning, then
+    would be completely exhausted during school the next day.
+  </p>
+  <ion-button color='success' expand='full' [routerDirection]="'root'" [routerLink]="['/chapter2']">Bold Step Forward
+  </ion-button>
+  <ion-button color='dark' expand='full' [routerDirection]="'root'" [routerLink]="['/toc']">Retreat</ion-button>
+</ion-content>

src/app/chapter1/chapter1.page.spec.ts

@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Chapter1Page } from './chapter1.page';
+
+describe('Chapter1Page', () => {
+  let component: Chapter1Page;
+  let fixture: ComponentFixture<Chapter1Page>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Chapter1Page ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Chapter1Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chapter1/chapter1.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-chapter1',
+  templateUrl: './chapter1.page.html',
+  styleUrls: ['./chapter1.page.scss'],
+})
+export class Chapter1Page implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/chapter2/chapter2.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { Chapter2Page } from './chapter2.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Chapter2Page
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [Chapter2Page]
+})
+export class Chapter2PageModule {}

src/app/chapter2/chapter2.page.html

@@ -0,0 +1,66 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Chapter 2</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <img
+    src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages-wixmp-ed30a86b8c4ca887773594c2.wixmp.com%2Ff%2Fbdf0e19c-2410-4ca8-a4fa-2c893b8f240f%2Fd8f178j-3cf53eaf-c0b5-4a12-be2b-9d9c029d5270.jpg%2Fv1%2Ffill%2Fw_1024%2Ch_615%2Cq_75%2Cstrp%2Fzakk_wylde__black_label_society_by_lizzys_photos_d8f178j-fullview.jpg%3Ftoken%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjE1IiwicGF0aCI6IlwvZlwvYmRmMGUxOWMtMjQxMC00Y2E4LWE0ZmEtMmM4OTNiOGYyNDBmXC9kOGYxNzhqLTNjZjUzZWFmLWMwYjUtNGExMi1iZTJiLTlkOWMwMjlkNTI3MC5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.6s69GehtHZJ3uGDEVYkkDyX3eFmLpfv1TQZhhAVPYh8&f=1&nofb=1">
+  <p>
+    Wylde played locally with his first band Stone Henge, then later with local New Jersey band Zyris. Later, he
+    auditioned for lead guitarist and co-writer for Ozzy Osbourne. Wylde was hired to replace Jake E. Lee, who replaced
+    Brad Gillis, who had himself replaced the deceased Randy Rhoads. Rhoads remains Wylde's foremost guitar-playing and
+    stagecraft influence.[6]
+  </p>
+  <p>
+    Wylde gravitated toward a particular Les Paul guitar, which has become known as "The Grail"; his bullseye-painted
+    1981 Gibson Les Paul Custom. Wylde lost the guitar in 2000 after it fell from the back of a truck transporting
+    equipment as he was travelling between gigs in Texas. Rewards were offered to anyone that had information about the
+    guitar. Wylde and The Grail were reunited three years later when a fan bought it at a Dallas pawn shop and saw the
+    initials "Z.W." carved into the humbucker pickups backs. He contacted Wylde's former webmaster Randy Canis to
+    arrange its return to Wylde. Grateful, Wylde gave the fan his signature model in exchange.[5]
+  </p>
+  <p>
+    In 1995, Wylde auditioned for Guns N' Roses.[7][8][9] Wylde was replaced in Osbourne's band by Joe Holmes from 1995
+    until his return in 2001. In January 2006, Wylde was recognized at the Hollywood Rock Walk of Fame, featuring his
+    handprints and signature, in recognition of his successful career as a musician and his contribution to the music
+    industry. The event was open to the public and many rock celebrities were present, including Ozzy Osbourne.[citation
+    needed]
+  </p>
+  <p>
+    For a time in the mid-2000s he contributed a monthly column entitled "Brew-tality" for Guitar World magazine,
+    discussing his techniques and equipment, as well as transcribing riffs and solo sections. After auditions in
+    2004/05, Ozzy Osbourne announced Wylde as the official guitarist for his album Black Rain, which was released in
+    2007. On stage with Osbourne, Wylde has been credited for lending a high level of energy and passion to
+    performances.[citation needed]
+  </p>
+  <p>
+    Black Label Society headlined the second stage at the 2006 Ozzfest, with Wylde playing double duty with Ozzy
+    Osbourne on certain dates.[10] He also joined Osbourne for the Ozzy and Friends Tour in replacement of the Black
+    Sabbath tour scheduled for the summer of 2012, playing a range of European dates including Graspop Metal Meeting in
+    Belgium.[11]
+  </p>
+  <p>
+    Wylde played a guitar solo on Black Veil Brides' cover of Kiss' "Unholy", on the 2011 EP Rebels.[12]
+  </p>
+  <p>
+    Wylde in 2010
+    Since 2014, Wylde has led a Black Sabbath cover band called Zakk Sabbath, handling guitar and vocal duties, joined
+    by Rob "Blasko" Nicholson on bass and Joey Castillo (Danzig, Queens of the Stone Age) on drums, who replaced
+    original drummer John Tempesta. JP Gaster (Clutch) occupied the drummer's seat in between, in September 2017.[13]
+    The band tours intermittently, and released a single, three-track vinyl-only live 12", in 2016.[14]
+  </p>
+  <p>
+    Wylde, Steve Vai, Nuno Bettencourt, Yngwie Malmsteen, and Tosin Abasi were featured on the Generation Axe tour in
+    2016, 2017, and 2018.
+  </p>
+  <p>
+    Wylde joined Ozzy Osbourne's band for a select number of dates during Osbourne's 2017 summer tour, and then
+    performed as part of the No More Tours II tour.[15]
+  </p>
+  <ion-button color='success' expand='full' [routerDirection]="'root'" [routerLink]="['/chapter3']">Bold Step Forward
+  </ion-button>
+  <ion-button color='dark' expand='full' [routerDirection]="'root'" [routerLink]="['/chapter1']">Retreat</ion-button>
+
+</ion-content>

src/app/chapter2/chapter2.page.spec.ts

@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Chapter2Page } from './chapter2.page';
+
+describe('Chapter2Page', () => {
+  let component: Chapter2Page;
+  let fixture: ComponentFixture<Chapter2Page>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Chapter2Page ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Chapter2Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chapter2/chapter2.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-chapter2',
+  templateUrl: './chapter2.page.html',
+  styleUrls: ['./chapter2.page.scss'],
+})
+export class Chapter2Page implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/chapter3/chapter3.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { Chapter3Page } from './chapter3.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Chapter3Page
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [Chapter3Page]
+})
+export class Chapter3PageModule {}

src/app/chapter3/chapter3.page.html

@@ -0,0 +1,51 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Chapter 3</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <img
+    src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftownsquare.media%2Fsite%2F366%2Ffiles%2F2016%2F05%2FOzzfest-Knotfest-ZakkSabbath-20160512-KathyFlynn-4393.jpg%3Fw%3D1200%26h%3D0%26zc%3D1%26s%3D0%26a%3Dt%26q%3D89&f=1&nofb=1'>
+  <p>
+    Wylde is known for his use of Gibson Les Paul Custom model guitars, equipped with EMG -81 and -85 active pickups,
+    with his signature black-and-white "bulls-eye" graphic on them, a design he used to differentiate himself visually
+    from Randy Rhoads – who was also frequently identified by his cream-colored Les Paul Custom, the guitar Wylde has
+    used since he was 12 years old.[citation needed] The "bulls-eye" paint job was originally supposed to look like the
+    spiral from the Alfred Hitchcock movie Vertigo, but when it came back incorrect from the paint shop, he liked the
+    result and decided to keep it.[26] One of Wylde's favorite stage guitars is a GMW RR-V, a model that is famously
+    known as the "Polka-dot V" Created originally by luthier Karl Sandoval of California, used by Randy Rhoads, often
+    mistaken as a custom Flying V.
+  </p>
+  <p>
+    Wylde's signature Les Pauls include a red flame-maple bulls-eye model, a black and antique-white bulls-eye model, an
+    orange "buzz-saw" model, the pattern on which was inspired by a design on a Zippo lighter,[27] and a "camo"
+    bulls-eye model with mother of pearl neck inlays and a green camouflage paint scheme. His original bulls-eye Les
+    Paul was purchased from one of the owners of Metaltronix Amplification. Metaltronix was building a one-off live rig
+    for Wylde that was designed around one of the owner's guitars, a creamy white Les Paul Custom with EMG pickups,
+    which would later become known as "The Grail". Wylde has a custom Dean Splittail with a mud splatter bulls-eye
+    graphic, as well as a signature Splittail shaped Gibson model called the "ZV". Another Dean in his collection is a
+    Dime series Razorback with custom Bulls-eye graphics ordered for him specially by Dimebag Darrell shortly before his
+    murder in 2004; since receiving the guitar, he has only ever used it on stage to play the song "In This River",
+    Zakk's personal tribute to Dimebag.
+  </p>
+  <p>
+    In practice, Wylde uses Marshall MG Series practice combos ranging in wattage levels from 10-30W during tour/private
+    use especially in hotels and buses. He has also been known to use Marshall Valvestate combo amplifiers. Wylde has an
+    extensive relationship with Marshall Amplification due to his love for their amplifiers, both solid state and
+    tube-driven. Live, Wylde exclusively uses Marshall JCM 800's with twin 4 X 12 Cabinets loaded with EVM12L 300W Black
+    Label Speakers. His usual signal path consists of his guitar > (on stage pedal board) Dunlop Wylde Wah > Dunlop
+    Wylde Rotovibe > MXR ZW Phase 90 > MXR Wylde Overdrive > MXR Carbon Copy Delay > (to a back stage pedal board) > MXR
+    EVH Flanger > MXR Black Label Chorus > split signals, one to each distorted amp into the High Gain input.
+  </p>
+  <p>
+    A detailed gear diagram of Wylde's 1988 Ozzy Osbourne guitar rig is well-documented.
+  </p>
+  <p>
+    At the 2015 NAMM Show, Wylde announced his new company called Wylde Audio and provided a preview of his new line of
+    custom guitars and amplifiers. Currently he now is seen playing Wylde Audio equipment almost exclusively.
+  </p>
+  <ion-button color='success' expand='full' [routerDirection]="'root'" [routerLink]="['/chapter4']">Bold Step Forward
+  </ion-button>
+  <ion-button color='dark' expand='full' [routerDirection]="'root'" [routerLink]="['/chapter2']">Retreat</ion-button>
+</ion-content>