01-nothing-happens-component.ts

@Component({
    selector:'app',
    template: `
        <button (click)="save()">Save Lesson</button>
        <lessons-list [lessons]="lessons"></lessons-list>
        `
})
export class App {

    constructor(private lessonsService: LessonsService) {
    }

    save() {
        this.lessonsService.createLesson("Introduction to Components");
    }

}

02-nothing-happens-service.ts

@Injectable()
export class LessonsService {

    constructor(private http: Http) {

    }

    createLesson(description) {

        const headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        headers.append('X-Requested-With','XMLHttpRequest');

        this.http.post('/lessons', JSON.stringify({description}), headers);
    }

}

03-nothing-happens-component-fixed.ts

@Component({
    selector:'app',
    template: `...`
})
export class App {
    
    constructor(private lessonsService: LessonsService) {

    }
    
    save() {
        this.lessonsService.createLesson("Introduction to Components")
            .subscribe(
                () => console.log('lesson saved successfully'),
                console.error
            );
    }

}

03-nothing-happens-service-fixed.ts

import {Injectable} from "@angular/core";
import {Http, Headers} from "@angular/http";
import {xhrHeaders} from "./xhr-headers";


@Injectable()
export class LessonsService {

    constructor(private http: Http) {

    }

    createLesson(description) {
        const headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        headers.append('X-Requested-With','XMLHttpRequest');
        return this.http.post('/lessons', JSON.stringify({description}), headers);
    }

}

04-duplicate-calls-service.ts

@Injectable()
export class LessonsService {

    constructor(private http: Http) {

    }

    loadLessons() {
        return this.http.get('/lessons');
    }

}

05-duplicate-calls-caller.ts

@Component({
    selector:'app',
    template: `
        <button (click)="save()">Save Lesson</button>
        <lessons-list [lessons]="lessons$ | async"></lessons-list>
        `
})
export class App implements OnInit {

    lessons$: Observable<Lesson[]>;

    constructor(private lessonsService: LessonsService) {

    }

    ngOnInit() {
        this.lessons$ = this.lessonsService.loadLessons();

        this.lessons$.subscribe(
            () => console.log('lessons loaded'),
            console.error
        );
    }
}
      

06-duplicate-calls-fix.ts

ngOnInit() {
    
    this.lessons$ = this.lessonsService.loadLessons().pipe(shareReplay());

    this.lessons$.subscribe(
        () => console.log('lessons loaded'),
        console.error
    );
}

07-router-data-resolver.ts

import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {Lesson} from "./lesson";
import {Observable} from "rxjs/Rx";
import {Injectable} from "@angular/core";
import {LessonsService} from "./lessons.service";


@Injectable()
export class LessonResolver implements Resolve<Lesson> {


    constructor(private lessonsService: LessonsService) {

    }

    resolve(route:ActivatedRouteSnapshot,
            state:RouterStateSnapshot):Observable<Lesson> {

        return this.lessonsService
            .findLessonByUrl(route.params['id']);
    }

}

08-router-config.ts

{
  path: 'lessons/:id',
  children: [
      {
          path: 'edit',
          component:  EditLessonComponent,
          resolve: {
            lesson: LessonResolver
          }
      }
  ]
}

09-data-resolver.ts

resolve(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<Lesson> {
  return this.lessonsService
      .findLessonByUrl(route.params['id'])
      .first();
}