From c24dd074a6acbceb87f8e973969c9bd94f769d8f Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Tue, 8 Nov 2016 14:48:03 -0800 Subject: [PATCH] docs(toh-5/dart): use routerLink in dashboard (#2744) * docs(toh-5/dart): use routerLink in dashboard * minor edits to TS jade * remove dart/toh-pt5 from bad-code-excerpt-skip-patterns --- .../toh-5/dart/lib/dashboard_component.dart | 12 +- .../toh-5/dart/lib/dashboard_component.html | 2 +- ...nent.1.html => dashboard_component_1.html} | 0 .../toh-5/dart/lib/hero_detail_component.dart | 11 +- .../toh-5/dart/lib/heroes_component.dart | 2 + .../toh-5/ts/app/dashboard.component.ts | 1 - public/docs/dart/latest/tutorial/toh-pt5.jade | 11 +- public/docs/ts/_cache/tutorial/toh-pt5.jade | 224 +++++++++++------- public/docs/ts/latest/tutorial/toh-pt5.jade | 108 +++++---- .../config/bad-code-excerpt-skip-patterns.txt | 1 - 10 files changed, 218 insertions(+), 154 deletions(-) rename public/docs/_examples/toh-5/dart/lib/{dashboard_component.1.html => dashboard_component_1.html} (100%) diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart index bc2293cec1..1731bf4d0e 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart @@ -4,21 +4,27 @@ import 'dart:async'; import 'package:angular2/core.dart'; +// #docregion import-router +import 'package:angular2/router.dart'; +// #enddocregion import-router import 'hero.dart'; import 'hero_service.dart'; // #enddocregion imports +// #docregion metadata @Component( selector: 'my-dashboard', // #docregion templateUrl templateUrl: 'dashboard_component.html', // #enddocregion templateUrl // #docregion css - styleUrls: const ['dashboard_component.css'] + styleUrls: const ['dashboard_component.css'], // #enddocregion css + directives: const [ROUTER_DIRECTIVES], ) -// #docregion component +// #enddocregion metadata +// #docregion class, component class DashboardComponent implements OnInit { List heroes; @@ -26,11 +32,9 @@ class DashboardComponent implements OnInit { final HeroService _heroService; DashboardComponent(this._heroService); - // #enddocregion ctor Future ngOnInit() async { heroes = (await _heroService.getHeroes()).skip(1).take(4).toList(); } } -// #enddocregion component diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html index 49e77c460c..f48c102949 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html @@ -2,7 +2,7 @@

Top Heroes

- +

{{hero.name}}

diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html similarity index 100% rename from public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html rename to public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart index a99528cbaa..df03c092f3 100644 --- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart @@ -2,12 +2,12 @@ // #docregion , v2 // #docregion added-imports import 'dart:async'; -import 'dart:html' show window; // #enddocregion added-imports import 'package:angular2/core.dart'; // #docregion added-imports import 'package:angular2/router.dart'; +import 'package:angular2/platform/common.dart'; // #enddocregion added-imports import 'hero.dart'; @@ -17,9 +17,9 @@ import 'hero_service.dart'; @Component( selector: 'my-hero-detail', - // #docregion templateUrl + // #docregion metadata, templateUrl templateUrl: 'hero_detail_component.html', - // #enddocregion templateUrl, v2 + // #enddocregion metadata, templateUrl, v2 styleUrls: const ['hero_detail_component.css'] // #docregion v2 ) @@ -30,8 +30,9 @@ class HeroDetailComponent implements OnInit { // #docregion ctor final HeroService _heroService; final RouteParams _routeParams; + final Location _location; - HeroDetailComponent(this._heroService, this._routeParams); + HeroDetailComponent(this._heroService, this._routeParams, this._location); // #enddocregion ctor // #docregion ngOnInit @@ -44,7 +45,7 @@ class HeroDetailComponent implements OnInit { // #docregion goBack void goBack() { - window.history.back(); + _location.back(); } // #enddocregion goBack } diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart index e19c3ab3be..2e0eddd076 100644 --- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart @@ -41,9 +41,11 @@ class HeroesComponent implements OnInit { selectedHero = hero; } + // #docregion gotoDetail Future gotoDetail() => _router.navigate([ 'HeroDetail', {'id': selectedHero.id.toString()} ]); + // #enddocregion gotoDetail // #docregion renaming } diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index cb5cfc5b82..9311a74395 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -33,4 +33,3 @@ export class DashboardComponent implements OnInit { .then(heroes => this.heroes = heroes.slice(1, 5)); } } -// #enddocregion class diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade index 6be571c148..9ce3e7ed7b 100644 --- a/public/docs/dart/latest/tutorial/toh-pt5.jade +++ b/public/docs/dart/latest/tutorial/toh-pt5.jade @@ -96,12 +96,13 @@ block redirect-vs-use-as-default router will display the dashboard when the browser URL doesn't match an existing route. block templateUrl-path-resolution - :marked - The value of `templateUrl` can be an [asset][] in this package or another - package. To use an asset in another package, use a full package reference, - such as `'package:some_other_package/dashboard_component.html'`. + .l-sub-section + :marked + The value of `templateUrl` can be an [asset][] in this package or another + package. To use an asset in another package, use a full package reference, + such as `'package:some_other_package/dashboard_component.html'`. - [asset]: https://www.dartlang.org/tools/pub/glossary#asset + [asset]: https://www.dartlang.org/tools/pub/glossary#asset block route-params :marked diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade index 67f14e41a1..d64c457f15 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt5.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade @@ -2,7 +2,7 @@ block includes include ../_util-fns - - var _appRoutingTsVsAppComp = 'app-routing.module.ts' + - var _appRoutingTsVsAppComp = 'app.module.ts' - var _declsVsDirectives = 'declarations' - var _RoutesVsAtRouteConfig = 'Routes' - var _RouterModuleVsRouterDirectives = 'RouterModule' @@ -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 @@ -52,7 +52,7 @@ figure.image-display block intro-file-tree .filetree - .file angular2-tour-of-heroes + .file angular-tour-of-heroes .children .file app .children @@ -164,7 +164,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 @@ -192,7 +192,7 @@ block router-config-intro ### Configure routes Our application doesn't have any routes yet. - We'll start by creating a configuration file for the application routes. + We'll start by creating a configuration for the application routes. :marked *Routes* tell the router which views to display when a user clicks a link or @@ -200,7 +200,7 @@ block router-config-intro Let's define our first route as a route to the heroes component: -- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app-routing.module.ts' +- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts' +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes') - var _are = _docsFor == 'dart' ? 'takes' : 'are' @@ -222,24 +222,18 @@ block router-config-intro +ifDocsFor('ts|js') :marked - We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes. - This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`. + ### Make the router available - +makeExcerpt('app/app-routing.module.1.ts (excerpt)', 'routing-export') + We've setup the initial route configuration. Now we'll add it to our `AppModule`. + We'll add our configured `RouterModule` to the `AppModule` imports !{_array}. + + +makeExcerpt('app/app.module.2.ts (app routing)', '') .l-sub-section :marked - We call the `forRoot` method because we're providing a configured router at the _root_ of the application. - The `forRoot` method gives us the Router service providers and directives needed for routing. - - :marked - ### Make the router available - - We've setup initial routes in the `app-routing.module.ts` file. Now we'll add it to our root NgModule. - - Import the `routing` constant from `app-routing.module.ts` and add it the `imports` !{_array} of `AppModule`. - - +makeExcerpt('app/app.module.ts', 'routing') + We use the `forRoot` method because we're providing a configured router at the _root_ of the application. + The `forRoot` method gives us the Router service providers and directives needed for routing, and + performs the initial navigation based on the current browser URL. - var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes' :marked @@ -317,12 +311,12 @@ block routerLink Import the dashboard component and add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions. -- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app-routing.module.ts' +- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.module.3.ts' +makeExcerpt(_file + ' (Dashboard route)', 'dashboard') +ifDocsFor('ts|js') :marked - Also import and add `DashboardComponent` to our root NgModule's `declarations`. + Also import and add `DashboardComponent` to our `AppModule`'s `declarations`. +makeExcerpt('app/app.module.ts', 'dashboard') @@ -338,7 +332,7 @@ block redirect-vs-use-as-default We can use a redirect route to make this happen. Add the following to our array of route definitions: - +makeExcerpt('app/app-routing.module.ts','redirect') + +makeExcerpt('app/app.module.3.ts','redirect') .l-sub-section :marked @@ -354,7 +348,7 @@ block redirect-vs-use-as-default .l-sub-section :marked - We nestled the two links within `