exercice 1: add routing and api use

src/app/app-routing.module.ts

@@ -1,8 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import {ChuckComponent} from './chuck/chuck.component';
+import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: 'chuck', component: ChuckComponent},
+  { path: '',   redirectTo: '/chuck', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent},
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1 +1,9 @@
-<app-comments></app-comments>
+<app-comments></app-comments>
+<h1>Router & API test</h1>
+<nav>
+  <ul>
+    <li><a routerLink="/chuck" routerLinkActive="active">Chuck Norris</a></li>
+  </ul>
+</nav>
+<!-- The routed views render in the <router-outlet>-->
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -3,23 +3,28 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BestPracticeComponent } from './best-practice/best-practice.component'
-import { ProductComponent } from './products/product/product.component'
+import { BestPracticeComponent } from './best-practice/best-practice.component';
+import { ProductComponent } from './products/product/product.component';
 import { FormsModule } from '@angular/forms';
-import { CommentModule } from './comments/comments.module'
-
+import { CommentModule } from './comments/comments.module';
+import { ChuckComponent } from './chuck/chuck.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
     AppComponent,
     BestPracticeComponent,
-    ProductComponent
+    ProductComponent,
+    ChuckComponent,
+    PageNotFoundComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    CommentModule
+    CommentModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/chuck/chuck.component.html

@@ -0,0 +1,6 @@
+<button (click)="getNewJoke()">Get new Joke</button>
+<ul>
+  <li *ngFor="let joke of jokes">
+    <span>{{joke.randomJoke}}</span>
+  </li>
+</ul>

src/app/chuck/chuck.component.spec.ts

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

src/app/chuck/chuck.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import {ChuckService} from './chuck.service';
+import {Joke} from './joke.model';
+
+@Component({
+  selector: 'app-chuck',
+  templateUrl: './chuck.component.html',
+  styleUrls: ['./chuck.component.css']
+})
+export class ChuckComponent implements OnInit {
+
+  jokes: Joke[] = [];
+
+  constructor(private chuckService: ChuckService) { }
+
+  ngOnInit() {
+  }
+
+  getNewJoke(): void {
+    this.chuckService.getJokes().subscribe({next(data) {this.jokes = [{randomJoke: data.value}];
+                                                        console.log('joke in subscribe -----------------------', data.value); }}) ;
+    console.log('joke outside subscribe -----------------------', this.jokes);
+  }
+
+}

src/app/chuck/chuck.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChuckService } from './chuck.service';
+
+describe('ChuckService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ChuckService = TestBed.get(ChuckService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/chuck/chuck.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import {Joke} from './joke.model';
+import {HttpClient} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {catchError, retry} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChuckService {
+configUrl = 'https://api.chucknorris.io/jokes/random';
+  constructor(private http: HttpClient) { }
+
+  getJokes(): Observable<any> {
+    return this.http.get(this.configUrl).pipe();
+  }
+}

src/app/chuck/joke.model.spec.ts

@@ -0,0 +1,7 @@
+import { Joke } from './joke.model';
+
+describe('Joke', () => {
+  it('should create an instance', () => {
+    expect(new Joke()).toBeTruthy();
+  });
+});

src/app/chuck/joke.model.ts

@@ -0,0 +1,3 @@
+export class Joke {
+  randomJoke: string;
+}

src/app/page-not-found/page-not-found.component.css

@@ -0,0 +1,3 @@
+.title {
+  font-size: xxx-large;
+}

src/app/page-not-found/page-not-found.component.html

@@ -0,0 +1,3 @@
+<div class="title">Oops!</div>
+<div>404 - PAGE NOT FOUND</div>
+<button (click)="btnClick();">GO TO HOMEPAGE</button>

src/app/page-not-found/page-not-found.component.spec.ts

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

src/app/page-not-found/page-not-found.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.css']
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+  btnClick = function() {
+    this.router.navigateByUrl('/chuck');
+  };
+}