From bacc4bcbac3014323ee0bb45abe03becf9d232eb Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Tue, 28 Jun 2016 08:16:59 -0700 Subject: [PATCH 01/31] docs(guide/{di,ts,toh-[23]}): follow-up to #1654 (#1767) Mainly Dart-side review, following #1654. dependency-injection: - Renamed components in providers_component.dart - E2e suites passed: - public/docs/_examples/dependency-injection/dart - public/docs/_examples/dependency-injection/ts template-syntax: - Removed unused global variable. - Suites passed: public/docs/_examples/template-syntax/dart public/docs/_examples/template-syntax/ts toh-2 & 3: - Clean-up. --- .../dart/lib/providers_component.dart | 71 +++++++++---------- .../dart/lib/hero_detail_component.dart | 2 - .../toh-2/dart/lib/app_component.dart | 30 ++++---- .../toh-3/dart/lib/app_component.dart | 26 +++---- 4 files changed, 63 insertions(+), 66 deletions(-) diff --git a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart index a52ea6d267..08c9e542a8 100644 --- a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart +++ b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart @@ -18,10 +18,10 @@ const template = '{{log}}'; providers: const [Logger] // #enddocregion providers-1, providers-logger ) -class ProviderComponent1 { +class Provider1Component { String log; - ProviderComponent1(Logger logger) { + Provider1Component(Logger logger) { logger.log('Hello from logger provided with Logger class'); log = logger.logs[0]; } @@ -31,15 +31,15 @@ class ProviderComponent1 { @Component( selector: 'provider-3', template: '{{log}}', - providers: + providers: // #docregion providers-3 const [const Provider(Logger, useClass: Logger)] // #enddocregion providers-3 ) -class ProviderComponent3 { +class Provider3Component { String log; - ProviderComponent3(Logger logger) { + Provider3Component(Logger logger) { logger.log('Hello from logger provided with useClass:Logger'); log = logger.logs[0]; } @@ -56,10 +56,10 @@ class BetterLogger extends Logger {} const [const Provider(Logger, useClass: BetterLogger)] // #enddocregion providers-4 ) -class ProviderComponent4 { +class Provider4Component { String log; - ProviderComponent4(Logger logger) { + Provider4Component(Logger logger) { logger.log('Hello from logger provided with useClass:BetterLogger'); log = logger.logs[0]; } @@ -87,10 +87,10 @@ class EvenBetterLogger extends Logger { const [UserService, const Provider(Logger, useClass: EvenBetterLogger)] // #enddocregion providers-5 ) -class ProviderComponent5 { +class Provider5Component { String log; - ProviderComponent5(Logger logger) { + Provider5Component(Logger logger) { logger.log('Hello from EvenBetterlogger'); log = logger.logs[0]; } @@ -116,10 +116,10 @@ class OldLogger extends Logger { const Provider(OldLogger, useClass: NewLogger)] // #enddocregion providers-6a ) -class ProviderComponent6a { +class Provider6aComponent { String log; - ProviderComponent6a(NewLogger newLogger, OldLogger oldLogger) { + Provider6aComponent(NewLogger newLogger, OldLogger oldLogger) { if (newLogger == oldLogger) { throw new Exception('expected the two loggers to be different instances'); } @@ -140,10 +140,10 @@ class ProviderComponent6a { const Provider(OldLogger, useExisting: NewLogger)] // #enddocregion providers-6b ) -class ProviderComponent6b { +class Provider6bComponent { String log; - ProviderComponent6b(NewLogger newLogger, OldLogger oldLogger) { + Provider6bComponent(NewLogger newLogger, OldLogger oldLogger) { if (newLogger != oldLogger) { throw new Exception('expected the two loggers to be the same instance'); } @@ -178,10 +178,10 @@ const silentLogger = const SilentLogger(); const [const Provider(Logger, useValue: silentLogger)] // #enddocregion providers-7 ) -class ProviderComponent7 { +class Provider7Component { String log; - ProviderComponent7(Logger logger) { + Provider7Component(Logger logger) { logger.log('Hello from logger provided with useValue'); log = logger.logs[0]; } @@ -191,13 +191,13 @@ class ProviderComponent7 { selector: 'provider-8', template: '{{log}}', providers: const [heroServiceProvider, Logger, UserService]) -class ProviderComponent8 { - // #docregion provider-8-ctor - ProviderComponent8(HeroService heroService); - // #enddocregion provider-8-ctor - +class Provider8Component { // must be true else this component would have blown up at runtime var log = 'Hero service injected successfully via heroServiceProvider'; + + // #docregion provider-8-ctor + Provider8Component(HeroService heroService); + // #enddocregion provider-8-ctor } @Component( @@ -208,12 +208,12 @@ class ProviderComponent8 { const Provider(APP_CONFIG, useValue: heroDiConfig)] // #enddocregion providers-9 ) -class ProviderComponent9 implements OnInit { +class Provider9Component implements OnInit { Map _config; String log; // #docregion provider-9-ctor - ProviderComponent9(@Inject(APP_CONFIG) this._config); + Provider9Component(@Inject(APP_CONFIG) this._config); // #enddocregion provider-9-ctor @override @@ -225,7 +225,7 @@ class ProviderComponent9 implements OnInit { // Sample providers 1 to 7 illustrate a required logger dependency. // Optional logger, can be null. @Component(selector: 'provider-10', template: '{{log}}') -class ProviderComponent10 implements OnInit { +class Provider10Component implements OnInit { final Logger _logger; String log; @@ -234,11 +234,10 @@ class ProviderComponent10 implements OnInit { HeroService(@Optional() this._logger) { // #enddocregion provider-10-ctor */ - ProviderComponent10(@Optional() this._logger) { + Provider10Component(@Optional() this._logger) { const someMessage = 'Hello from the injected logger'; // #docregion provider-10-ctor - if (_logger != null) - _logger.log(someMessage); + _logger?.log(someMessage); } // #enddocregion provider-10-ctor @@ -263,15 +262,15 @@ class ProviderComponent10 implements OnInit {
''', directives: const [ - ProviderComponent1, - ProviderComponent3, - ProviderComponent4, - ProviderComponent5, - ProviderComponent6a, - ProviderComponent6b, - ProviderComponent7, - ProviderComponent8, - ProviderComponent9, - ProviderComponent10 + Provider1Component, + Provider3Component, + Provider4Component, + Provider5Component, + Provider6aComponent, + Provider6bComponent, + Provider7Component, + Provider8Component, + Provider9Component, + Provider10Component ]) class ProvidersComponent {} diff --git a/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart index 5fd0b1e3cf..5eb6da1c76 100644 --- a/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart +++ b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart @@ -4,8 +4,6 @@ import 'package:angular2/core.dart'; import 'hero.dart'; -var nextHeroDetailId = 1; - // #docregion input-output-2 @Component( // #enddocregion input-output-2 diff --git a/public/docs/_examples/toh-2/dart/lib/app_component.dart b/public/docs/_examples/toh-2/dart/lib/app_component.dart index 66268118dc..82fc56754a 100644 --- a/public/docs/_examples/toh-2/dart/lib/app_component.dart +++ b/public/docs/_examples/toh-2/dart/lib/app_component.dart @@ -8,6 +8,21 @@ class Hero { Hero(this.id, this.name); } +// #docregion hero-array +final List mockHeroes = [ + new Hero(11, 'Mr. Nice'), + new Hero(12, 'Narco'), + new Hero(13, 'Bombasto'), + new Hero(14, 'Celeritas'), + new Hero(15, 'Magneta'), + new Hero(16, 'RubberMan'), + new Hero(17, 'Dynama'), + new Hero(18, 'Dr IQ'), + new Hero(19, 'Magma'), + new Hero(20, 'Tornado') +]; +// #enddocregion hero-array + @Component( selector: 'my-app', template: ''' @@ -94,18 +109,3 @@ class AppComponent { } // #enddocregion on-select } -// #enddocregion - -// #docregion hero-array -final List mockHeroes = [ - new Hero(11, 'Mr. Nice'), - new Hero(12, 'Narco'), - new Hero(13, 'Bombasto'), - new Hero(14, 'Celeritas'), - new Hero(15, 'Magneta'), - new Hero(16, 'RubberMan'), - new Hero(17, 'Dynama'), - new Hero(18, 'Dr IQ'), - new Hero(19, 'Magma'), - new Hero(20, 'Tornado') -]; diff --git a/public/docs/_examples/toh-3/dart/lib/app_component.dart b/public/docs/_examples/toh-3/dart/lib/app_component.dart index d2ed99d75b..a51d317005 100644 --- a/public/docs/_examples/toh-3/dart/lib/app_component.dart +++ b/public/docs/_examples/toh-3/dart/lib/app_component.dart @@ -8,6 +8,19 @@ import 'hero.dart'; import 'hero_detail_component.dart'; // #enddocregion hero-detail-import +final List mockHeroes = [ + new Hero(11, 'Mr. Nice'), + new Hero(12, 'Narco'), + new Hero(13, 'Bombasto'), + new Hero(14, 'Celeritas'), + new Hero(15, 'Magneta'), + new Hero(16, 'RubberMan'), + new Hero(17, 'Dynama'), + new Hero(18, 'Dr IQ'), + new Hero(19, 'Magma'), + new Hero(20, 'Tornado') +]; + @Component( selector: 'my-app', // #docregion hero-detail-template @@ -87,16 +100,3 @@ class AppComponent { selectedHero = hero; } } - -final List mockHeroes = [ - new Hero(11, 'Mr. Nice'), - new Hero(12, 'Narco'), - new Hero(13, 'Bombasto'), - new Hero(14, 'Celeritas'), - new Hero(15, 'Magneta'), - new Hero(16, 'RubberMan'), - new Hero(17, 'Dynama'), - new Hero(18, 'Dr IQ'), - new Hero(19, 'Magma'), - new Hero(20, 'Tornado') -]; From 3510f96620085c2fd3e12e831b9b15663946fd58 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Tue, 28 Jun 2016 08:22:53 -0700 Subject: [PATCH 02/31] docs(guide/pipes): follow-up to #1654 (#1769) Mainly Dart-side review, following #1654: - Updates to follow style guide - Suites passed: public/docs/_examples/pipes/dart - Suites failed (known issue - #1761): public/docs/_examples/pipes/ts --- public/docs/_examples/pipes/dart/lib/app_component.dart | 8 ++++---- .../pipes/dart/lib/hero_birthday1_component.dart | 2 +- .../pipes/dart/lib/hero_birthday2_component.dart | 2 +- .../pipes/dart/lib/power_boost_calculator_component.dart | 2 +- .../_examples/pipes/dart/lib/power_booster_component.dart | 2 +- public/docs/_examples/pipes/dart/web/main.dart | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/public/docs/_examples/pipes/dart/lib/app_component.dart b/public/docs/_examples/pipes/dart/lib/app_component.dart index 85b32279a2..a03bb4a460 100644 --- a/public/docs/_examples/pipes/dart/lib/app_component.dart +++ b/public/docs/_examples/pipes/dart/lib/app_component.dart @@ -16,11 +16,11 @@ import 'power_booster_component.dart'; FlyingHeroesComponent, FlyingHeroesImpureComponent, HeroAsyncMessageComponent, - HeroBirthday, - HeroBirthday2, + HeroBirthdayComponent, + HeroBirthday2Component, HeroListComponent, - PowerBoostCalculator, - PowerBooster, + PowerBoostCalculatorComponent, + PowerBoosterComponent, ]) class AppComponent { DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 diff --git a/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart b/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart index accb756c37..2d2b63bb15 100644 --- a/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart +++ b/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart @@ -7,6 +7,6 @@ import 'package:angular2/angular2.dart'; template: "

