From 556e40695a1cf743891ab51b29bc5f23cf7d80a5 Mon Sep 17 00:00:00 2001 From: Brandon Date: Sun, 25 Sep 2016 20:56:12 -0500 Subject: [PATCH] docs(toh): Replaced window.history with location service (#2439) --- .../toh-5/ts/app/hero-detail.component.1.ts | 8 +++++--- .../toh-5/ts/app/hero-detail.component.ts | 14 ++++++++------ .../toh-6/ts/app/hero-detail.component.ts | 12 +++++++----- public/docs/ts/latest/tutorial/toh-pt5.jade | 11 ++++++----- 4 files changed, 26 insertions(+), 19 deletions(-) diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts index efbe8ee913..6713ce4dc7 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts +++ b/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() {} } diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 5b0474f020..38b7384618 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/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 } diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts index d13f9cd046..001b34baf7 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts +++ b/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(); } } diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 9e5e914a59..564537fa60 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/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.