docs(toh): Replaced window.history with location service (#2439)

Author: brandonroberts

public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts

@@ -5,7 +5,8 @@
 // #docregion added-imports
 // Keep the Input import for now, we'll remove it later:
 import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params }   from '@angular/router';
+import { Location }                 from '@angular/common';
 
 import { HeroService } from './hero.service';
 // #enddocregion added-imports
@@ -20,8 +21,9 @@ export class HeroDetailComponent implements OnInit {
 
   constructor(
     private heroService: HeroService,
-    private route: ActivatedRoute) {
-  }
+    private route: ActivatedRoute,
+    private location: Location
+  ) {}
 
   ngOnInit() {}
 }

public/docs/_examples/toh-5/ts/app/hero-detail.component.ts

@@ -1,10 +1,11 @@
 // #docplaster
 // #docregion , v2
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
+import { Location }               from '@angular/common';
 
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { Hero }         from './hero';
+import { HeroService }  from './hero.service';
 
 @Component({
   moduleId: module.id,
@@ -23,8 +24,9 @@ export class HeroDetailComponent implements OnInit {
   // #docregion ctor
   constructor(
     private heroService: HeroService,
-    private route: ActivatedRoute) {
-  }
+    private route: ActivatedRoute,
+    private location: Location
+  ) {}
   // #enddocregion ctor
 
   // #docregion ngOnInit
@@ -39,7 +41,7 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion goBack
   goBack(): void {
-    window.history.back();
+    this.location.back();
   }
 // #enddocregion goBack
 }

public/docs/_examples/toh-6/ts/app/hero-detail.component.ts

@@ -1,6 +1,7 @@
 // #docregion
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
+import { Location }               from '@angular/common';
 
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
@@ -16,8 +17,9 @@ export class HeroDetailComponent implements OnInit {
 
   constructor(
     private heroService: HeroService,
-    private route: ActivatedRoute) {
-  }
+    private route: ActivatedRoute,
+    private location: Location
+  ) {}
 
   ngOnInit(): void {
     this.route.params.forEach((params: Params) => {
@@ -30,11 +32,11 @@ export class HeroDetailComponent implements OnInit {
   // #docregion save
   save(): void {
     this.heroService.update(this.hero)
-      .then(this.goBack);
+      .then(() => this.goBack());
   }
   // #enddocregion save
 
   goBack(): void {
-    window.history.back();
+    this.location.back();
   }
 }

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -24,7 +24,7 @@ figure.image-display
   img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
 
 :marked
-  We'll add Angular’s *Component Router* to our app to satisfy these requirements.
+  We'll add Angular’s *Router* to our app to satisfy these requirements.
 
 .l-sub-section
   :marked
@@ -166,7 +166,7 @@ block app-comp-v1
   Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
   In other words, we'd like to navigate to the list of heroes.
 
-  We'll need the Angular *Component Router*.
+  We'll need the Angular *Router*.
 
 block angular-router
   :marked
@@ -517,7 +517,7 @@ block route-params
 
 - var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
 :marked
-  Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected
+  Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected
   into the constructor, saving their values in private fields:
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
@@ -563,7 +563,8 @@ block extract-id
   How do we navigate somewhere else when we're done?
 
   The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
-  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack.
+  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
+  using the `Location` service we injected previously.
 
 +makeExcerpt('app/hero-detail.component.ts', 'goBack')
 
@@ -894,7 +895,7 @@ block file-tree-end
 
   We travelled a great distance in this chapter
 
-  - We added the Angular *Component Router* to navigate among different components.
+  - We added the Angular *Router* to navigate among different components.
   - We learned how to create router links to represent navigation menu items.
   - We used router link parameters to navigate to the details of user selected hero.
   - We shared the `HeroService` among multiple components.