The hero's birthday is {{ birthday | date }}

" // #enddocregion hero-birthday-template ) -class HeroBirthday { +class HeroBirthdayComponent { DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 } diff --git a/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart b/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart index eb76d84859..393a78bccb 100644 --- a/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart +++ b/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart @@ -11,7 +11,7 @@ import 'package:angular2/angular2.dart'; // #enddocregion template ) // #docregion class -class HeroBirthday2 { +class HeroBirthday2Component { DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 bool toggle = true; diff --git a/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart b/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart index 7c726ce511..1bf00b31fe 100644 --- a/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart +++ b/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart @@ -13,7 +13,7 @@ import 'exponential_strength_pipe.dart';

''', pipes: const [ExponentialStrengthPipe]) -class PowerBoostCalculator { +class PowerBoostCalculatorComponent { num power = 5; num factor = 1; } diff --git a/public/docs/_examples/pipes/dart/lib/power_booster_component.dart b/public/docs/_examples/pipes/dart/lib/power_booster_component.dart index 9152a2cc52..41a7be9878 100644 --- a/public/docs/_examples/pipes/dart/lib/power_booster_component.dart +++ b/public/docs/_examples/pipes/dart/lib/power_booster_component.dart @@ -9,4 +9,4 @@ import 'exponential_strength_pipe.dart';

Super power boost: {{2 | exponentialStrength: 10}}

''', pipes: const [ExponentialStrengthPipe]) -class PowerBooster {} +class PowerBoosterComponent {} diff --git a/public/docs/_examples/pipes/dart/web/main.dart b/public/docs/_examples/pipes/dart/web/main.dart index 98e9c1b34b..3266c05644 100644 --- a/public/docs/_examples/pipes/dart/web/main.dart +++ b/public/docs/_examples/pipes/dart/web/main.dart @@ -5,5 +5,5 @@ import 'package:pipe_examples/hero_birthday1_component.dart'; main() { bootstrap(AppComponent); - bootstrap(HeroBirthday); + bootstrap(HeroBirthdayComponent); } From 283195685f408c0b01bbba886f3365f7f4895003 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Tue, 28 Jun 2016 08:25:12 -0700 Subject: [PATCH 03/31] docs(guide/user-input): follow-up to #1654 (#1770) Mainly Dart-side review, following #1654: - Updates to follow style guide - Suites passed: public/docs/_examples/user-input/dart public/docs/_examples/user-input/ts Note: the click-me2 component is not mentioned in the prose, maybe it should be. --- .../user-input/dart/lib/app_component.dart | 4 ++-- .../dart/lib/click_me2_component.dart | 18 ++++++++++++++++++ .../dart/lib/click_me_component.dart | 15 +++++++++------ .../dart/lib/click_me_component_2.dart | 17 ----------------- 4 files changed, 29 insertions(+), 25 deletions(-) create mode 100644 public/docs/_examples/user-input/dart/lib/click_me2_component.dart delete mode 100644 public/docs/_examples/user-input/dart/lib/click_me_component_2.dart diff --git a/public/docs/_examples/user-input/dart/lib/app_component.dart b/public/docs/_examples/user-input/dart/lib/app_component.dart index d86db43cb0..5f2c86f8d9 100644 --- a/public/docs/_examples/user-input/dart/lib/app_component.dart +++ b/public/docs/_examples/user-input/dart/lib/app_component.dart @@ -2,7 +2,7 @@ import 'package:angular2/core.dart'; import 'click_me_component.dart'; -import 'click_me_component_2.dart'; +import 'click_me2_component.dart'; import 'keyup_components.dart'; import 'little_tour_component.dart'; import 'loop_back_component.dart'; @@ -12,7 +12,7 @@ import 'loop_back_component.dart'; templateUrl: 'app_component.html', directives: const [ ClickMeComponent, - ClickMeComponent2, + ClickMe2Component, KeyUpComponentV1, KeyUpComponentV2, KeyUpComponentV3, diff --git a/public/docs/_examples/user-input/dart/lib/click_me2_component.dart b/public/docs/_examples/user-input/dart/lib/click_me2_component.dart new file mode 100644 index 0000000000..3329a6692e --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/click_me2_component.dart @@ -0,0 +1,18 @@ +// #docregion +import 'package:angular2/core.dart'; + +@Component( + selector: 'click-me2', + template: ''' + + {{clickMessage}}''') +class ClickMe2Component { + String clickMessage = ''; + int _clicks = 1; + + void onClickMe2(dynamic event) { + var evtMsg = + event != null ? ' Event target is ' + event.target.tagName : ''; + clickMessage = ('Click #${_clicks++}. ${evtMsg}'); + } +} diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component.dart b/public/docs/_examples/user-input/dart/lib/click_me_component.dart index c1c7e19f93..c31d92e78b 100644 --- a/public/docs/_examples/user-input/dart/lib/click_me_component.dart +++ b/public/docs/_examples/user-input/dart/lib/click_me_component.dart @@ -1,3 +1,9 @@ +/* FOR DOCS ... MUST MATCH ClickMeComponent template +// #docregion click-me-button + +// #enddocregion click-me-button +*/ + // #docregion import 'package:angular2/core.dart'; @@ -5,15 +11,12 @@ import 'package:angular2/core.dart'; @Component( selector: 'click-me', template: ''' - // #docregion click-me-button - - // #enddocregion click-me-button - {{clickMessage}}''') + + {{clickMessage}}''') class ClickMeComponent { String clickMessage = ''; - onClickMe() { + void onClickMe() { clickMessage = 'You are my hero!'; } } -// #enddocregion click-me-component diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart deleted file mode 100644 index 8047b2280a..0000000000 --- a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -import 'package:angular2/core.dart'; - -@Component( - selector: 'click-me2', - template: ''' - {{clickMessage}}''') -class ClickMeComponent2 { - String clickMessage = ''; - int clicks = 1; - - onClickMe2(dynamic event) { - var evtMsg = - event != null ? ' Event target is ' + event.target.tagName : ''; - clickMessage = ('Click #${clicks++}. ${evtMsg}'); - } -} From 2480a9157060b0852dfde7e7d048a75328f9cee3 Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Tue, 28 Jun 2016 11:37:53 -0700 Subject: [PATCH 04/31] chore(api): remove internal compiler API from docgen closes #1771 --- tools/api-builder/angular.io-package/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js index 60a801057d..11ffe8cb17 100644 --- a/tools/api-builder/angular.io-package/index.js +++ b/tools/api-builder/angular.io-package/index.js @@ -62,8 +62,6 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe readTypeScriptModules.sourceFiles = [ '@angular/common/index.ts', '@angular/common/testing.ts', - '@angular/compiler/index.ts', - '@angular/compiler/testing.ts', '@angular/core/index.ts', '@angular/core/testing.ts', '@angular/http/index.ts', From c380d69ea1f4dd78ac79b8c4e1e849346c79f679 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Tue, 28 Jun 2016 15:48:15 +0200 Subject: [PATCH 05/31] chore: lock router-deprecated to rc.2 for plunkers --- public/docs/_examples/systemjs.config.plunker.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js index 40758797e6..a9ec367c33 100644 --- a/public/docs/_examples/systemjs.config.plunker.js +++ b/public/docs/_examples/systemjs.config.plunker.js @@ -8,6 +8,7 @@ var ngVer = '@2.0.0-rc.3'; // lock in the angular package version; do not let it float to current! var routerVer = '@3.0.0-alpha.7'; // lock router version var formsVer = '@0.1.1'; // lock forms version + var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides //map tells the System loader where to look for things var map = { @@ -16,6 +17,7 @@ '@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version '@angular/router': 'https://npmcdn.com/@angular/router' + routerVer, '@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer, + '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer, 'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest 'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6', 'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js', @@ -36,7 +38,6 @@ 'http', 'platform-browser', 'platform-browser-dynamic', - 'router-deprecated', 'upgrade', ]; @@ -62,6 +63,9 @@ // Forms not on rc yet packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' }; + // Temporarily until we update the guides + packages['@angular/router-deprecated'] = { main: '/bundles/router-deprecated' + '.umd.js', defaultExtension: 'js' }; + var config = { // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER transpiler: 'ts', From c02b942008b1a6e59ead4e3a513324ef72938963 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Mon, 27 Jun 2016 19:29:37 +0200 Subject: [PATCH 06/31] chore: update to router alpha.8 --- public/docs/_examples/package.json | 2 +- public/docs/_examples/quickstart/js/package.1.json | 2 +- public/docs/_examples/quickstart/ts/package.1.json | 2 +- public/docs/_examples/webpack/ts/package.webpack.json | 2 +- public/docs/_examples/webpack/ts/src/vendor.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 4f4dd51f00..672209a37d 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -32,7 +32,7 @@ "@angular/http": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/router": "3.0.0-alpha.7", + "@angular/router": "3.0.0-alpha.8", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.3", "angular2-in-memory-web-api": "0.0.12", diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index b5b25a4f10..7f58576e80 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -14,7 +14,7 @@ "@angular/http": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/router": "3.0.0-alpha.7", + "@angular/router": "3.0.0-alpha.8", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.3", diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index 9353dfaa3e..e57d118d8f 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -18,7 +18,7 @@ "@angular/http": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/router": "3.0.0-alpha.7", + "@angular/router": "3.0.0-alpha.8", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.3", diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index 4064a86611..cc5948be7f 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -17,7 +17,7 @@ "@angular/http": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/router-deprecated": "2.0.0-rc.2", + "@angular/router": "3.0.0-alpha.8", "core-js": "^2.4.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.6", diff --git a/public/docs/_examples/webpack/ts/src/vendor.ts b/public/docs/_examples/webpack/ts/src/vendor.ts index 1a45c91d46..ede1e2717d 100644 --- a/public/docs/_examples/webpack/ts/src/vendor.ts +++ b/public/docs/_examples/webpack/ts/src/vendor.ts @@ -5,7 +5,7 @@ import '@angular/platform-browser-dynamic'; import '@angular/core'; import '@angular/common'; import '@angular/http'; -import '@angular/router-deprecated'; +import '@angular/router'; // RxJS import 'rxjs'; From 1c5be21b326b113c07778f06fb7adf00ef8b23ab Mon Sep 17 00:00:00 2001 From: eltronix Date: Mon, 27 Jun 2016 20:06:12 +0300 Subject: [PATCH 07/31] Fixed typo --- public/docs/ts/latest/guide/animations.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index 4bf6fe2be6..3068a20990 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/public/docs/ts/latest/guide/animations.jade @@ -57,7 +57,7 @@ figure :marked With these we can now define an *animation trigger* called `heroState` in the component metadata. It has animated transitions between two states: `active` and `inactive`. When a - hero is active, we display a the element in slightly larger size and lighter color. + hero is active, we display the element in a slightly larger size and lighter color. +makeExample('animations/ts/app/hero-list-basic.component.ts', 'animationdef')(format=".") From 26027105a78ff2c9a4e0a8732b8896782aad61a3 Mon Sep 17 00:00:00 2001 From: Kai Ruhnau Date: Mon, 27 Jun 2016 12:57:32 +0200 Subject: [PATCH 08/31] docs(router): Fix the link to the APP_BASE_HREF page --- public/docs/ts/latest/guide/router.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index a92d0386c0..817912f031 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -1612,7 +1612,7 @@ code-example(format=".", language="bash"). .l-sub-section :marked - Learn about the [APP_BASE_HREF](../api/router/APP_BASE_HREF-let.html) + Learn about the [APP_BASE_HREF](../api/common/index/APP_BASE_HREF-let.html) in the API Guide. :marked ### *HashLocationStrategy* From 2eae445504e59c6ab6b216d22e96fac95703b9c6 Mon Sep 17 00:00:00 2001 From: Rick Beerendonk Date: Thu, 23 Jun 2016 14:09:49 +0200 Subject: [PATCH 09/31] docs(template-syntax): correct hyperlink path to API documentation --- public/docs/ts/latest/guide/template-syntax.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 2164fa744d..3414c3cdc0 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -881,7 +881,7 @@ block style-property-name-dart-diff The `ngModel` input property sets the element's value property and the `ngModelChange` output property listens for changes to the element's value. The details are specific to each kind of element and therefore the `NgModel` directive only works for elements, - such as the input text box, that are supported by a [ControlValueAccessor](../api/common/ControlValueAccessor-interface.html). + such as the input text box, that are supported by a [ControlValueAccessor](../api/common/index/ControlValueAccessor-interface.html). We can't apply `[(ngModel)]` to our custom components until we write a suitable *value accessor*, a technique that is beyond the scope of this chapter. @@ -1120,7 +1120,7 @@ block dart-no-truthy-falsey +makeExample('template-syntax/ts/app/app.component.html', 'NgFor-3')(format=".") .l-sub-section :marked - Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html). + Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/index/NgFor-directive.html). :marked #### NgForTrackBy From f3189546a6a44cd0be77758269ff9df2173c640f Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Sun, 19 Jun 2016 00:20:38 -0400 Subject: [PATCH 10/31] docs(toh-5): Upgraded tutorial to new router --- public/docs/_examples/styles.css | 26 +- .../_examples/toh-5/ts/app/app.component.1.ts | 3 +- .../_examples/toh-5/ts/app/app.component.2.ts | 15 +- .../_examples/toh-5/ts/app/app.component.3.ts | 33 ++ .../_examples/toh-5/ts/app/app.component.css | 2 +- .../_examples/toh-5/ts/app/app.component.ts | 34 +- .../_examples/toh-5/ts/app/app.routes.1.ts | 37 ++ .../_examples/toh-5/ts/app/app.routes.2.ts | 14 + .../docs/_examples/toh-5/ts/app/app.routes.ts | 32 ++ .../toh-5/ts/app/dashboard.component.ts | 4 +- .../toh-5/ts/app/hero-detail.component.ts | 27 +- .../toh-5/ts/app/heroes.component.ts | 4 +- public/docs/_examples/toh-5/ts/app/main.ts | 6 +- public/docs/_examples/toh-5/ts/plnkr.json | 2 +- public/docs/ts/latest/tutorial/toh-pt5.jade | 392 +++++++++--------- 15 files changed, 364 insertions(+), 267 deletions(-) create mode 100644 public/docs/_examples/toh-5/ts/app/app.component.3.ts create mode 100644 public/docs/_examples/toh-5/ts/app/app.routes.1.ts create mode 100644 public/docs/_examples/toh-5/ts/app/app.routes.2.ts create mode 100644 public/docs/_examples/toh-5/ts/app/app.routes.ts diff --git a/public/docs/_examples/styles.css b/public/docs/_examples/styles.css index 054b417f6f..62ddfa5121 100644 --- a/public/docs/_examples/styles.css +++ b/public/docs/_examples/styles.css @@ -1,20 +1,20 @@ /* Master Styles */ h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; + color: #369; + font-family: Arial, Helvetica, sans-serif; font-size: 250%; } -h2, h3 { +h2, h3 { color: #444; - font-family: Arial, Helvetica, sans-serif; + font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } -body { - margin: 2em; +body { + margin: 2em; } -body, input[text], button { - color: #888; - font-family: Cambria, Georgia; +body, input[text], button { + color: #888; + font-family: Cambria, Georgia; } a { cursor: pointer; @@ -34,7 +34,7 @@ button:hover { } button:disabled { background-color: #eee; - color: #aaa; + color: #aaa; cursor: auto; } @@ -54,7 +54,7 @@ nav a:hover { color: #039be5; background-color: #CFD8DC; } -nav a.router-link-active { +nav a.active { color: #039be5; } @@ -137,6 +137,6 @@ nav a.router-link-active { } /* everywhere else */ -* { - font-family: Arial, Helvetica, sans-serif; +* { + font-family: Arial, Helvetica, sans-serif; } diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts index 07a2317293..2f0e3506dd 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts @@ -8,7 +8,7 @@ import { HeroesComponent } from './heroes.component'; // #enddocregion // For testing only -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { ROUTER_DIRECTIVES } from '@angular/router'; // #docregion @Component({ @@ -20,7 +20,6 @@ import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/route directives: [HeroesComponent], providers: [ // #enddocregion - ROUTER_PROVIDERS, // #docregion HeroService ] diff --git a/public/docs/_examples/toh-5/ts/app/app.component.2.ts b/public/docs/_examples/toh-5/ts/app/app.component.2.ts index 6b690a6c63..c2699f317b 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.2.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.2.ts @@ -2,38 +2,27 @@ // #docregion import { Component } from '@angular/core'; // #docregion import-router -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { ROUTER_DIRECTIVES } from '@angular/router'; // #enddocregion import-router import { HeroService } from './hero.service'; -import { HeroesComponent } from './heroes.component'; @Component({ selector: 'my-app', // #docregion template template: `

{{title}}

- Heroes + Heroes `, // #enddocregion template // #docregion directives-and-providers directives: [ROUTER_DIRECTIVES], providers: [ - ROUTER_PROVIDERS, HeroService ] // #enddocregion directives-and-providers }) -// #docregion route-config -@RouteConfig([ - { - path: '/heroes', - name: 'Heroes', - component: HeroesComponent - } -]) -// #enddocregion route-config export class AppComponent { title = 'Tour of Heroes'; } diff --git a/public/docs/_examples/toh-5/ts/app/app.component.3.ts b/public/docs/_examples/toh-5/ts/app/app.component.3.ts new file mode 100644 index 0000000000..ff64e27ab1 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.component.3.ts @@ -0,0 +1,33 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; +import { ROUTER_DIRECTIVES } from '@angular/router'; + +import { HeroService } from './hero.service'; + +@Component({ + selector: 'my-app', + // #docregion template + template: ` +

{{title}}

+ + + `, + // #enddocregion template + // #docregion style-urls + styleUrls: ['app/app.component.css'], + // #enddocregion style-urls + directives: [ROUTER_DIRECTIVES], + providers: [ + HeroService + ] +}) +export class AppComponent { + title = 'Tour of Heroes'; +} +// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.component.css b/public/docs/_examples/toh-5/ts/app/app.component.css index f4e8082ea1..071e665767 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.css +++ b/public/docs/_examples/toh-5/ts/app/app.component.css @@ -24,6 +24,6 @@ nav a:hover { color: #039be5; background-color: #CFD8DC; } -nav a.router-link-active { +nav a.active { color: #039be5; } diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts index 5589cd84e9..3f3e758dcf 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.ts @@ -1,13 +1,8 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { ROUTER_DIRECTIVES } from '@angular/router'; -import { DashboardComponent } from './dashboard.component'; -import { HeroesComponent } from './heroes.component'; -// #docregion hero-detail-import -import { HeroDetailComponent } from './hero-detail.component'; -// #enddocregion hero-detail-import import { HeroService } from './hero.service'; @Component({ @@ -16,8 +11,8 @@ import { HeroService } from './hero.service'; template: `

{{title}}

`, @@ -27,32 +22,9 @@ import { HeroService } from './hero.service'; // #enddocregion style-urls directives: [ROUTER_DIRECTIVES], providers: [ - ROUTER_PROVIDERS, HeroService ] }) -@RouteConfig([ - // #docregion dashboard-route - { - path: '/dashboard', - name: 'Dashboard', - component: DashboardComponent, - useAsDefault: true - }, - // #enddocregion dashboard-route - // #docregion hero-detail-route - { - path: '/detail/:id', - name: 'HeroDetail', - component: HeroDetailComponent - }, - // #enddocregion hero-detail-route - { - path: '/heroes', - name: 'Heroes', - component: HeroesComponent - } -]) export class AppComponent { title = 'Tour of Heroes'; } diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts new file mode 100644 index 0000000000..17f2df4e98 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts @@ -0,0 +1,37 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; +// #docregion hero-detail-import +import { HeroDetailComponent } from './hero-detail.component'; +// #enddocregion hero-detail-import + +export const routes: RouterConfig = [ + // #docregion redirect-route + { + path: '', + redirectTo: '/dashboard', + terminal: true + }, + // #enddocregion redirect-route + // #docregion dashboard-route + { + path: 'dashboard', + component: DashboardComponent + }, + // #enddocregion dashboard-route + // #docregion hero-detail-route + { + path: 'detail/:id', + component: HeroDetailComponent + }, + // #enddocregion hero-detail-route + { + path: 'heroes', + component: HeroesComponent + } +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts new file mode 100644 index 0000000000..45ddeb9230 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts @@ -0,0 +1,14 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; +import { HeroesComponent } from './heroes.component'; + +const routes: RouterConfig = [ + { + path: '/heroes', + component: HeroesComponent + } +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routes.ts new file mode 100644 index 0000000000..b4f1f1efa1 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.routes.ts @@ -0,0 +1,32 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; + +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; +// #docregion hero-detail-import +import { HeroDetailComponent } from './hero-detail.component'; +// #enddocregion hero-detail-import + +export const routes: RouterConfig = [ + { + path: '', + redirectTo: '/dashboard', + terminal: true + }, + { + path: 'dashboard', + component: DashboardComponent + }, + { + path: 'detail/:id', + component: HeroDetailComponent + }, + { + path: 'heroes', + component: HeroesComponent + } +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; 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 e58760caad..6dd4b1abc2 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -2,7 +2,7 @@ // #docregion import { Component, OnInit } from '@angular/core'; // #docregion import-router -import { Router } from '@angular/router-deprecated'; +import { Router } from '@angular/router'; // #enddocregion import-router import { Hero } from './hero'; @@ -36,7 +36,7 @@ export class DashboardComponent implements OnInit { // #docregion goto-detail gotoDetail(hero: Hero) { - let link = ['HeroDetail', { id: hero.id }]; + let link = ['/detail', hero.id]; this.router.navigate(link); } // #enddocregion goto-detail 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 96eb8aa93f..61edccb90e 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,11 +1,11 @@ // #docplaster // #docregion // #docregion import-oninit, v2 -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; // #enddocregion import-oninit -// #docregion import-route-params -import { RouteParams } from '@angular/router-deprecated'; -// #enddocregion import-route-params +// #docregion import-activated-route +import { ActivatedRoute } from '@angular/router'; +// #enddocregion import-activated-route import { Hero } from './hero'; // #docregion import-hero-service @@ -23,27 +23,36 @@ import { HeroService } from './hero.service'; }) // #enddocregion extract-template // #docregion implement -export class HeroDetailComponent implements OnInit { +export class HeroDetailComponent implements OnInit, OnDestroy { // #enddocregion implement hero: Hero; + sub: any; // #docregion ctor constructor( private heroService: HeroService, - private routeParams: RouteParams) { + private route: ActivatedRoute) { } // #enddocregion ctor // #docregion ng-oninit ngOnInit() { // #docregion get-id - let id = +this.routeParams.get('id'); + this.sub = this.route.params.subscribe(params => { + let id = +params['id']; + this.heroService.getHero(id) + .then(hero => this.hero = hero); + }); // #enddocregion get-id - this.heroService.getHero(id) - .then(hero => this.hero = hero); } // #enddocregion ng-oninit + // #docregion ng-ondestroy + ngOnDestroy() { + this.sub.unsubscribe(); + } + // #enddocregion ng-ondestroy + // #docregion go-back goBack() { window.history.back(); diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index cd43e03b86..c0dbd9c8e7 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; +import { Router } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -36,7 +36,7 @@ export class HeroesComponent implements OnInit { onSelect(hero: Hero) { this.selectedHero = hero; } gotoDetail() { - this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); + this.router.navigate(['/detail', this.selectedHero.id]); } // #docregion heroes-component-renaming } diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts index ad256f0823..da35003df1 100644 --- a/public/docs/_examples/toh-5/ts/app/main.ts +++ b/public/docs/_examples/toh-5/ts/app/main.ts @@ -1,5 +1,9 @@ +// #docregion import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; +import { APP_ROUTER_PROVIDERS } from './app.routes'; -bootstrap(AppComponent); +bootstrap(AppComponent, [ + APP_ROUTER_PROVIDERS +]); diff --git a/public/docs/_examples/toh-5/ts/plnkr.json b/public/docs/_examples/toh-5/ts/plnkr.json index 019630c28f..fbed287e3f 100644 --- a/public/docs/_examples/toh-5/ts/plnkr.json +++ b/public/docs/_examples/toh-5/ts/plnkr.json @@ -3,7 +3,7 @@ "files":[ "!**/*.d.ts", "!**/*.js", - "!**/*.[1,2].*" + "!**/*.[1,2,3].*" ], "tags": ["tutorial", "tour", "heroes", "router"] } diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 9500cc490f..160672fb9a 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -2,12 +2,12 @@ include ../_util-fns :marked # Routing Around the App - We received new requirements for our Tour of Heroes application: + We received new requirements for our Tour of Heroes application: * Add a *Dashboard* view. * Navigate between the *Heroes* and *Dashboard* views. * Clicking on a hero in either view navigates to a detail view of the selected hero. - * Clicking a *deep link* in an email opens the detail view for a particular hero; - + * Clicking a *deep link* in an email opens the detail view for a particular hero; + When we’re done, users will be able to navigate the app like this: figure.image-display img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") @@ -15,21 +15,21 @@ figure.image-display We'll add Angular’s *Component Router* to our app to satisfy these requirements. .l-sub-section :marked - The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail - than we will in this tutorial. + The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail + than we will in this tutorial. p Run the #[+liveExampleLink2('', 'toh-5')] for this part. .l-sub-section img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") :marked - To see the URL changes in the browser address bar, + To see the URL changes in the browser address bar, pop out the preview window by clicking the blue 'X' button in the upper right corner: .l-main-section :marked ## Where We Left Off - Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service + Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service and hero detail component. If not, we’ll need to go back and follow the previous chapters. .filetree @@ -44,7 +44,7 @@ p Run the #[+liveExampleLink2('', 'toh-5')] for this part. .file main.ts .file mock-heroes.ts .file node_modules ... - .file typings ... + .file typings ... .file index.html .file package.json .file styles.css @@ -64,7 +64,7 @@ code-example(language="bash"). ## Action plan Here's our plan: - + * Turn `AppComponent` into an application shell that only handles navigation * Relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent` * Add routing @@ -74,13 +74,13 @@ code-example(language="bash"). .l-sub-section :marked *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view. - -.l-main-section + +.l-main-section :marked ## Splitting the *AppComponent* - + Our current app loads `AppComponent` and immediately displays the list of heroes. - + Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them. The `AppComponent` should only handle navigation. @@ -101,11 +101,11 @@ code-example(language="bash"). :marked ## Create *AppComponent* - The new `AppComponent` will be the application shell. + The new `AppComponent` will be the application shell. It will have some navigation links at the top and a display area below for the pages we navigate to. - + The initial steps are: - + * create a new file named `app.component.ts`. * define an `AppComponent` class. * `export` it so we can reference it during bootstrapping in `main.ts`. @@ -116,7 +116,7 @@ code-example(language="bash"). * add the `HeroesComponent` to the `directives` array so Angular recognizes the `` tags. * add the `HeroService` to the `providers` array because we'll need it in every other view. * add the supporting `import` statements. - + Our first draft looks like this: +makeExample('toh-5/ts/app/app.component.1.ts', null, 'app/app.component.ts (v1)') :marked @@ -127,104 +127,99 @@ code-example(language="bash"). We are *promoting* this service from the `HeroesComponent` to the `AppComponent`. We ***do not want two copies*** of this service at two different levels of our app. :marked - The app still runs and still displays heroes. + The app still runs and still displays heroes. Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked! We have done no harm. :marked ## Add Routing - - We're ready to take the next step. + + We're ready to take the next step. 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*. - + ### Set the base tag - Open the `index.html` and add `` at the top of the `` section. + Open the `index.html` and add `` at the top of the `` section. +makeExample('toh-5/ts/index.html', 'base-href', 'index.html (base href)')(format=".") .callout.is-important header base href is essential :marked - See the *base href* section of the [Router](../guide/router-deprecated.html#!#base-href) chapter to learn why this matters. + See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters. :marked - ### Make the router available. - The *Component Router* is a service. Like any service, we have to import it and make it - available to the application by adding it to the `providers` array. - - The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), - and a configuration decorator (`RouteConfig`). We'll import them all together: -+makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app/app.component.ts (router imports)')(format=".") -:marked - Next we update the `directives` and `providers` metadata arrays to *include* the router assets. -+makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app/app.component.ts (directives and providers)')(format=".") -:marked - Notice that we also removed the `HeroesComponent` from the `directives` array. - `AppComponent` no longer shows heroes; that will be the router's job. - We'll soon remove `` from the template too. - - ### Add and configure the router - - The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` decorator to simultaneously - (a) assign a router to the component and (b) configure that router with *routes*. - - *Routes* tell the router which views to display when a user clicks a link or + The Angular router is a combination of multiple provided services (`provideRouter`), multiple directives (`ROUTER_DIRECTIVES`), + and a configuration (`RouterConfig`). We'll configure our routes first: + + ### Configure and add the router + + Our application doesn't have a router yet. We'll create a configuration file for our routes that + does two things + (a) configure that router with *routes*. (b) provide an export to add the router to our bootstrap + + *Routes* tell the router which views to display when a user clicks a link or pastes a URL into the browser address bar. Let's define our first route, a route to the `HeroesComponent`. -+makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app/app.component.ts (RouteConfig for heroes)')(format=".") ++makeExample('toh-5/ts/app/app.routes.2.ts', '', 'app/app.routes.ts')(format=".") :marked - `@RouteConfig` takes an array of *route definitions*. - We have only one route definition at the moment but rest assured, we'll add more. - - This *route definition* has three parts: + The `RouterConfig` is an array of *route definitions*. + We have only one route definition at the moment but rest assured, we'll add more. + + This *route definition* has two parts: * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`). - - * **name**: the official name of the route; it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`). - + * **component**: the component that the router should create when navigating to this route (`HeroesComponent`). .l-sub-section :marked - Learn more about defining routes with @RouteConfig in the [Routing](../guide/router-deprecated.html) chapter. + Learn more about defining routes with RouterConfig in the [Routing](../guide/router.html) chapter. + +:marked + ### Make the router available. + The *Component Router* is a service. We have to import our `APP_ROUTER_PROVIDERS` which + contains our configured router and make it available to the application by adding it to + the `bootstrap` array. ++makeExample('toh-5/ts/app/main.ts', '', 'app/main.ts')(format=".") + :marked ### Router Outlet - If we paste the path, `/heroes`, into the browser address bar, + If we paste the path, `/heroes`, into the browser address bar, the router should match it to the `'Heroes'` route and display the `HeroesComponent`. But where? - + We have to ***tell it where*** by adding `` marker tags to the bottom of the template. `RouterOutlet` is one of the `ROUTER_DIRECTIVES`. The router displays each component immediately below the `` as we navigate through the application. - + ### Router Links We don't really expect users to paste a route URL into the address bar. We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`. - + The revised template looks like this: +makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app/app.component.ts (template v1)')(format=".") :marked - Notice the `[routerLink]` binding in the anchor tag. + Notice the `[routerLink]` binding in the anchor tag. We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array that tells the router where to navigate when the user clicks the link. - + We define a *routing instruction* with a *link parameters array*. - The array only has one element in our little sample, the quoted ***name* of the route** to follow. - Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. + The array only has one element in our little sample, the quoted ***path* of the route** to follow. + Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`. .l-sub-section :marked - Learn about the *link parameters array* in the [Routing](../guide/router-deprecated.html#link-parameters-array) chapter. + Learn about the *link parameters array* in the [Routing](../guide/router.html#link-parameters-array) chapter. :marked - Refresh the browser. We see only the app title. We don't see the heroes list. + Refresh the browser. We see only the app title. We don't see the heroes list. .l-sub-section :marked - The browser's address bar shows `/`. - The route path to `HeroesComponent` is `/heroes`, not `/`. + The browser's address bar shows `/`. + The route path to `HeroesComponent` is `/heroes`, not `/`. We don't have a route that matches the path `/`, so there is nothing to show. That's something we'll want to fix. :marked - We click the "Heroes" navigation link, the browser bar updates to `/heroes`, + We click the "Heroes" navigation link, the browser bar updates to `/heroes`, and now we see the list of heroes. We are navigating at last! At this stage, our `AppComponent` looks like this. @@ -238,73 +233,77 @@ code-example(language="bash"). :marked ## Add a *Dashboard* Routing only makes sense when we have multiple views. We need another view. - + Create a placeholder `DashboardComponent` that gives us something to navigate to and from. +makeExample('toh-5/ts/app/dashboard.component.1.ts',null, 'app/dashboard.component.ts (v1)')(format=".") :marked We’ll come back and make it more useful later. ### Configure the dashboard route - Go back to `app.component.ts` and teach it to navigate to the dashboard. - - Import the `DashboardComponent` so we can reference it in the dashboard route definition. - - Add the following `'Dashboard'` route definition to the `@RouteConfig` array of definitions. -+makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app/app.component.ts (Dashboard route)')(format=".") + Go back to `app.routes.ts` and teach it to navigate to the dashboard. + + Import the `DashboardComponent` so we can reference it in the dashboard route definition. + + Add the following `'Dashboard'` route definition to the `RouterConfig` array of definitions. ++makeExample('toh-5/ts/app/app.routes.1.ts','dashboard-route', 'app/app.routes.ts (Dashboard route)')(format=".") .l-sub-section :marked - **useAsDefault** - - We want the app to show the dashboard when it starts and + **Redirect** + + We want the app to show the dashboard when it starts and we want to see a nice URL in the browser address bar that says `/dashboard`. - Remember that the browser launches with `/` in the address bar. - We don't have a route for that path and we'd rather not create one. - - Fortunately we can add the `useAsDefault: true` property to the *route definition* and the - router will display the dashboard when the browser URL doesn't match an existing route. + Remember that the browser launches with `/` in the address bar. + We can use a redirect route to make this happen. + ++makeExample('toh-5/ts/app/app.routes.1.ts','redirect-route', 'app/app.routes.ts (Redirect route)')(format=".") + +.l-sub-section + :marked + Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter. + :marked Finally, add a dashboard navigation link to the template, just above the *Heroes* link. +makeExample('toh-5/ts/app/app.component.ts','template', 'app/app.component.ts (template)')(format=".") .l-sub-section :marked - We nestled the two links within `