diff --git a/gulpfile.js b/gulpfile.js index 6c5a3a4490..c6e15ae13f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -595,7 +595,7 @@ gulp.task('build-dart-api-docs', ['_shred-api-examples', 'dartdoc'], function() }); gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() { - return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log }); + return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build }); }); gulp.task('build-dart-cheatsheet', [], function() { diff --git a/package.json b/package.json index d5283e3f43..2e848d239c 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "browser-sync": "^2.9.3", "canonical-path": "0.0.2", "cheerio": "^0.20.0", - "codelyzer": "0.0.22", + "codelyzer": "0.0.26", "cross-spawn": "^4.0.0", "del": "^2.2.0", "dgeni": "^0.4.0", diff --git a/public/docs/_examples/animations/ts/app/app.module.ts b/public/docs/_examples/animations/ts/app/app.module.ts new file mode 100644 index 0000000000..1550034236 --- /dev/null +++ b/public/docs/_examples/animations/ts/app/app.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { HeroTeamBuilderComponent } from './hero-team-builder.component'; +import { HeroListBasicComponent } from './hero-list-basic.component'; +import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component'; +import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component'; +import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component'; +import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component'; +import { HeroListTwowayComponent } from './hero-list-twoway.component'; +import { HeroListAutoComponent } from './hero-list-auto.component'; +import { HeroListGroupsComponent } from './hero-list-groups.component'; +import { HeroListMultistepComponent } from './hero-list-multistep.component'; +import { HeroListTimingsComponent } from './hero-list-timings.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + HeroTeamBuilderComponent, + HeroListBasicComponent, + HeroListInlineStylesComponent, + HeroListCombinedTransitionsComponent, + HeroListTwowayComponent, + HeroListEnterLeaveComponent, + HeroListEnterLeaveStatesComponent, + HeroListAutoComponent, + HeroListTimingsComponent, + HeroListMultistepComponent, + HeroListGroupsComponent + ], + bootstrap: [ HeroTeamBuilderComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts b/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts index 0ae7ec519e..e5413be50e 100644 --- a/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts @@ -1,16 +1,6 @@ import { Component } from '@angular/core'; import { Heroes } from './hero.service'; -import { HeroListBasicComponent } from './hero-list-basic.component'; -import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component'; -import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component'; -import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component'; -import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component'; -import { HeroListTwowayComponent } from './hero-list-twoway.component'; -import { HeroListAutoComponent } from './hero-list-auto.component'; -import { HeroListGroupsComponent } from './hero-list-groups.component'; -import { HeroListMultistepComponent } from './hero-list-multistep.component'; -import { HeroListTimingsComponent } from './hero-list-timings.component'; @Component({ selector: 'hero-team-builder', @@ -97,18 +87,6 @@ import { HeroListTimingsComponent } from './hero-list-timings.component'; min-height: 6em; } `], - directives: [ - HeroListBasicComponent, - HeroListInlineStylesComponent, - HeroListCombinedTransitionsComponent, - HeroListTwowayComponent, - HeroListEnterLeaveComponent, - HeroListEnterLeaveStatesComponent, - HeroListAutoComponent, - HeroListTimingsComponent, - HeroListMultistepComponent, - HeroListGroupsComponent - ], providers: [Heroes] }) export class HeroTeamBuilderComponent { diff --git a/public/docs/_examples/animations/ts/app/main.ts b/public/docs/_examples/animations/ts/app/main.ts index 3c8422e790..2470c9595e 100644 --- a/public/docs/_examples/animations/ts/app/main.ts +++ b/public/docs/_examples/animations/ts/app/main.ts @@ -1,5 +1,4 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { HeroTeamBuilderComponent } from './hero-team-builder.component'; - -bootstrap(HeroTeamBuilderComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/architecture/ts/app/app.component.ts b/public/docs/_examples/architecture/ts/app/app.component.ts index 930cf5f045..b987f17e44 100644 --- a/public/docs/_examples/architecture/ts/app/app.component.ts +++ b/public/docs/_examples/architecture/ts/app/app.component.ts @@ -1,16 +1,13 @@ // #docregion import import { Component } from '@angular/core'; // #enddocregion import -import { HeroListComponent } from './hero-list.component'; -import { SalesTaxComponent } from './sales-tax.component'; @Component({ selector: 'my-app', template: ` - - - `, - directives: [HeroListComponent, SalesTaxComponent] + + + ` }) // #docregion export export class AppComponent { } diff --git a/public/docs/_examples/architecture/ts/app/app.module.ts b/public/docs/_examples/architecture/ts/app/app.module.ts new file mode 100644 index 0000000000..f6e64beecd --- /dev/null +++ b/public/docs/_examples/architecture/ts/app/app.module.ts @@ -0,0 +1,36 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +// #docregion imports +import { NgModule } from '@angular/core'; +import { AppComponent } from './app.component'; +// #enddocregion imports +import { HeroDetailComponent } from './hero-detail.component'; +import { HeroListComponent } from './hero-list.component'; +import { SalesTaxComponent } from './sales-tax.component'; +import { HeroService } from './hero.service'; +import { BackendService } from './backend.service'; +import { Logger } from './logger.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent, + HeroDetailComponent, + HeroListComponent, + SalesTaxComponent + ], +// #docregion providers + providers: [ + BackendService, + HeroService, + Logger + ], +// #enddocregion providers + bootstrap: [ AppComponent ] +}) +// #docregion export +export class AppModule { } +// #enddocregion export diff --git a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts index fc2604e53e..b1a93cf7a2 100644 --- a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts @@ -4,8 +4,7 @@ import { Hero } from './hero'; @Component({ selector: 'hero-detail', - templateUrl: 'app/hero-detail.component.html', - directives: [HeroDetailComponent] + templateUrl: 'app/hero-detail.component.html' }) export class HeroDetailComponent { @Input() hero: Hero; diff --git a/public/docs/_examples/architecture/ts/app/hero-list.component.ts b/public/docs/_examples/architecture/ts/app/hero-list.component.ts index eaa21b45fe..868b9251b5 100644 --- a/public/docs/_examples/architecture/ts/app/hero-list.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-list.component.ts @@ -1,18 +1,15 @@ import { Component, OnInit } from '@angular/core'; import { Hero } from './hero'; -import { HeroDetailComponent } from './hero-detail.component'; import { HeroService } from './hero.service'; -// #docregion metadata +// #docregion metadata, providers @Component({ selector: 'hero-list', templateUrl: 'app/hero-list.component.html', - directives: [HeroDetailComponent], - // #docregion providers - providers: [HeroService] - // #enddocregion providers + providers: [ HeroService ] }) +// #enddocregion providers // #docregion class export class HeroListComponent implements OnInit { // #enddocregion metadata diff --git a/public/docs/_examples/architecture/ts/app/main.ts b/public/docs/_examples/architecture/ts/app/main.ts index 4e8c107afd..4acf5de663 100644 --- a/public/docs/_examples/architecture/ts/app/main.ts +++ b/public/docs/_examples/architecture/ts/app/main.ts @@ -1,11 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -// #docregion import -import { AppComponent } from './app.component'; -// #enddocregion import -import { HeroService } from './hero.service'; -import { BackendService } from './backend.service'; -import { Logger } from './logger.service'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -// #docregion bootstrap -bootstrap(AppComponent, [BackendService, HeroService, Logger]); -// #enddocregion bootstrap +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/architecture/ts/app/mini-app.ts b/public/docs/_examples/architecture/ts/app/mini-app.ts new file mode 100644 index 0000000000..8a35a607a2 --- /dev/null +++ b/public/docs/_examples/architecture/ts/app/mini-app.ts @@ -0,0 +1,45 @@ +// #docplaster +// A mini-application +import { Injectable } from '@angular/core'; + +@Injectable() +export class Logger { + log(message: string) { console.log(message); } +} + +// #docregion import-core-component +import { Component } from '@angular/core'; +// #enddocregion import-core-component + +@Component({ + selector: 'my-app', + template: 'Welcome to Angular 2' +}) +export class AppComponent { + constructor(logger: Logger) { + logger.log('Let the fun begin!'); + } +} + +// #docregion module +import { NgModule } from '@angular/core'; +// #docregion import-browser-module +import { BrowserModule } from '@angular/platform-browser'; +// #enddocregion import-browser-module +@NgModule({ +// #docregion ngmodule-imports + imports: [ BrowserModule ], +// #enddocregion ngmodule-imports + providers: [ Logger ], + declarations: [ AppComponent ], + exports: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +// #docregion export +export class AppModule { } +// #enddocregion export +// #enddocregion module + +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts index 983e731dc7..02201afe05 100644 --- a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts +++ b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts @@ -14,7 +14,7 @@ import { TaxRateService } from './tax-rate.service'; {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }} `, - providers: [SalesTaxService, TaxRateService] + providers: [SalesTaxService, TaxRateService] }) export class SalesTaxComponent { constructor(private salesTaxService: SalesTaxService) { } diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/architecture/ts/mini-app.html similarity index 68% rename from public/docs/_examples/router/ts/index.3.html rename to public/docs/_examples/architecture/ts/mini-app.html index a142bb6fcc..a17a191e90 100644 --- a/public/docs/_examples/router/ts/index.3.html +++ b/public/docs/_examples/architecture/ts/mini-app.html @@ -1,9 +1,7 @@ - - - Router Sample v.3 + Architecture of Angular 2 @@ -17,15 +15,12 @@ -

Milestone 3

- loading... + Loading... - diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/app/app.component.ts index 711e98f1e2..b8b1fa6f08 100644 --- a/public/docs/_examples/attribute-directives/ts/app/app.component.ts +++ b/public/docs/_examples/attribute-directives/ts/app/app.component.ts @@ -1,14 +1,10 @@ // #docregion import { Component } from '@angular/core'; -import { HighlightDirective } from './highlight.directive'; - @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: [HighlightDirective] + templateUrl: 'app/app.component.html' }) export class AppComponent { } - // #enddocregion diff --git a/public/docs/_examples/attribute-directives/ts/app/app.module.ts b/public/docs/_examples/attribute-directives/ts/app/app.module.ts new file mode 100644 index 0000000000..ca35d560fb --- /dev/null +++ b/public/docs/_examples/attribute-directives/ts/app/app.module.ts @@ -0,0 +1,16 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { HighlightDirective } from './highlight.directive'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + HighlightDirective + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/attribute-directives/ts/app/main.ts b/public/docs/_examples/attribute-directives/ts/app/main.ts index 4fc79adda1..4acf5de663 100644 --- a/public/docs/_examples/attribute-directives/ts/app/main.ts +++ b/public/docs/_examples/attribute-directives/ts/app/main.ts @@ -1,7 +1,5 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; - -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts index cdb9d9fd81..c3eb0c86f4 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts @@ -1,17 +1,12 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; -import { MovieListComponent } from './movie-list.component'; import { MovieService } from './movie.service'; import { IMovie } from './movie'; -import { StringSafeDatePipe } from './date.pipe'; @Component({ selector: 'my-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], - directives: [MovieListComponent, ROUTER_DIRECTIVES], - pipes: [StringSafeDatePipe], providers: [MovieService] }) export class AppComponent { diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts new file mode 100644 index 0000000000..5b24020186 --- /dev/null +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts @@ -0,0 +1,12 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts new file mode 100644 index 0000000000..08391524b9 --- /dev/null +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts @@ -0,0 +1,23 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { MovieListComponent } from './movie-list.component'; +import { routes } from './app.routes'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + RouterModule.forRoot(routes, {}) + ], + declarations: [ + AppComponent, + MovieListComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts index 1fd2627996..67aa75ed25 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts @@ -1,13 +1,9 @@ // #docregion -import { provideRouter, RouterConfig } from '@angular/router'; +import { RouterConfig } from '@angular/router'; import { MovieListComponent } from './movie-list.component'; -const routes: RouterConfig = [ +export const routes: RouterConfig = [ { path: '', redirectTo: '/movies', pathMatch: 'full' }, { path: 'movies', component: MovieListComponent } ]; - -export const appRouterProviders = [ - provideRouter(routes) -]; diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts deleted file mode 100644 index 67de525937..0000000000 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts index 7a1d58fad8..4acf5de663 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts @@ -1,8 +1,5 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; -import { appRouterProviders } from './app.routes'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -bootstrap(AppComponent, [ - appRouterProviders -]); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts index 67b0c2873d..dc6fbd6b63 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts @@ -3,10 +3,8 @@ // #docregion import import { Component } from '@angular/core'; // #enddocregion import -import { MovieService } from './movie.service'; import { IMovie } from './movie'; -import { StringSafeDatePipe } from './date.pipe'; - +import { MovieService } from './movie.service'; // #docregion component @Component({ @@ -16,9 +14,6 @@ import { StringSafeDatePipe } from './date.pipe'; // #docregion style-url styleUrls: ['app/movie-list.component.css'], // #enddocregion style-url -// #docregion date-pipe - pipes: [StringSafeDatePipe] -// #enddocregion date-pipe }) // #enddocregion component // #docregion class diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts index 891b5c86ac..0a3c992498 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts @@ -1,32 +1,7 @@ import { Component } from '@angular/core'; -import { HeroParentComponent } from './hero-parent.component'; -import { NameParentComponent } from './name-parent.component'; -import { VersionParentComponent } from './version-parent.component'; -import { VoteTakerComponent } from './votetaker.component'; -import { CountdownLocalVarParentComponent, - CountdownViewChildParentComponent } from './countdown-parent.component'; -import { MissionControlComponent } from './missioncontrol.component'; - -let directives: any[] = [ - HeroParentComponent, - NameParentComponent, - VersionParentComponent, - VoteTakerComponent, - MissionControlComponent, - ]; - -// Include Countdown examples -// unless in e2e tests which they break. -if (!/e2e/.test(location.search)) { - console.log('adding countdown timer examples'); - directives.push(CountdownLocalVarParentComponent); - directives.push(CountdownViewChildParentComponent); -} - @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: directives + templateUrl: 'app/app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.module.ts b/public/docs/_examples/cb-component-communication/ts/app/app.module.ts new file mode 100644 index 0000000000..2314524aa7 --- /dev/null +++ b/public/docs/_examples/cb-component-communication/ts/app/app.module.ts @@ -0,0 +1,48 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { AstronautComponent } from './astronaut.component'; +import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component'; +import { CountdownTimerComponent } from './countdown-timer.component'; +import { HeroChildComponent } from './hero-child.component'; +import { HeroParentComponent } from './hero-parent.component'; +import { MissionControlComponent } from './missioncontrol.component'; +import { NameChildComponent } from './name-child.component'; +import { NameParentComponent } from './name-parent.component'; +import { VersionChildComponent } from './version-child.component'; +import { VersionParentComponent } from './version-parent.component'; +import { VoterComponent } from './voter.component'; +import { VoteTakerComponent } from './votetaker.component'; + +let directives: any[] = [ + AppComponent, + AstronautComponent, + CountdownTimerComponent, + HeroChildComponent, + HeroParentComponent, + MissionControlComponent, + NameChildComponent, + NameParentComponent, + VersionChildComponent, + VersionParentComponent, + VoterComponent, + VoteTakerComponent + ]; + +// Include Countdown examples +// unless in e2e tests which they break. +if (!/e2e/.test(location.search)) { + console.log('adding countdown timer examples'); + directives.push(CountdownLocalVarParentComponent); + directives.push(CountdownViewChildParentComponent); +} + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: directives, + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts index a89dee52d9..5bcf0645c9 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts @@ -19,7 +19,6 @@ import { CountdownTimerComponent } from './countdown-timer.component';
{{timer.seconds}}
`, - directives: [CountdownTimerComponent], styleUrls: ['demo.css'] }) export class CountdownLocalVarParentComponent { } @@ -36,7 +35,6 @@ export class CountdownLocalVarParentComponent { }
{{ seconds() }}
`, - directives: [CountdownTimerComponent], styleUrls: ['demo.css'] }) export class CountdownViewChildParentComponent implements AfterViewInit { diff --git a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts index 6d82f53a4d..bf3861c455 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts @@ -1,7 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { HeroChildComponent } from './hero-child.component'; import { HEROES } from './hero'; @Component({ @@ -12,8 +11,7 @@ import { HEROES } from './hero'; [hero]="hero" [master]="master"> - `, - directives: [HeroChildComponent] + ` }) export class HeroParentComponent { heroes = HEROES; diff --git a/public/docs/_examples/cb-component-communication/ts/app/main.ts b/public/docs/_examples/cb-component-communication/ts/app/main.ts index ad256f0823..4f325ca43d 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/main.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/main.ts @@ -1,5 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; +import { AppModule } from './app.module'; -bootstrap(AppComponent); +browserDynamicPlatform().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts index 1c7968bb88..a27e9b16b1 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts @@ -1,7 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { AstronautComponent } from './astronaut.component'; import { MissionService } from './mission.service'; @Component({ @@ -17,7 +16,6 @@ import { MissionService } from './mission.service';
  • {{event}}
    • `, - directives: [AstronautComponent], providers: [MissionService] }) export class MissionControlComponent { diff --git a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts index aa7382503a..699690c067 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts @@ -1,8 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { NameChildComponent } from './name-child.component'; - @Component({ selector: 'name-parent', template: ` @@ -10,8 +8,7 @@ import { NameChildComponent } from './name-child.component'; - `, - directives: [NameChildComponent] + ` }) export class NameParentComponent { // Displays 'Mr. IQ', '', 'Bombasto' diff --git a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts index cdb590b87a..bbc9101702 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts @@ -1,8 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { VersionChildComponent } from './version-child.component'; - @Component({ selector: 'version-parent', template: ` @@ -10,8 +8,7 @@ import { VersionChildComponent } from './version-child.component'; - `, - directives: [VersionChildComponent] + ` }) export class VersionParentComponent { major: number = 1; diff --git a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts index 7267185ff1..87f06161f5 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts @@ -1,8 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { VoterComponent } from './voter.component'; - @Component({ selector: 'vote-taker', template: ` @@ -12,8 +10,7 @@ import { VoterComponent } from './voter.component'; [name]="voter" (onVoted)="onVoted($event)"> - `, - directives: [VoterComponent] + ` }) export class VoteTakerComponent { agreed = 0; diff --git a/public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts b/public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts new file mode 100644 index 0000000000..ab79a37ba7 --- /dev/null +++ b/public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts b/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts index 42dbeb9f7d..6af7a5b2ae 100644 --- a/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts +++ b/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts @@ -1,5 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; +import { AppModule } from './app.module'; -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts index 578fb06730..ab0d9c445b 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts @@ -1,22 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { HeroBiosComponent, - HeroBiosAndContactsComponent } from './hero-bios.component'; -import { HeroOfTheMonthComponent } from './hero-of-the-month.component'; -import { HeroesBaseComponent, - SortedHeroesComponent } from './sorted-heroes.component'; -import { HighlightDirective } from './highlight.directive'; -import { ParentFinderComponent } from './parent-finder.component'; - -const DIRECTIVES = [ - HeroBiosComponent, HeroBiosAndContactsComponent, - HeroesBaseComponent, SortedHeroesComponent, - HeroOfTheMonthComponent, - HighlightDirective, - ParentFinderComponent -]; - // #docregion import-services import { LoggerService } from './logger.service'; import { UserContextService } from './user-context.service'; @@ -25,7 +9,6 @@ import { UserService } from './user.service'; @Component({ selector: 'my-app', templateUrl: 'app/app.component.html', - directives: DIRECTIVES, // #docregion providers providers: [LoggerService, UserContextService, UserService] // #enddocregion providers diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts new file mode 100644 index 0000000000..326ea4e945 --- /dev/null +++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts @@ -0,0 +1,74 @@ +// #docregion +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { XHRBackend } from '@angular/http'; +// import { appRouterProviders } from './app.routes'; +import { LocationStrategy, + HashLocationStrategy } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { HeroData } from './hero-data'; +import { InMemoryBackendService, + SEED_DATA } from 'angular2-in-memory-web-api'; + +import { AppComponent } from './app.component'; +import { HeroBioComponent } from './hero-bio.component'; +import { HeroBiosComponent, + HeroBiosAndContactsComponent } from './hero-bios.component'; +import { HeroOfTheMonthComponent } from './hero-of-the-month.component'; +import { HeroContactComponent } from './hero-contact.component'; +import { HeroesBaseComponent, + SortedHeroesComponent } from './sorted-heroes.component'; +import { HighlightDirective } from './highlight.directive'; +import { ParentFinderComponent, + AlexComponent, + AliceComponent, + CarolComponent, + ChrisComponent, + CraigComponent, + CathyComponent, + BarryComponent, + BethComponent, + BobComponent } from './parent-finder.component'; + +const DIRECTIVES = [ + HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent, + HeroesBaseComponent, SortedHeroesComponent, + HeroOfTheMonthComponent, HeroContactComponent, + HighlightDirective, + ParentFinderComponent, + AppComponent +]; + +const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ]; + +// #docregion C_DIRECTIVES +const C_DIRECTIVES = [ + CarolComponent, ChrisComponent, CraigComponent, + CathyComponent +]; +// #enddocregion C_DIRECTIVES + +// #docregion bootstrap +@NgModule({ + imports: [ BrowserModule, FormsModule ], + declarations: [ ...DIRECTIVES, + ...B_DIRECTIVES, + ...C_DIRECTIVES, + AliceComponent, + AlexComponent ], + bootstrap: [ AppComponent ], + providers: [ + // appRouterProviders, TODO: add routes + { provide: LocationStrategy, useClass: HashLocationStrategy }, + + { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server + { provide: SEED_DATA, useClass: HeroData } // in-mem server data + ] +}) +export class AppModule { + constructor() { + } +} +// #enddocregion bootstraps + diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts index 8b738bf04f..217c5edcd0 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts @@ -2,8 +2,6 @@ // #docregion import { Component } from '@angular/core'; -import { HeroContactComponent } from './hero-contact.component'; -import { HeroBioComponent } from './hero-bio.component'; import { HeroService } from './hero.service'; import { LoggerService } from './logger.service'; @@ -15,7 +13,6 @@ import { LoggerService } from './logger.service'; `, - directives: [HeroBioComponent], providers: [HeroService] }) export class HeroBiosComponent { @@ -39,7 +36,6 @@ export class HeroBiosComponent { `, // #enddocregion template - directives: [HeroBioComponent, HeroContactComponent], // #docregion class-provider providers: [HeroService] // #enddocregion class-provider diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts index c83f329e91..4acf5de663 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts @@ -1,22 +1,5 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { XHRBackend } from '@angular/http'; -import { appRouterProviders } from './app.routes'; -import { LocationStrategy, - HashLocationStrategy } from '@angular/common'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { HeroData } from './hero-data'; -import { InMemoryBackendService, - SEED_DATA } from 'angular2-in-memory-web-api'; - -import { AppComponent } from './app.component'; - -// #docregion bootstrap -bootstrap(AppComponent, [ - appRouterProviders, - { provide: LocationStrategy, useClass: HashLocationStrategy }, - - { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server - { provide: SEED_DATA, useClass: HeroData } // in-mem server data -]).catch((err: any) => console.error(err)); -// #enddocregion bootstrap +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts index a8e245376c..d5f87d51bd 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts @@ -85,13 +85,6 @@ export class CraigComponent { } // #enddocregion craig -// #docregion C_DIRECTIVES -const C_DIRECTIVES = [ - CarolComponent, ChrisComponent, CraigComponent, - forwardRef(() => CathyComponent) -]; -// #enddocregion C_DIRECTIVES - //////// B - Parent ///////// // #docregion barry const templateB = ` @@ -107,7 +100,6 @@ const templateB = ` @Component({ selector: 'barry', template: templateB, - directives: C_DIRECTIVES, providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }] }) export class BarryComponent implements Parent { @@ -121,7 +113,6 @@ export class BarryComponent implements Parent { @Component({ selector: 'bob', template: templateB, - directives: C_DIRECTIVES, providers: [ provideParent(BobComponent) ] }) export class BobComponent implements Parent { @@ -132,7 +123,6 @@ export class BobComponent implements Parent { @Component({ selector: 'beth', template: templateB, - directives: C_DIRECTIVES, // #docregion beth-providers providers: [ provideParent(BethComponent, DifferentParent) ] // #enddocregion beth-providers @@ -142,8 +132,6 @@ export class BethComponent implements Parent { constructor( @SkipSelf() @Optional() public parent: Parent ) { } } -const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ]; - ///////// A - Grandparent ////// // #docregion alex, alex-1 @@ -161,7 +149,6 @@ const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ]; providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }], // #enddocregion alex-providers // #docregion alex-1 - directives: C_DIRECTIVES }) // #enddocregion alex-1 // Todo: Add `... implements Parent` to class signature @@ -187,7 +174,6 @@ export class AlexComponent extends Base `, - directives: [ B_DIRECTIVES, C_DIRECTIVES ], // #docregion alice-providers providers: [ provideParent(AliceComponent) ] // #enddocregion alice-providers @@ -224,7 +210,6 @@ export class CathyComponent { template: `

    Parent Finder

    - `, - directives: [ AlexComponent, AliceComponent ] + ` }) export class ParentFinderComponent { } diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts b/public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts rename to public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts index 5a8d9c5044..62ced34a31 100644 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts +++ b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts @@ -2,5 +2,4 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; -bootstrap(AppComponent, []) - .catch((err: any) => console.error(err)); +bootstrap(AppComponent, []); diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts index e51561770e..582daced2e 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts @@ -1,7 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { DynamicFormComponent } from './dynamic-form.component'; import { QuestionService } from './question.service'; @Component({ @@ -12,7 +11,6 @@ import { QuestionService } from './question.service'; `, - directives: [DynamicFormComponent], providers: [QuestionService] }) export class AppComponent { diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts b/public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts new file mode 100644 index 0000000000..7a68e45a92 --- /dev/null +++ b/public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts @@ -0,0 +1,18 @@ +// #docregion +import { BrowserModule } from '@angular/platform-browser'; +import { ReactiveFormsModule } from '@angular/forms'; +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; +import { DynamicFormComponent } from './dynamic-form.component'; +import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; + +@NgModule({ + imports: [ BrowserModule, ReactiveFormsModule ], + declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { + constructor() { + } +} diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts index 3381d1c444..412f2d8c55 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts @@ -1,13 +1,12 @@ // #docregion import { Component, Input } from '@angular/core'; -import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormGroup } from '@angular/forms'; import { QuestionBase } from './question-base'; @Component({ selector: 'df-question', - templateUrl: 'app/dynamic-form-question.component.html', - directives: [REACTIVE_FORM_DIRECTIVES] + templateUrl: 'app/dynamic-form-question.component.html' }) export class DynamicFormQuestionComponent { @Input() question: QuestionBase; diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts index 15730806d1..68bd1f582b 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts @@ -1,16 +1,14 @@ // #docregion import { Component, Input, OnInit } from '@angular/core'; -import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormGroup } from '@angular/forms'; -import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; -import { QuestionBase } from './question-base'; -import { QuestionControlService } from './question-control.service'; +import { QuestionBase } from './question-base'; +import { QuestionControlService } from './question-control.service'; @Component({ selector: 'dynamic-form', templateUrl: 'app/dynamic-form.component.html', - directives: [DynamicFormQuestionComponent, REACTIVE_FORM_DIRECTIVES], - providers: [QuestionControlService] + providers: [ QuestionControlService ] }) export class DynamicFormComponent implements OnInit { diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts index 461ce210c6..4acf5de663 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts @@ -1,11 +1,5 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { disableDeprecatedForms, provideForms } from '@angular/forms'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent, [ - disableDeprecatedForms(), - provideForms() -]) -.catch((err: any) => console.error(err)); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-set-document-title/ts/app/app.module.ts b/public/docs/_examples/cb-set-document-title/ts/app/app.module.ts new file mode 100644 index 0000000000..81f13c244c --- /dev/null +++ b/public/docs/_examples/cb-set-document-title/ts/app/app.module.ts @@ -0,0 +1,19 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule, Title } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent + ], + providers: [ + Title + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/cb-set-document-title/ts/app/main.ts b/public/docs/_examples/cb-set-document-title/ts/app/main.ts index abee7afb87..ba9421d573 100644 --- a/public/docs/_examples/cb-set-document-title/ts/app/main.ts +++ b/public/docs/_examples/cb-set-document-title/ts/app/main.ts @@ -1,22 +1,6 @@ -/* tslint:disable */ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; +import { AppModule } from './app.module'; -// While Angular supplies a Title service for setting the HTML document title -// it doesn't include this service as part of the default Browser platform providers. -// As such, if we want to inject it into the components within our application, -// we have to explicitly provide the Angular service in our top component. -// #docregion bootstrap-title -import { Title } from '@angular/platform-browser'; - -bootstrap(AppComponent, [ Title ]) -// #enddocregion bootstrap-title - .then( - () => window.console.info( 'Angular finished bootstrapping your application!' ), - (error) => { - console.warn( 'Angular was not able to bootstrap your application.' ); - console.error( error ); - } - ); +browserDynamicPlatform().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js index 413ccfc8f3..153e83c06f 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js @@ -36,12 +36,22 @@ selector: 'hero-di-inject-additional', template: '' + '' + - '', - directives: [TitleComponent] + '' }).Class({ constructor: function() { } }); - - app.HeroDIInjectAdditionalComponent = AppComponent; + + app.HeroesDIInjectAdditionalModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ + AppComponent, + TitleComponent + ], + bootstrap: [ AppComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js index 71bdbb57f9..dfda83e1f0 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js @@ -15,7 +15,16 @@ ]; // #enddocregion parameters - app.HeroDIInjectComponent = HeroComponent; + app.HeroesDIInjectModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + providers: [ { provide: 'heroName', useValue: 'Windstorm' } ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); @@ -34,6 +43,15 @@ }); // #enddocregion ctor - app.HeroDIInjectComponent2 = HeroComponent; + app.HeroesDIInjectModule2 = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + providers: [ { provide: 'heroName', useValue: 'Bombasto' } ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js index 90c3d69cba..1fe9c38cb1 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js @@ -12,5 +12,16 @@ }] }); // #enddocregion - app.HeroDIInlineComponent = HeroComponent; + + app.HeroDIInlineModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + providers: [ app.DataService ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) + .Class({ + constructor: function() {} + }); + })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js index 2963258292..55c576b836 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js @@ -17,4 +17,15 @@ ]; // #enddocregion + app.HeroesDIModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + providers: [ app.DataService ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) + .Class({ + constructor: function() {} + }); + })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js index 2890e006a2..5dd84733f3 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js @@ -17,7 +17,15 @@ }); // #enddocregion component - app.HeroComponentDsl = HeroComponent; + app.HeroesDslModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); // #enddocregion appexport diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js index f00ce8065c..79aef12125 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js @@ -42,8 +42,7 @@ '(cancel)="onCancel()">' + '' + 'OK clicked' + - 'Cancel clicked', - directives: [ConfirmComponent] + 'Cancel clicked' }) ]; AppComponent.prototype.onOk = function() { @@ -52,6 +51,18 @@ AppComponent.prototype.onCancel = function() { this.cancelClicked = true; } - app.HeroIOComponent = AppComponent; + + app.HeroesIOModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ + AppComponent, + ConfirmComponent + ], + bootstrap: [ AppComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js index b8a2148a64..3e81c72e4e 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js @@ -16,6 +16,14 @@ }; // #enddocregion - app.HeroLifecycleComponent = HeroComponent; + app.HeroesLifecycleModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js index f741285617..c6a58acc56 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js @@ -25,6 +25,16 @@ // #enddocregion constructorproto // #enddocregion metadata + app.HeroesModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) + .Class({ + constructor: function() {} + }); + // #docregion appexport app.HeroComponent = HeroComponent; diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js index 0c4ee7d7cf..3a562d6912 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js @@ -25,6 +25,15 @@ } }); // #enddocregion - app.HeroesHostBindingsComponent = HeroesComponent; + + app.HeroesHostBindingsModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ HeroesComponent ], + bootstrap: [ HeroesComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js index 17cb57093f..f1bda77cb1 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js @@ -7,7 +7,7 @@ 'Active' + '' }).Class({ - constructor: function() { }, + constructor: [function() { }], activate: function() { this.active = true; } @@ -26,12 +26,13 @@ ActiveLabelComponent) } }).Class({ - constructor: function() { }, + constructor: [function() { }], activate: function() { this.active = true; this.label.activate(); } }); + app.HeroQueriesComponent = HeroComponent; // #enddocregion content // #docregion view @@ -44,11 +45,7 @@ '' + '', - directives: [ - HeroComponent, - ActiveLabelComponent - ], + '', queries: { heroCmps: new ng.core.ViewChildren( HeroComponent) @@ -68,6 +65,18 @@ }); // #enddocregion view - app.HeroesQueriesComponent = AppComponent; + app.HeroesQueriesModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ + AppComponent, + HeroComponent, + ActiveLabelComponent + ], + bootstrap: [ AppComponent ] + }) + .Class({ + constructor: function() {} + }); })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js index f483a7c8cd..a1ec27c6ad 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/main.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js @@ -17,21 +17,20 @@ // #enddocregion appimport document.addEventListener('DOMContentLoaded', function() { - bootstrap(HeroComponent); - bootstrap(app.HeroComponentDsl); - bootstrap(app.HeroLifecycleComponent); - bootstrap(app.HeroDIComponent, [app.DataService]); - bootstrap(app.HeroDIInlineComponent, [app.DataService]); - bootstrap(app.HeroDIInjectComponent, [ - { provide: 'heroName', useValue: 'Windstorm' } - ]); - bootstrap(app.HeroDIInjectComponent2, [ - { provide: 'heroName', useValue: 'Bombasto' } - ]); - bootstrap(app.HeroDIInjectAdditionalComponent); - bootstrap(app.HeroIOComponent); - bootstrap(app.HeroesHostBindingsComponent); - bootstrap(app.HeroesQueriesComponent); + var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic(); + + platformBrowserDynamic.bootstrapModule(app.HeroesModule); + platformBrowserDynamic.bootstrapModule(app.HeroesDslModule); + platformBrowserDynamic.bootstrapModule(app.HeroesLifecycleModule); + platformBrowserDynamic.bootstrapModule(app.HeroesDIModule); + platformBrowserDynamic.bootstrapModule(app.HeroDIInlineModule); + platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectModule); + platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectModule2); + platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectAdditionalModule); + platformBrowserDynamic.bootstrapModule(app.HeroesIOModule); + platformBrowserDynamic.bootstrapModule(app.HeroesHostBindingsModule); + + platformBrowserDynamic.bootstrapModule(app.HeroesQueriesModule); }); // #docregion appimport diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts index da11e56b8a..bca1e88cb6 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts @@ -5,8 +5,10 @@ import { Inject, Optional, Query, - QueryList + QueryList, + NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; // #docregion @Component({ @@ -17,7 +19,7 @@ import { ` }) -export class TitleComponent { +class TitleComponent { constructor( @Inject('titlePrefix') @Optional() @@ -40,9 +42,16 @@ export class TitleComponent { selector: 'hero-di-inject-additional', template: ` - `, - directives: [TitleComponent] + ` }) -export class AppComponent { +class AppComponent { } -} +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + TitleComponent + ], + bootstrap: [ AppComponent ] +}) +export class HeroesDIInjectAdditionalModule { } diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts index 4865f9eb22..7dc2bc84a2 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts @@ -1,14 +1,23 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; // #docregion @Component({ selector: 'hero-di-inject', template: `

    Hero: {{name}}

    ` }) -export class HeroComponent { +class HeroComponent { constructor( @Inject('heroName') private name: string) { } } // #enddocregion + +@NgModule({ + imports: [ BrowserModule ], + providers: [ { provide: 'heroName', useValue: 'Windstorm' } ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] +}) +export class HeroesDIInjectModule { } diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts index 2f3fa267ba..a20453ef0a 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; import { DataService } from './data.service'; @@ -7,10 +8,18 @@ import { DataService } from './data.service'; selector: 'hero-di', template: `

    Hero: {{name}}

    ` }) -export class HeroComponent { +class HeroComponent { name: string; constructor(dataService: DataService) { this.name = dataService.getHeroName(); } } // #enddocregion + +@NgModule({ + imports: [ BrowserModule ], + providers: [ DataService ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] +}) +export class HeroesDIModule { } diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts index a93b9ed08c..8cf430c000 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts @@ -1,4 +1,11 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + Output, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; // #docregion @Component({ @@ -12,7 +19,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; ` }) -export class ConfirmComponent { +class ConfirmComponent { @Input() okMsg: string; @Input('cancelMsg') notOkMsg: string; @Output() ok = @@ -40,10 +47,9 @@ export class ConfirmComponent { OK clicked Cancel clicked - `, - directives: [ConfirmComponent] + ` }) -export class AppComponent { +class AppComponent { okClicked: boolean; cancelClicked: boolean; @@ -54,3 +60,14 @@ export class AppComponent { this.cancelClicked = true; } } + + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + ConfirmComponent + ], + bootstrap: [ AppComponent ] +}) +export class HeroesIOModule { } diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts index c883658135..1181c71cc9 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts @@ -1,15 +1,16 @@ // #docplaster // #docregion -import { Component, OnInit } - from '@angular/core'; - // #enddocregion +import { Component, OnInit } from '@angular/core'; +// #enddocregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; @Component({ selector: 'hero-lifecycle', template: `

    Hero: {{name}}

    ` }) // #docregion -export class HeroComponent +class HeroComponent implements OnInit { name: string; ngOnInit() { @@ -17,3 +18,11 @@ export class HeroComponent } } // #enddocregion + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] +}) +export class HeroesLifecycleModule { } + diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts index a1628a1104..4b4ba8529d 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts @@ -16,3 +16,15 @@ export class HeroComponent { // #enddocregion class // #enddocregion appexport // #enddocregion metadata + +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] +}) +export class HeroesModule { } + + diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts index 71c75bb5c8..407b8b0e29 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts @@ -1,13 +1,19 @@ -import { Component, HostBinding, HostListener } from '@angular/core'; +import { + Component, + HostBinding, + HostListener, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; // #docregion @Component({ selector: 'heroes-bindings', template: `

    - Tour ofHeroes + Tour of Heroes

    ` }) -export class HeroesComponent { +class HeroesComponent { @HostBinding() title = 'Tooltip content'; @HostBinding('class.heading') hClass = true; @@ -26,3 +32,10 @@ export class HeroesComponent { } } // #enddocregion + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroesComponent ], + bootstrap: [ HeroesComponent ] +}) +export class HeroesHostBindingsModule { } diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts index b511f29f90..97003766e6 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts @@ -3,8 +3,10 @@ import { ViewChildren, ContentChild, QueryList, - Input + Input, + NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; @Component({ selector: 'active-label', @@ -55,13 +57,9 @@ class HeroComponent { - `, - directives: [ - HeroComponent, - ActiveLabelComponent - ] + ` }) -export class HeroesQueriesComponent { +class HeroesQueriesComponent { heroData = [ {id: 1, name: 'Windstorm'}, {id: 2, name: 'Superman'} @@ -77,3 +75,14 @@ export class HeroesQueriesComponent { } } // #enddocregion view + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + HeroesQueriesComponent, + HeroComponent, + ActiveLabelComponent + ], + bootstrap: [ HeroesQueriesComponent ] +}) +export class HeroesQueriesModule { } diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts index 9e1540abc2..c4549d7034 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts @@ -9,26 +9,25 @@ import { // #enddocregion ng2import // #docregion appimport -import { HeroComponent } - from './hero.component'; +import { HeroComponent } from './hero.component'; // #enddocregion appimport -import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; -import { HeroComponent as HeroDIComponent } from './hero-di.component'; -import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; -import { AppComponent as AppDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; -import { AppComponent as AppIOComponent } from './hero-io.component'; -import { HeroesComponent as HeroesHostBindingsComponent } from './heroes-bindings.component'; -import { HeroesQueriesComponent } from './heroes-queries.component'; -import { DataService } from './data.service'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -bootstrap(HeroComponent); -bootstrap(HeroLifecycleComponent); -bootstrap(HeroDIComponent, [DataService]); -bootstrap(HeroDIInjectComponent, [ - { provide: 'heroName', useValue: 'Windstorm' } -]); -bootstrap(AppDIInjectAdditionalComponent); -bootstrap(AppIOComponent); -bootstrap(HeroesHostBindingsComponent); -bootstrap(HeroesQueriesComponent); +import { HeroesModule } from './hero.component'; +import { HeroesLifecycleModule } from './hero-lifecycle.component'; +import { HeroesDIModule } from './hero-di.component'; +import { HeroesDIInjectModule } from './hero-di-inject.component'; +import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component'; +import { HeroesIOModule } from './hero-io.component'; +import { HeroesHostBindingsModule } from './heroes-bindings.component'; +import { HeroesQueriesModule } from './heroes-queries.component'; + +platformBrowserDynamic().bootstrapModule(HeroesModule); +platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule); +platformBrowserDynamic().bootstrapModule(HeroesDIModule); +platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule); +platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule); +platformBrowserDynamic().bootstrapModule(HeroesIOModule); +platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule); +platformBrowserDynamic().bootstrapModule(HeroesQueriesModule); diff --git a/public/docs/_examples/cli-quickstart/e2e-spec.ts b/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/cli-quickstart/e2e-spec.ts rename to public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled diff --git a/public/docs/_examples/component-styles/ts/app/app.module.ts b/public/docs/_examples/component-styles/ts/app/app.module.ts new file mode 100644 index 0000000000..31c72cbbf2 --- /dev/null +++ b/public/docs/_examples/component-styles/ts/app/app.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { HeroAppComponent } from './hero-app.component'; +import { HeroAppMainComponent } from './hero-app-main.component'; +import { HeroDetailsComponent } from './hero-details.component'; +import { HeroControlsComponent } from './hero-controls.component'; +import { QuestSummaryComponent } from './quest-summary.component'; +import { HeroTeamComponent } from './hero-team.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + HeroAppComponent, + HeroAppMainComponent, + HeroDetailsComponent, + HeroControlsComponent, + QuestSummaryComponent, + HeroTeamComponent + ], + bootstrap: [ HeroAppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts index fb5b5d9d98..aebb1f729e 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts @@ -1,9 +1,6 @@ import { Component, Input } from '@angular/core'; import { Hero } from './hero'; -import { HeroDetailsComponent } from './hero-details.component'; -import { HeroControlsComponent } from './hero-controls.component'; -import { QuestSummaryComponent } from './quest-summary.component'; @Component({ selector: 'hero-app-main', @@ -12,8 +9,7 @@ import { QuestSummaryComponent } from './quest-summary.component'; - `, - directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent] + ` }) export class HeroAppMainComponent { @Input() hero: Hero; diff --git a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts index 7386226e71..5f1923e6f3 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts @@ -1,6 +1,5 @@ import { Component, HostBinding } from '@angular/core'; import { Hero } from './hero'; -import { HeroAppMainComponent } from './hero-app-main.component'; // #docregion @Component({ @@ -8,8 +7,7 @@ import { HeroAppMainComponent } from './hero-app-main.component'; template: `

    Tour of Heroes

    `, - styles: ['h1 { font-weight: normal; }'], - directives: [HeroAppMainComponent] + styles: ['h1 { font-weight: normal; }'] }) export class HeroAppComponent { // #enddocregion diff --git a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts index f530ec0757..bd86a63e04 100644 --- a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts +++ b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts @@ -1,6 +1,5 @@ import { Component, Input } from '@angular/core'; import { Hero } from './hero'; -import { HeroTeamComponent } from './hero-team.component'; // #docregion styleurls @Component({ @@ -10,8 +9,7 @@ import { HeroTeamComponent } from './hero-team.component'; `, - styleUrls: ['app/hero-details.component.css'], - directives: [HeroTeamComponent] + styleUrls: ['app/hero-details.component.css'] }) export class HeroDetailsComponent { // #enddocregion styleurls diff --git a/public/docs/_examples/component-styles/ts/app/main.ts b/public/docs/_examples/component-styles/ts/app/main.ts index 1d1e75499c..4acf5de663 100644 --- a/public/docs/_examples/component-styles/ts/app/main.ts +++ b/public/docs/_examples/component-styles/ts/app/main.ts @@ -1,4 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { HeroAppComponent } from './hero-app.component'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -bootstrap(HeroAppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts index a67946ac19..b398ebeb57 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts @@ -3,17 +3,13 @@ // #docregion import { Component } from '@angular/core'; -import { CarComponent } from './car/car.component'; -import { HeroesComponent } from './heroes/heroes.component.1'; - @Component({ selector: 'my-app', template: `

    {{title}}

    - `, - directives: [CarComponent, HeroesComponent] + ` }) export class AppComponent { diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts index a6106cbc4b..d24df5568c 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts @@ -1,13 +1,9 @@ // #docregion // #docregion imports import { Component } from '@angular/core'; -import { CarComponent } from './car/car.component'; -import { HeroesComponent } from './heroes/heroes.component.1'; - import { Inject } from '@angular/core'; -import { APP_CONFIG, AppConfig, - HERO_DI_CONFIG } from './app.config'; -import { Logger } from './logger.service'; + +import { APP_CONFIG, AppConfig } from './app.config'; // #enddocregion imports @Component({ @@ -16,14 +12,7 @@ import { Logger } from './logger.service';

    {{title}}

    - `, - directives: [CarComponent, HeroesComponent], - providers: [ - Logger, - // #docregion providers - { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } - // #enddocregion providers - ] + ` }) export class AppComponent { title: string; diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.ts index bb330c9441..9a50661a84 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.ts @@ -3,18 +3,10 @@ // #docregion imports import { Component, Inject } from '@angular/core'; -import { CarComponent } from './car/car.component'; -import { HeroesComponent } from './heroes/heroes.component'; - -import { APP_CONFIG, AppConfig, - HERO_DI_CONFIG } from './app.config'; -import { Logger } from './logger.service'; - +import { APP_CONFIG, AppConfig } from './app.config'; +import { Logger } from './logger.service'; import { UserService } from './user.service'; // #enddocregion imports -import { InjectorComponent } from './injector.component'; -import { TestComponent } from './test.component'; -import { ProvidersComponent } from './providers.component'; @Component({ selector: 'my-app', @@ -31,15 +23,7 @@ import { ProvidersComponent } from './providers.component'; `, - directives: [CarComponent, HeroesComponent, - InjectorComponent, TestComponent, ProvidersComponent], - // #docregion providers - providers: [ - Logger, - UserService, - { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } - ] - // #enddocregion providers + providers: [Logger] }) export class AppComponent { title: string; diff --git a/public/docs/_examples/dependency-injection/ts/app/app.module.ts b/public/docs/_examples/dependency-injection/ts/app/app.module.ts new file mode 100644 index 0000000000..439c9ff276 --- /dev/null +++ b/public/docs/_examples/dependency-injection/ts/app/app.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { CarComponent } from './car/car.component'; +import { HeroesComponent } from './heroes/heroes.component'; +import { HeroListComponent } from './heroes/hero-list.component'; +import { InjectorComponent } from './injector.component'; +import { TestComponent } from './test.component'; +import { ProvidersComponent } from './providers.component'; +import { APP_CONFIG, HERO_DI_CONFIG } from './app.config'; +import { UserService } from './user.service'; + +// #docregion ngmodule +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent, + CarComponent, + HeroesComponent, + HeroListComponent, + InjectorComponent, + TestComponent + ], + // #docregion ngmodule-providers + providers: [ + UserService, + { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } + ], + // #enddocregion ngmodule-providers + bootstrap: [ AppComponent, ProvidersComponent ] +}) +export class AppModule { } +// #enddocregion ngmodule diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts index 6b55f78a6e..cb23d3257c 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts @@ -18,7 +18,7 @@ import { HeroService } from './hero.service';
    {{hero.id}} - {{hero.name}}
    - `, + ` }) export class HeroListComponent { heroes: Hero[]; diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts index b089dba80f..e0e9deae08 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts @@ -1,28 +1,21 @@ // #docplaster // #docregion full, v1 import { Component } from '@angular/core'; - -// #enddocregion full, v1 -import { HeroListComponent } from './hero-list.component.2'; -import { HeroService } from './hero.service.1'; -/* -// #docregion full, v1 -import { HeroListComponent } from './hero-list.component'; // #enddocregion v1 + import { HeroService } from './hero.service'; // #enddocregion full -*/ + // #docregion full, v1 @Component({ selector: 'my-heroes', + // #enddocregion v1 + providers: [HeroService], + // #docregion v1 template: `

    Heroes

    - `, - // #enddocregion v1 - providers: [HeroService], - // #docregion v1 - directives: [HeroListComponent] + ` }) export class HeroesComponent { } diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts index dd2346248c..5923f7590b 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts @@ -1,7 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { HeroListComponent } from './hero-list.component'; import { heroServiceProvider } from './hero.service.provider'; @Component({ @@ -10,7 +9,6 @@ import { heroServiceProvider } from './hero.service.provider';

    Heroes

    `, - providers: [heroServiceProvider], - directives: [HeroListComponent] + providers: [heroServiceProvider] }) export class HeroesComponent { } diff --git a/public/docs/_examples/dependency-injection/ts/app/main.1.ts b/public/docs/_examples/dependency-injection/ts/app/main.1.ts deleted file mode 100644 index 0d83503360..0000000000 --- a/public/docs/_examples/dependency-injection/ts/app/main.1.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* tslint:disable:no-unused-variable */ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component.1'; -import { HeroService } from './heroes/hero.service.1'; - -bootstrap(AppComponent); - -function discouraged() { - // #docregion bootstrap-discouraged - bootstrap(AppComponent, - [HeroService]); // DISCOURAGED (but works) - // #enddocregion bootstrap-discouraged -} diff --git a/public/docs/_examples/dependency-injection/ts/app/main.ts b/public/docs/_examples/dependency-injection/ts/app/main.ts index 2f002de7d9..4acb58eab5 100644 --- a/public/docs/_examples/dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/dependency-injection/ts/app/main.ts @@ -1,8 +1,6 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; -import { ProvidersComponent } from './providers.component'; +import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; // #docregion bootstrap -bootstrap(AppComponent); +browserDynamicPlatform().bootstrapModule(AppModule); // #enddocregion bootstrap -bootstrap(ProvidersComponent); diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts index 0705176292..06ab060557 100644 --- a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts +++ b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts @@ -1,5 +1,6 @@ // #docregion import { Component } from '@angular/core'; + // #docregion import import { Hero } from './hero'; // #enddocregion import diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.ts b/public/docs/_examples/displaying-data/ts/app/app.component.ts index 40c90e2d62..7234959265 100644 --- a/public/docs/_examples/displaying-data/ts/app/app.component.ts +++ b/public/docs/_examples/displaying-data/ts/app/app.component.ts @@ -1,6 +1,7 @@ // #docplaster // #docregion final import { Component } from '@angular/core'; + import { Hero } from './hero'; @Component({ diff --git a/public/docs/_examples/displaying-data/ts/app/app.module.ts b/public/docs/_examples/displaying-data/ts/app/app.module.ts new file mode 100644 index 0000000000..362f3401fa --- /dev/null +++ b/public/docs/_examples/displaying-data/ts/app/app.module.ts @@ -0,0 +1,16 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/displaying-data/ts/app/main.ts b/public/docs/_examples/displaying-data/ts/app/main.ts index 52b47899ef..961a226688 100644 --- a/public/docs/_examples/displaying-data/ts/app/main.ts +++ b/public/docs/_examples/displaying-data/ts/app/main.ts @@ -1,6 +1,6 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; +import { AppModule } from './app.module'; -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/forms-deprecated/e2e-spec.ts b/public/docs/_examples/forms-deprecated/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/forms-deprecated/e2e-spec.ts rename to public/docs/_examples/forms-deprecated/e2e-spec.ts.disabled diff --git a/public/docs/_examples/forms/js/app/app.component.js b/public/docs/_examples/forms/js/app/app.component.js index bb6b789938..56bd982416 100644 --- a/public/docs/_examples/forms/js/app/app.component.js +++ b/public/docs/_examples/forms/js/app/app.component.js @@ -3,8 +3,7 @@ app.AppComponent = ng.core .Component({ selector: 'my-app', - template: '', - directives: [app.HeroFormComponent] + template: '' }) .Class({ constructor: function() {} diff --git a/public/docs/_examples/forms/js/app/app.module.js b/public/docs/_examples/forms/js/app/app.module.js new file mode 100644 index 0000000000..92c7f8b9e5 --- /dev/null +++ b/public/docs/_examples/forms/js/app/app.module.js @@ -0,0 +1,19 @@ +// #docplaster +// #docregion +(function(app) { + app.AppModule = + ng.core.NgModule({ + imports: [ + ng.platformBrowser.BrowserModule, + ng.forms.FormsModule + ], + declarations: [ + app.AppComponent, + app.HeroFormComponent + ], + bootstrap: [ app.AppComponent ] + }) + .Class({ + constructor: function() {} + }); +})(window.app || (window.app = {})); diff --git a/public/docs/_examples/forms/js/app/hero-form.component.js b/public/docs/_examples/forms/js/app/hero-form.component.js index 8988231189..428ff82d35 100644 --- a/public/docs/_examples/forms/js/app/hero-form.component.js +++ b/public/docs/_examples/forms/js/app/hero-form.component.js @@ -9,7 +9,7 @@ }) .Class({ // #docregion submitted - constructor: function() { + constructor: [function() { // #enddocregion submitted this.powers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer' @@ -20,7 +20,7 @@ // #docregion submitted this.submitted = false; - }, + }], onSubmit: function() { this.submitted = true; }, diff --git a/public/docs/_examples/forms/js/app/main.js b/public/docs/_examples/forms/js/app/main.js index 2b866b3685..785823fa84 100644 --- a/public/docs/_examples/forms/js/app/main.js +++ b/public/docs/_examples/forms/js/app/main.js @@ -1,9 +1,8 @@ // #docregion (function(app) { document.addEventListener('DOMContentLoaded', function() { - ng.platformBrowserDynamic.bootstrap(app.AppComponent,[ - ng.forms.disableDeprecatedForms(), - ng.forms.provideForms() - ]); + ng.platformBrowserDynamic + .platformBrowserDynamic() + .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {})); diff --git a/public/docs/_examples/forms/js/index.html b/public/docs/_examples/forms/js/index.html index 8353dfb180..fe525d5549 100644 --- a/public/docs/_examples/forms/js/index.html +++ b/public/docs/_examples/forms/js/index.html @@ -35,6 +35,7 @@ + diff --git a/public/docs/_examples/forms/ts/app/app.component.ts b/public/docs/_examples/forms/ts/app/app.component.ts index 2dcbc8037a..454f7e03db 100644 --- a/public/docs/_examples/forms/ts/app/app.component.ts +++ b/public/docs/_examples/forms/ts/app/app.component.ts @@ -1,10 +1,8 @@ // #docregion -import { Component } from '@angular/core'; -import { HeroFormComponent } from './hero-form.component'; +import { Component } from '@angular/core'; @Component({ selector: 'my-app', - template: '', - directives: [HeroFormComponent] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/forms/ts/app/app.module.ts b/public/docs/_examples/forms/ts/app/app.module.ts new file mode 100644 index 0000000000..f214c02714 --- /dev/null +++ b/public/docs/_examples/forms/ts/app/app.module.ts @@ -0,0 +1,20 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { HeroFormComponent } from './hero-form.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent, + HeroFormComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/forms/ts/app/hero-form.component.html b/public/docs/_examples/forms/ts/app/hero-form.component.html index 80401a1313..4b90a9464f 100644 --- a/public/docs/_examples/forms/ts/app/hero-form.component.html +++ b/public/docs/_examples/forms/ts/app/hero-form.component.html @@ -11,11 +11,13 @@
    - + -
    +
    Name is required
    @@ -24,16 +26,16 @@
    - +
    -
    @@ -111,19 +113,19 @@
    - +
    - +
    -
    @@ -147,20 +149,22 @@ {{diagnostic}}
    - +
    - +
    -
    @@ -175,15 +179,17 @@
    - + TODO: remove this: {{model.name}}
    - + TODO: remove this: {{model.name}}
    @@ -192,15 +198,16 @@ - +
    - +
    TODO: remove this: {{spy.className}}
    diff --git a/public/docs/_examples/forms/ts/app/hero-form.component.ts b/public/docs/_examples/forms/ts/app/hero-form.component.ts index e1a19c5cd9..fb08f7833b 100644 --- a/public/docs/_examples/forms/ts/app/hero-form.component.ts +++ b/public/docs/_examples/forms/ts/app/hero-form.component.ts @@ -2,7 +2,6 @@ // #docregion // #docregion first, final import { Component } from '@angular/core'; -import { NgForm } from '@angular/forms'; import { Hero } from './hero'; @@ -51,7 +50,7 @@ export class HeroFormComponent { // Reveal in html: // Name via form.controls = {{showFormControls(heroForm)}} - showFormControls(form: NgForm) { + showFormControls(form: any) { return form && form.controls['name'] && // #docregion form-controls diff --git a/public/docs/_examples/forms/ts/app/main.ts b/public/docs/_examples/forms/ts/app/main.ts index 9e0244c26a..0cfb0afb43 100644 --- a/public/docs/_examples/forms/ts/app/main.ts +++ b/public/docs/_examples/forms/ts/app/main.ts @@ -1,11 +1,8 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { disableDeprecatedForms, provideForms } from '@angular/forms'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent, [ - disableDeprecatedForms(), - provideForms() - ]) - .catch((err: any) => console.error(err)); +// Compiles the module (asynchronously) with the runtime compiler +// which generates a compiled module factory in memory. +// Then bootstraps with that factory, targeting the browser. +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html index 4df2d32d46..7d6e7cda5d 100644 --- a/public/docs/_examples/forms/ts/index.html +++ b/public/docs/_examples/forms/ts/index.html @@ -7,7 +7,8 @@ - + diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/app.module.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/app.module.ts new file mode 100644 index 0000000000..80047b8e32 --- /dev/null +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/app.module.ts @@ -0,0 +1,43 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { HeroesListComponent } from './heroes-list.component'; +import { HeroEditorComponent } from './hero-editor.component'; +import { HeroCardComponent } from './hero-card.component'; +import { HeroesService } from './heroes.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + providers: [ HeroesService ], + declarations: [ + HeroesListComponent, + HeroCardComponent, + HeroEditorComponent + ], + bootstrap: [ HeroesListComponent ] +}) +export class AppModule { } + +/* Documentation artifact below +// #docregion bad-alternative +// Don't do this! +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + providers: [ HeroesService, RestoreService ], + declarations: [ HeroesListComponent ], + bootstrap: [ + HeroesListComponent, + HeroCardComponent, + HeroEditorComponent + ] +}) +// #enddocregion bad-alternative +*/ diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts index 0fef36e205..af1ece3376 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts @@ -3,8 +3,6 @@ import { Component } from '@angular/core'; import { EditItem } from './edit-item'; import { HeroesService } from './heroes.service'; -import { HeroCardComponent } from './hero-card.component'; -import { HeroEditorComponent } from './hero-editor.component'; import { Hero } from './hero'; @Component({ @@ -30,8 +28,7 @@ import { Hero } from './hero'; -
    `, - directives: [HeroCardComponent, HeroEditorComponent] +
    ` }) export class HeroesListComponent { heroes: Array>; diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts index d24e5a3274..4acf5de663 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts @@ -1,14 +1,5 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { HeroesListComponent } from './heroes-list.component'; -import { HeroesService } from './heroes.service'; - -bootstrap(HeroesListComponent, [HeroesService]); - -/* Documentation artifact below -// #docregion bad-alternative -// Don't do this! -bootstrap(HeroesListComponent, [HeroesService, RestoreService]) -// #enddocregion bad-alternative -*/ +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/homepage-hello-world/ts/app/app.module.ts b/public/docs/_examples/homepage-hello-world/ts/app/app.module.ts new file mode 100644 index 0000000000..55a2ef3693 --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/app/app.module.ts @@ -0,0 +1,16 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { HelloWorldComponent } from './hello_world'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ HelloWorldComponent ], + bootstrap: [ HelloWorldComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/homepage-hello-world/ts/app/main.ts b/public/docs/_examples/homepage-hello-world/ts/app/main.ts index c0b99d1b7b..4acf5de663 100644 --- a/public/docs/_examples/homepage-hello-world/ts/app/main.ts +++ b/public/docs/_examples/homepage-hello-world/ts/app/main.ts @@ -1,6 +1,5 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { HelloWorldComponent } from './hello_world'; - -bootstrap(HelloWorldComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/homepage-todo/ts/app/app.module.ts b/public/docs/_examples/homepage-todo/ts/app/app.module.ts new file mode 100644 index 0000000000..344a98f417 --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/app/app.module.ts @@ -0,0 +1,16 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { TodoAppComponent } from './todo_app'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ TodoAppComponent ], + bootstrap: [ TodoAppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/homepage-todo/ts/app/main.ts b/public/docs/_examples/homepage-todo/ts/app/main.ts index 97ed5fa913..4acf5de663 100644 --- a/public/docs/_examples/homepage-todo/ts/app/main.ts +++ b/public/docs/_examples/homepage-todo/ts/app/main.ts @@ -1,6 +1,5 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { TodoAppComponent } from './todo_app'; - -bootstrap(TodoAppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/lifecycle-hooks/e2e-spec.ts b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts index 535a3c1999..f86218e9a8 100644 --- a/public/docs/_examples/lifecycle-hooks/e2e-spec.ts +++ b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts @@ -92,7 +92,7 @@ describe('Lifecycle hooks', function () { let buttonEle = parentEle.element(by.tagName('button')); // Reset let commentEle = parentEle.element(by.className('comment')); let logEles = parentEle.all(by.css('h4 ~ div')); - let childViewInputEle = parentEle.element(by.css('my-child input')); + let childViewInputEle = parentEle.element(by.css('my-child-view input')); let logCount: number; expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts index 279a609ed3..dfd2b80d24 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts @@ -97,8 +97,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
    `, styles: ['.parent {background: burlywood}'], - providers: [LoggerService], - directives: [AfterContentComponent, ChildComponent] + providers: [LoggerService] }) export class AfterContentParentComponent { logs: string[]; diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts index 000cf348eb..71310e4530 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts @@ -7,7 +7,7 @@ import { LoggerService } from './logger.service'; ////////////////// // #docregion child-view @Component({ - selector: 'my-child', + selector: 'my-child-view', template: '' }) export class ChildViewComponent { @@ -21,15 +21,14 @@ export class ChildViewComponent { // #docregion template template: `
    -- child view begins --
    - +
    -- child view ends --
    ` // #enddocregion template + `

    {{comment}}

    - `, - directives: [ChildViewComponent] + ` }) // #docregion hooks export class AfterViewComponent implements AfterViewChecked, AfterViewInit { @@ -100,8 +99,7 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
    `, styles: ['.parent {background: burlywood}'], - providers: [LoggerService], - directives: [AfterViewComponent] + providers: [LoggerService] }) export class AfterViewParentComponent { logs: string[]; diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts index b3d5e45b76..9b785144ab 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts @@ -1,26 +1,7 @@ // #docregion import { Component } from '@angular/core'; - -import { AfterContentParentComponent } from './after-content.component'; -import { AfterViewParentComponent } from './after-view.component'; -import { CounterParentComponent } from './counter.component'; -import { DoCheckParentComponent } from './do-check.component'; -import { OnChangesParentComponent } from './on-changes.component'; -import { PeekABooParentComponent } from './peek-a-boo-parent.component'; -import { SpyParentComponent } from './spy.component'; - @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: [ - AfterContentParentComponent, - AfterViewParentComponent, - CounterParentComponent, - DoCheckParentComponent, - OnChangesParentComponent, - PeekABooParentComponent, - SpyParentComponent, - ] + templateUrl: 'app/app.component.html' }) -export class AppComponent { -} +export class AppComponent { } diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/app.module.ts b/public/docs/_examples/lifecycle-hooks/ts/app/app.module.ts new file mode 100644 index 0000000000..4d9cabf218 --- /dev/null +++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.module.ts @@ -0,0 +1,67 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; + +import { + AfterContentParentComponent, + AfterContentComponent, + ChildComponent +} from './after-content.component'; + +import { + AfterViewParentComponent, + AfterViewComponent, + ChildViewComponent +} from './after-view.component'; + +import { + CounterParentComponent, + MyCounterComponent +} from './counter.component'; + +import { + DoCheckParentComponent, + DoCheckComponent +} from './do-check.component'; + +import { + OnChangesParentComponent, + OnChangesComponent +} from './on-changes.component'; + +import { PeekABooParentComponent } from './peek-a-boo-parent.component'; +import { PeekABooComponent } from './peek-a-boo.component'; + +import { SpyParentComponent } from './spy.component'; +import { SpyDirective } from './spy.directive'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent, + AfterContentParentComponent, + AfterContentComponent, + ChildComponent, + AfterViewParentComponent, + AfterViewComponent, + ChildViewComponent, + CounterParentComponent, + MyCounterComponent, + DoCheckParentComponent, + DoCheckComponent, + OnChangesParentComponent, + OnChangesComponent, + PeekABooParentComponent, + PeekABooComponent, + SpyParentComponent, + SpyDirective + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts index 6514873232..71167ab791 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts @@ -4,7 +4,6 @@ import { OnChanges, SimpleChange, } from '@angular/core'; -import { SpyDirective } from './spy.directive'; import { LoggerService } from './logger.service'; @Component({ @@ -17,8 +16,7 @@ import { LoggerService } from './logger.service';
    {{chg}}
    `, - styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'], - directives: [SpyDirective] + styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'] }) export class MyCounterComponent implements OnChanges { @Input() counter: number; @@ -59,7 +57,6 @@ export class MyCounterComponent implements OnChanges { `, styles: ['.parent {background: gold;}'], - directives: [MyCounterComponent], providers: [LoggerService] }) export class CounterParentComponent { diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check-parent.component.html b/public/docs/_examples/lifecycle-hooks/ts/app/do-check-parent.component.html new file mode 100644 index 0000000000..cf7c2b91ce --- /dev/null +++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check-parent.component.html @@ -0,0 +1,13 @@ +
    +

    {{title}}

    + + + + +
    Power:
    Hero.name:
    +

    + + + + +
    diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts index 64b998c25a..1ffdd23ba7 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts @@ -86,9 +86,8 @@ export class DoCheckComponent implements DoCheck, OnChanges { @Component({ selector: 'do-check-parent', - templateUrl: 'app/on-changes-parent.component.html', - styles: ['.parent {background: Lavender}'], - directives: [DoCheckComponent] + templateUrl: 'app/do-check-parent.component.html', + styles: ['.parent {background: Lavender}'] }) export class DoCheckParentComponent { hero: Hero; diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts index 1e9be2601e..4acf5de663 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts @@ -1,5 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent).catch(err => console.error(err)); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html index 7889ce8e91..5c76a6056c 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html +++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html @@ -10,5 +10,4 @@ - diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts index 81de85633a..993eb4040d 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts @@ -5,7 +5,6 @@ import { SimpleChange, ViewChild } from '@angular/core'; - class Hero { constructor(public name: string) {} } @@ -52,8 +51,7 @@ export class OnChangesComponent implements OnChanges { @Component({ selector: 'on-changes-parent', templateUrl: 'app/on-changes-parent.component.html', - styles: ['.parent {background: Lavender;}'], - directives: [OnChangesComponent] + styles: ['.parent {background: Lavender;}'] }) export class OnChangesParentComponent { hero: Hero; diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts index e218dc3fc5..3f2bd8585d 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts @@ -1,7 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { PeekABooComponent } from './peek-a-boo.component'; import { LoggerService } from './logger.service'; @Component({ @@ -23,8 +22,7 @@ import { LoggerService } from './logger.service'; `, styles: ['.parent {background: moccasin}'], - directives: [PeekABooComponent], - providers: [LoggerService] + providers: [ LoggerService ] }) export class PeekABooParentComponent { diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts index 4b8d742f4c..2d487f4037 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts @@ -2,7 +2,6 @@ import { Component } from '@angular/core'; import { LoggerService } from './logger.service'; -import { SpyDirective } from './spy.directive'; @Component({ selector: 'spy-parent', @@ -11,7 +10,6 @@ import { SpyDirective } from './spy.directive'; '.parent {background: khaki;}', '.heroes {background: LightYellow; padding: 0 8px}' ], - directives: [SpyDirective], providers: [LoggerService] }) export class SpyParentComponent { diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 21a52a65e3..7015bd0767 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -25,17 +25,17 @@ "author": "", "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.4", - "@angular/compiler": "2.0.0-rc.4", - "@angular/core": "2.0.0-rc.4", - "@angular/forms": "0.2.0", - "@angular/http": "2.0.0-rc.4", - "@angular/platform-browser": "2.0.0-rc.4", - "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-beta.2", + "@angular/common": "2.0.0-rc.5", + "@angular/compiler": "2.0.0-rc.5", + "@angular/core": "2.0.0-rc.5", + "@angular/forms": "0.3.0", + "@angular/http": "2.0.0-rc.5", + "@angular/platform-browser": "2.0.0-rc.5", + "@angular/platform-browser-dynamic": "2.0.0-rc.5", + "@angular/router": "3.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.4", - "angular2-in-memory-web-api": "0.0.14", + "@angular/upgrade": "2.0.0-rc.5", + "angular2-in-memory-web-api": "0.0.15", "bootstrap": "^3.3.6", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", diff --git a/public/docs/_examples/pipes/ts/app/app.component.ts b/public/docs/_examples/pipes/ts/app/app.component.ts index dd4a9c3bad..1a53c144aa 100644 --- a/public/docs/_examples/pipes/ts/app/app.component.ts +++ b/public/docs/_examples/pipes/ts/app/app.component.ts @@ -1,28 +1,9 @@ // #docregion import { Component } from '@angular/core'; -import { HTTP_PROVIDERS } from '@angular/http'; - -import { FlyingHeroesComponent, - FlyingHeroesImpureComponent } from './flying-heroes.component'; -import { HeroAsyncMessageComponent } from './hero-async-message.component'; -import { HeroBirthdayComponent } from './hero-birthday1.component'; -import { HeroBirthday2Component } from './hero-birthday2.component'; -import { HeroListComponent } from './hero-list.component'; -import { PowerBoosterComponent } from './power-booster.component'; -import { PowerBoostCalculatorComponent } from './power-boost-calculator.component'; @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: [ - FlyingHeroesComponent, FlyingHeroesImpureComponent, - HeroAsyncMessageComponent, - HeroBirthdayComponent, - HeroBirthday2Component, - HeroListComponent, - PowerBoosterComponent, PowerBoostCalculatorComponent - ], - providers: [HTTP_PROVIDERS] + templateUrl: 'app/app.component.html' }) export class AppComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 diff --git a/public/docs/_examples/pipes/ts/app/app.module.ts b/public/docs/_examples/pipes/ts/app/app.module.ts new file mode 100644 index 0000000000..89a3a29505 --- /dev/null +++ b/public/docs/_examples/pipes/ts/app/app.module.ts @@ -0,0 +1,48 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; + +import { AppComponent } from './app.component'; +import { + FlyingHeroesComponent, + FlyingHeroesImpureComponent +} from './flying-heroes.component'; +import { HeroAsyncMessageComponent } from './hero-async-message.component'; +import { HeroBirthdayComponent } from './hero-birthday1.component'; +import { HeroBirthday2Component } from './hero-birthday2.component'; +import { HeroListComponent } from './hero-list.component'; +import { PowerBoosterComponent } from './power-booster.component'; +import { PowerBoostCalculatorComponent } from './power-boost-calculator.component'; +import { + FlyingHeroesPipe, + FlyingHeroesImpurePipe +} from './flying-heroes.pipe'; +import { FetchJsonPipe } from './fetch-json.pipe'; +import { ExponentialStrengthPipe } from './exponential-strength.pipe'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + HttpModule + ], + declarations: [ + AppComponent, + FlyingHeroesComponent, + FlyingHeroesImpureComponent, + HeroAsyncMessageComponent, + HeroBirthdayComponent, + HeroBirthday2Component, + HeroListComponent, + PowerBoosterComponent, + PowerBoostCalculatorComponent, + FlyingHeroesPipe, + FlyingHeroesImpurePipe, + FetchJsonPipe, + ExponentialStrengthPipe + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes-impure.component.html b/public/docs/_examples/pipes/ts/app/flying-heroes-impure.component.html new file mode 100644 index 0000000000..66bd86f81c --- /dev/null +++ b/public/docs/_examples/pipes/ts/app/flying-heroes-impure.component.html @@ -0,0 +1,38 @@ + + +

    {{title}}

    +

    + +New hero: + + + can fly +

    +

    + Mutate array + + + +

    + +

    Heroes who fly (piped)

    +
    + +
    + {{hero.name}} +
    + +
    + +

    All Heroes (no pipe)

    +
    + + +
    + {{hero.name}} +
    + + +
    diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts index d7bc01f94f..a6a8dd08b2 100644 --- a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts +++ b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts @@ -2,15 +2,12 @@ // #docregion import { Component } from '@angular/core'; -import { FlyingHeroesPipe, - FlyingHeroesImpurePipe } from './flying-heroes.pipe'; import { HEROES } from './heroes'; @Component({ selector: 'flying-heroes', templateUrl: 'app/flying-heroes.component.html', - styles: ['#flyers, #all {font-style: italic}'], - pipes: [FlyingHeroesPipe] + styles: ['#flyers, #all {font-style: italic}'] }) // #docregion v1 export class FlyingHeroesComponent { @@ -53,11 +50,10 @@ export class FlyingHeroesComponent { // #docregion impure-component @Component({ selector: 'flying-heroes-impure', - templateUrl: 'app/flying-heroes.component.html', + templateUrl: 'app/flying-heroes-impure.component.html', // #enddocregion impure-component styles: ['.flyers, .all {font-style: italic}'], // #docregion impure-component - pipes: [FlyingHeroesImpurePipe] }) export class FlyingHeroesImpureComponent extends FlyingHeroesComponent { title = 'Flying Heroes (impure pipe)'; diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts index 425c021931..87db9c277e 100644 --- a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts +++ b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts @@ -19,7 +19,7 @@ export class FlyingHeroesPipe implements PipeTransform { // #docregion impure // #docregion pipe-decorator @Pipe({ - name: 'flyingHeroes', + name: 'flyingHeroesImpure', pure: false }) // #enddocregion pipe-decorator diff --git a/public/docs/_examples/pipes/ts/app/hero-list.component.ts b/public/docs/_examples/pipes/ts/app/hero-list.component.ts index 0b9d8df37e..dea501b6b5 100644 --- a/public/docs/_examples/pipes/ts/app/hero-list.component.ts +++ b/public/docs/_examples/pipes/ts/app/hero-list.component.ts @@ -1,8 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { FetchJsonPipe } from './fetch-json.pipe'; - @Component({ selector: 'hero-list', // #docregion template @@ -16,8 +14,7 @@ import { FetchJsonPipe } from './fetch-json.pipe';

    Heroes as JSON: {{'heroes.json' | fetch | json}}

    - `, + ` // #enddocregion template - pipes: [FetchJsonPipe] }) export class HeroListComponent { } diff --git a/public/docs/_examples/pipes/ts/app/main.ts b/public/docs/_examples/pipes/ts/app/main.ts index dd9994d2b6..3001ee1461 100644 --- a/public/docs/_examples/pipes/ts/app/main.ts +++ b/public/docs/_examples/pipes/ts/app/main.ts @@ -1,6 +1,6 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import 'rxjs/Rx'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts index 2c97e4a8f6..e65e29ad4c 100644 --- a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts +++ b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts @@ -1,8 +1,6 @@ // #docregion import { Component } from '@angular/core'; -import { ExponentialStrengthPipe } from './exponential-strength.pipe'; - @Component({ selector: 'power-boost-calculator', template: ` @@ -12,8 +10,7 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';

    Super Hero Power: {{power | exponentialStrength: factor}}

    - `, - pipes: [ExponentialStrengthPipe] + ` }) export class PowerBoostCalculatorComponent { power = 5; diff --git a/public/docs/_examples/pipes/ts/app/power-booster.component.ts b/public/docs/_examples/pipes/ts/app/power-booster.component.ts index b62e678e90..08e3e24c7b 100644 --- a/public/docs/_examples/pipes/ts/app/power-booster.component.ts +++ b/public/docs/_examples/pipes/ts/app/power-booster.component.ts @@ -1,14 +1,11 @@ // #docregion import { Component } from '@angular/core'; -import { ExponentialStrengthPipe } from './exponential-strength.pipe'; - @Component({ selector: 'power-booster', template: `

    Power Booster

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

    - `, - pipes: [ExponentialStrengthPipe] + ` }) export class PowerBoosterComponent { } diff --git a/public/docs/_examples/quickstart/js/app/app.module.js b/public/docs/_examples/quickstart/js/app/app.module.js new file mode 100644 index 0000000000..0f3d5f82cf --- /dev/null +++ b/public/docs/_examples/quickstart/js/app/app.module.js @@ -0,0 +1,15 @@ +// #docplaster +// #docregion +(function(app) { + app.AppModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + // #docregion import + declarations: [ app.AppComponent ], + // #enddocregion import + bootstrap: [ app.AppComponent ] + }) + .Class({ + constructor: function() {} + }); +})(window.app || (window.app = {})); diff --git a/public/docs/_examples/quickstart/js/app/main.js b/public/docs/_examples/quickstart/js/app/main.js index 55a77b9ddd..785823fa84 100644 --- a/public/docs/_examples/quickstart/js/app/main.js +++ b/public/docs/_examples/quickstart/js/app/main.js @@ -1,8 +1,8 @@ // #docregion (function(app) { document.addEventListener('DOMContentLoaded', function() { - // #docregion import - ng.platformBrowserDynamic.bootstrap(app.AppComponent); - // #enddocregion import + ng.platformBrowserDynamic + .platformBrowserDynamic() + .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {})); diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html index a1e88e0461..b127bdce13 100644 --- a/public/docs/_examples/quickstart/js/index.html +++ b/public/docs/_examples/quickstart/js/index.html @@ -27,6 +27,7 @@ + diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 358034f15e..5b3ecbc847 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -7,23 +7,23 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.4", - "@angular/compiler": "2.0.0-rc.4", - "@angular/core": "2.0.0-rc.4", - "@angular/forms": "0.2.0", - "@angular/http": "2.0.0-rc.4", - "@angular/platform-browser": "2.0.0-rc.4", - "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-beta.1", + "@angular/common": "2.0.0-rc.5", + "@angular/compiler": "2.0.0-rc.5", + "@angular/core": "2.0.0-rc.5", + "@angular/forms": "0.3.0", + "@angular/http": "2.0.0-rc.5", + "@angular/platform-browser": "2.0.0-rc.5", + "@angular/platform-browser-dynamic": "2.0.0-rc.5", + "@angular/router": "3.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.4", + "@angular/upgrade": "2.0.0-rc.5", "core-js": "^2.4.0", "reflect-metadata": "0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "0.6.12", - "angular2-in-memory-web-api": "0.0.14", + "angular2-in-memory-web-api": "0.0.15", "bootstrap": "^3.3.6" }, "devDependencies": { diff --git a/public/docs/_examples/quickstart/ts/app/app.module.ts b/public/docs/_examples/quickstart/ts/app/app.module.ts new file mode 100644 index 0000000000..b4fc185c24 --- /dev/null +++ b/public/docs/_examples/quickstart/ts/app/app.module.ts @@ -0,0 +1,12 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts index 2aede345e9..4ad787ebfd 100644 --- a/public/docs/_examples/quickstart/ts/app/main.ts +++ b/public/docs/_examples/quickstart/ts/app/main.ts @@ -1,8 +1,8 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; - // #docregion import -import { AppComponent } from './app.component'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app.module'; // #enddocregion import -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index ef5d180619..4f0bc098fd 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -11,16 +11,16 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.4", - "@angular/compiler": "2.0.0-rc.4", - "@angular/core": "2.0.0-rc.4", - "@angular/forms": "0.2.0", - "@angular/http": "2.0.0-rc.4", - "@angular/platform-browser": "2.0.0-rc.4", - "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-beta.1", + "@angular/common": "2.0.0-rc.5", + "@angular/compiler": "2.0.0-rc.5", + "@angular/core": "2.0.0-rc.5", + "@angular/forms": "0.3.0", + "@angular/http": "2.0.0-rc.5", + "@angular/platform-browser": "2.0.0-rc.5", + "@angular/platform-browser-dynamic": "2.0.0-rc.5", + "@angular/router": "3.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.4", + "@angular/upgrade": "2.0.0-rc.5", "systemjs": "0.19.27", "core-js": "^2.4.0", @@ -28,7 +28,7 @@ "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", - "angular2-in-memory-web-api": "0.0.14", + "angular2-in-memory-web-api": "0.0.15", "bootstrap": "^3.3.6" }, "devDependencies": { diff --git a/public/docs/_examples/quickstart/ts/typings.1.json b/public/docs/_examples/quickstart/ts/typings.1.json index 3385926d1f..3d826df25a 100644 --- a/public/docs/_examples/quickstart/ts/typings.1.json +++ b/public/docs/_examples/quickstart/ts/typings.1.json @@ -2,6 +2,6 @@ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", - "node": "registry:dt/node#6.0.0+20160621231320" + "node": "registry:dt/node#6.0.0+20160807145350" } } diff --git a/public/docs/_examples/router-deprecated/e2e-spec.ts b/public/docs/_examples/router-deprecated/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/router-deprecated/e2e-spec.ts rename to public/docs/_examples/router-deprecated/e2e-spec.ts.disabled diff --git a/public/docs/_examples/router/e2e-spec.ts b/public/docs/_examples/router/e2e-spec.ts index ac3e36f4ea..bf672c3f01 100644 --- a/public/docs/_examples/router/e2e-spec.ts +++ b/public/docs/_examples/router/e2e-spec.ts @@ -11,18 +11,18 @@ describe('Router', function () { return { hrefs: hrefEles, - routerParent: element(by.css('my-app > undefined')), - routerTitle: element(by.css('my-app > undefined > h2')), + routerParent: element(by.css('my-app > ng-component')), + routerTitle: element(by.css('my-app > ng-component > h2')), crisisHref: hrefEles.get(0), - crisisList: element.all(by.css('my-app > undefined > undefined li')), - crisisDetail: element(by.css('my-app > undefined > undefined > div')), - crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')), + crisisList: element.all(by.css('my-app > ng-component > ng-component li')), + crisisDetail: element(by.css('my-app > ng-component > ng-component > div')), + crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > div > h3')), heroesHref: hrefEles.get(1), - heroesList: element.all(by.css('my-app > undefined li')), - heroDetail: element(by.css('my-app > undefined > div')), - heroDetailTitle: element(by.css('my-app > undefined > div > h3')), + heroesList: element.all(by.css('my-app > ng-component li')), + heroDetail: element(by.css('my-app > ng-component > div')), + heroDetailTitle: element(by.css('my-app > ng-component > div > h3')), adminHref: hrefEles.get(2), loginHref: hrefEles.get(3) @@ -31,7 +31,7 @@ describe('Router', function () { it('should be able to see the start screen', function () { let page = getPageStruct(); - expect(page.hrefs.count()).toEqual(4, 'should be two dashboard choices'); + expect(page.hrefs.count()).toEqual(4, 'should be 4 dashboard choices'); expect(page.crisisHref.getText()).toEqual('Crisis Center'); expect(page.heroesHref.getText()).toEqual('Heroes'); expect(page.adminHref.getText()).toEqual('Crisis Admin'); @@ -40,7 +40,9 @@ describe('Router', function () { it('should be able to see crises center items', function () { let page = getPageStruct(); - expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start'); + page.crisisHref.click().then(function() { + expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start'); + }); }); it('should be able to see hero items', function () { @@ -62,11 +64,17 @@ describe('Router', function () { }); it('should be able to edit and save details from the crisis center view', function () { - crisisCenterEdit(2, true); + let page = getPageStruct(); + page.crisisHref.click().then(function() { + crisisCenterEdit(2, true); + }); }); xit('should be able to edit and cancel details from the crisis center view', function () { - crisisCenterEdit(3, false); + let page = getPageStruct(); + page.crisisHref.click().then(function() { + crisisCenterEdit(3, false); + }); }); it('should be able to edit and save details from the heroes view', function () { diff --git a/public/docs/_examples/router/ts/app/app.component.1.ts b/public/docs/_examples/router/ts/app/app.component.1.ts index e124b6771a..1b0aba0044 100644 --- a/public/docs/_examples/router/ts/app/app.component.1.ts +++ b/public/docs/_examples/router/ts/app/app.component.1.ts @@ -1,10 +1,6 @@ /* First version */ -// #docplaster // #docregion import { Component } from '@angular/core'; -// #docregion import-router -import { ROUTER_DIRECTIVES } from '@angular/router'; -// #enddocregion import-router @Component({ selector: 'my-app', @@ -16,11 +12,7 @@ import { ROUTER_DIRECTIVES } from '@angular/router'; Heroes - `, + ` // #enddocregion template - // #docregion directives - directives: [ROUTER_DIRECTIVES] - // #enddocregion directives }) - export class AppComponent { } diff --git a/public/docs/_examples/router/ts/app/app.component.2.ts b/public/docs/_examples/router/ts/app/app.component.2.ts index fcbde30967..7593aa1608 100644 --- a/public/docs/_examples/router/ts/app/app.component.2.ts +++ b/public/docs/_examples/router/ts/app/app.component.2.ts @@ -2,23 +2,7 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -// #enddocregion -/* - // Apparent Milestone 2 imports - // #docregion - // #docregion hero-import - import { HeroDetailComponent } from './heroes/hero-detail.component'; - import { HeroListComponent } from './heroes/hero-list.component'; - import { HeroService } from './heroes/hero.service'; - // #enddocregion hero-import - // #enddocregion - */ -// Actual Milestone 2 imports -import { HeroService } from './heroes/hero.service'; -// #docregion +import { Component } from '@angular/core'; @Component({ selector: 'my-app', @@ -29,12 +13,7 @@ import { HeroService } from './heroes/hero.service'; Heroes - `, - providers: [HeroService], - directives: [ROUTER_DIRECTIVES] + ` }) -// #enddocregion export class AppComponent { } -// #enddocregion route-config -// #enddocregion diff --git a/public/docs/_examples/router/ts/app/app.component.3.ts b/public/docs/_examples/router/ts/app/app.component.3.ts index d8bb30b1e2..1150a01814 100644 --- a/public/docs/_examples/router/ts/app/app.component.3.ts +++ b/public/docs/_examples/router/ts/app/app.component.3.ts @@ -1,9 +1,7 @@ /* tslint:disable:no-unused-variable */ // #docplaster import { Component } from '@angular/core'; -import { Router, ROUTER_DIRECTIVES } from '@angular/router'; - -import { HeroService } from './heroes/hero.service'; +import { Router } from '@angular/router'; @Component({ selector: 'my-app', @@ -45,10 +43,8 @@ import { HeroService } from './heroes/hero.service'; Shark Crisis - `, + ` // #enddocregion template - providers: [HeroService], - directives: [ROUTER_DIRECTIVES] }) export class AppComponent { } diff --git a/public/docs/_examples/router/ts/app/app.component.4.ts b/public/docs/_examples/router/ts/app/app.component.4.ts index 80cf4b0d17..e609850a42 100644 --- a/public/docs/_examples/router/ts/app/app.component.4.ts +++ b/public/docs/_examples/router/ts/app/app.component.4.ts @@ -1,9 +1,5 @@ // #docregion import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { DialogService } from './dialog.service'; -import { HeroService } from './heroes/hero.service'; @Component({ selector: 'my-app', @@ -17,13 +13,8 @@ import { HeroService } from './heroes/hero.service'; Crisis Admin - `, + ` // #enddocregion template - providers: [ - HeroService, - DialogService - ], - directives: [ROUTER_DIRECTIVES] }) export class AppComponent { } diff --git a/public/docs/_examples/router/ts/app/app.component.ts b/public/docs/_examples/router/ts/app/app.component.ts index a3ad280a45..2dcb0a062b 100644 --- a/public/docs/_examples/router/ts/app/app.component.ts +++ b/public/docs/_examples/router/ts/app/app.component.ts @@ -1,10 +1,6 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { DialogService } from './dialog.service'; -import { HeroService } from './heroes/hero.service'; @Component({ selector: 'my-app', @@ -19,13 +15,8 @@ import { HeroService } from './heroes/hero.service'; Login - `, + ` // #enddocregion template - providers: [ - HeroService, - DialogService - ], - directives: [ROUTER_DIRECTIVES] }) export class AppComponent { } diff --git a/public/docs/_examples/router/ts/app/app.module.1.ts b/public/docs/_examples/router/ts/app/app.module.1.ts new file mode 100644 index 0000000000..c6d5648bbf --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.module.1.ts @@ -0,0 +1,35 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + + +// #docregion router-basics +import { AppComponent } from './app.component'; +import { routing, + appRoutingProviders } from './app.routing'; + +import { HeroListComponent } from './hero-list.component'; +import { CrisisListComponent } from './crisis-list.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing + ], + declarations: [ + AppComponent, + HeroListComponent, + CrisisListComponent + ], + providers: [ + appRoutingProviders + ], + bootstrap: [ AppComponent ] +}) +// #enddocregion router-basics +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/app.module.2.ts b/public/docs/_examples/router/ts/app/app.module.2.ts new file mode 100644 index 0000000000..35913ae6a2 --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.module.2.ts @@ -0,0 +1,35 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { routing, + appRoutingProviders } from './app.routing'; + +// #docregion hero-import +import { HeroesModule } from './heroes/heroes.module'; + +import { CrisisListComponent } from './crisis-list.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing, + HeroesModule + ], + declarations: [ + AppComponent, + CrisisListComponent + ], + providers: [ + appRoutingProviders + ], + bootstrap: [ AppComponent ] +}) +// #enddocregion hero-import +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/app.module.3.ts b/public/docs/_examples/router/ts/app/app.module.3.ts new file mode 100644 index 0000000000..d1969a860a --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.module.3.ts @@ -0,0 +1,33 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { routing, + appRoutingProviders } from './app.routing'; + +import { HeroesModule } from './heroes/heroes.module'; +import { CrisisCenterModule } from './crisis-center/crisis-center.module'; + +import { DialogService } from './dialog.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing, + HeroesModule, + CrisisCenterModule + ], + declarations: [ + AppComponent + ], + providers: [ + appRoutingProviders, + DialogService + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} diff --git a/public/docs/_examples/router/ts/app/app.module.4.ts b/public/docs/_examples/router/ts/app/app.module.4.ts new file mode 100644 index 0000000000..96a8eb61d9 --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.module.4.ts @@ -0,0 +1,28 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { Routes, RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +const routes: Routes = [ + +]; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/ + ], + declarations: [ + AppComponent + ], + providers: [ + + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} diff --git a/public/docs/_examples/router/ts/app/app.module.ts b/public/docs/_examples/router/ts/app/app.module.ts new file mode 100644 index 0000000000..f273052d83 --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.module.ts @@ -0,0 +1,35 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { routing, + appRoutingProviders } from './app.routing'; + +import { HeroesModule } from './heroes/heroes.module'; + +import { LoginComponent } from './login.component'; + +import { DialogService } from './dialog.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing, + HeroesModule + ], + declarations: [ + AppComponent, + LoginComponent + ], + providers: [ + appRoutingProviders, + DialogService + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/app.routes.3.ts b/public/docs/_examples/router/ts/app/app.routes.3.ts deleted file mode 100644 index e49d055672..0000000000 --- a/public/docs/_examples/router/ts/app/app.routes.3.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docplaster -// #docregion -import { provideRouter, RouterConfig } from '@angular/router'; - -import { CrisisListComponent } from './crisis-center/crisis-list.component'; -import { heroesRoutes } from './heroes/heroes.routes'; - -export const routes: RouterConfig = [ - ...heroesRoutes, - { path: 'crisis-center', component: CrisisListComponent } -]; - -export const appRouterProviders = [ - provideRouter(routes) -]; diff --git a/public/docs/_examples/router/ts/app/app.routes.4.ts b/public/docs/_examples/router/ts/app/app.routes.4.ts deleted file mode 100644 index d51635a676..0000000000 --- a/public/docs/_examples/router/ts/app/app.routes.4.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { provideRouter, RouterConfig } from '@angular/router'; - -import { crisisCenterRoutes } from './crisis-center/crisis-center.routes'; -import { heroesRoutes } from './heroes/heroes.routes'; - -export const routes: RouterConfig = [ - ...heroesRoutes, - ...crisisCenterRoutes -]; - -export const appRouterProviders = [ - provideRouter(routes) -]; diff --git a/public/docs/_examples/router/ts/app/app.routes.5.ts b/public/docs/_examples/router/ts/app/app.routes.5.ts deleted file mode 100644 index 87e64af66e..0000000000 --- a/public/docs/_examples/router/ts/app/app.routes.5.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { provideRouter, RouterConfig } from '@angular/router'; - -import { crisisCenterRoutes } from './crisis-center/crisis-center.routes'; -import { heroesRoutes } from './heroes/heroes.routes'; - -import { loginRoutes, - authProviders } from './login.routes'; - -export const routes: RouterConfig = [ - ...heroesRoutes, - ...loginRoutes, - ...crisisCenterRoutes -]; - -export const appRouterProviders = [ - provideRouter(routes), - authProviders -]; diff --git a/public/docs/_examples/router/ts/app/app.routes.ts b/public/docs/_examples/router/ts/app/app.routes.ts deleted file mode 100644 index eb238680da..0000000000 --- a/public/docs/_examples/router/ts/app/app.routes.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { provideRouter, RouterConfig } from '@angular/router'; - -import { crisisCenterRoutes } from './crisis-center/crisis-center.routes'; -import { heroesRoutes } from './heroes/heroes.routes'; - -import { loginRoutes, - authProviders } from './login.routes'; - -import { CanDeactivateGuard } from './can-deactivate-guard.service'; - -export const routes: RouterConfig = [ - ...heroesRoutes, - ...loginRoutes, - ...crisisCenterRoutes -]; - -export const appRouterProviders = [ - provideRouter(routes), - authProviders, - CanDeactivateGuard -]; diff --git a/public/docs/_examples/router/ts/app/app.routes.1.ts b/public/docs/_examples/router/ts/app/app.routing.1.ts similarity index 73% rename from public/docs/_examples/router/ts/app/app.routes.1.ts rename to public/docs/_examples/router/ts/app/app.routing.1.ts index 7919f34aba..ccdff404a4 100644 --- a/public/docs/_examples/router/ts/app/app.routes.1.ts +++ b/public/docs/_examples/router/ts/app/app.routing.1.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion // #docregion route-config -import { provideRouter, RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; // #enddocregion route-config // #enddocregion @@ -15,10 +15,16 @@ import { PageNotFoundComponent } from './not-found.component'; // #docregion // #docregion route-config -const routes: RouterConfig = [ +const appRoutes: Routes = [ // #docregion route-defs { path: 'crisis-center', component: CrisisCenterComponent }, - { path: 'heroes', component: HeroListComponent }, + { + path: 'heroes', + component: HeroListComponent, + data: { + title: 'Heroes List' + } + }, // #enddocregion route-defs // #docregion hero-detail-route { path: 'hero/:id', component: HeroDetailComponent }, @@ -26,8 +32,10 @@ const routes: RouterConfig = [ { path: '**', component: PageNotFoundComponent } ]; -export const appRouterProviders = [ - provideRouter(routes) +export const appRoutingProviders: any[] = [ + ]; + +export const routing = RouterModule.forRoot(appRoutes); // #enddocregion route-config // #enddocregion diff --git a/public/docs/_examples/router/ts/app/app.routes.2.ts b/public/docs/_examples/router/ts/app/app.routing.2.ts similarity index 67% rename from public/docs/_examples/router/ts/app/app.routes.2.ts rename to public/docs/_examples/router/ts/app/app.routing.2.ts index e2e3d1f9fc..81c04c86da 100644 --- a/public/docs/_examples/router/ts/app/app.routes.2.ts +++ b/public/docs/_examples/router/ts/app/app.routing.2.ts @@ -1,19 +1,21 @@ // #docplaster // #docregion // #docregion route-config -import { provideRouter, RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; // #enddocregion route-config import { CrisisListComponent } from './crisis-list.component'; import { HeroListComponent } from './hero-list.component'; // #docregion route-config -const routes: RouterConfig = [ +const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'heroes', component: HeroListComponent } ]; -export const appRouterProviders = [ - provideRouter(routes) +export const appRoutingProviders: any[] = [ + ]; + +export const routing = RouterModule.forRoot(appRoutes); // #enddocregion route-config diff --git a/public/docs/_examples/router/ts/app/app.routing.3.ts b/public/docs/_examples/router/ts/app/app.routing.3.ts new file mode 100644 index 0000000000..2eab693570 --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.routing.3.ts @@ -0,0 +1,15 @@ +// #docplaster +// #docregion +import { Routes, RouterModule } from '@angular/router'; + +import { CrisisListComponent } from './crisis-center/crisis-list.component'; + +const appRoutes: Routes = [ + { path: 'crisis-center', component: CrisisListComponent } +]; + +export const appRoutingProviders: any[] = [ + +]; + +export const routing = RouterModule.forRoot(appRoutes); diff --git a/public/docs/_examples/router/ts/app/app.routing.4.ts b/public/docs/_examples/router/ts/app/app.routing.4.ts new file mode 100644 index 0000000000..59153e9e53 --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.routing.4.ts @@ -0,0 +1,12 @@ +// #docregion +import { Routes, RouterModule } from '@angular/router'; + +const appRoutes: Routes = [ + +]; + +export const appRoutingProviders: any[] = [ + +]; + +export const routing = RouterModule.forRoot(appRoutes); diff --git a/public/docs/_examples/router/ts/app/app.routing.5.ts b/public/docs/_examples/router/ts/app/app.routing.5.ts new file mode 100644 index 0000000000..8334e865a5 --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.routing.5.ts @@ -0,0 +1,15 @@ +// #docregion +import { Routes, RouterModule } from '@angular/router'; + +import { loginRoutes, + authProviders } from './login.routing'; + +const appRoutes: Routes = [ + ...loginRoutes +]; + +export const appRoutingProviders: any[] = [ + authProviders +]; + +export const routing = RouterModule.forRoot(appRoutes); diff --git a/public/docs/_examples/router/ts/app/app.routing.ts b/public/docs/_examples/router/ts/app/app.routing.ts new file mode 100644 index 0000000000..46f497e45e --- /dev/null +++ b/public/docs/_examples/router/ts/app/app.routing.ts @@ -0,0 +1,45 @@ +// #docregion +// #docregion import-router +import { Routes, RouterModule } from '@angular/router'; +// #enddocregion import-router + +import { loginRoutes, + authProviders } from './login.routing'; + +import { CanDeactivateGuard } from './can-deactivate-guard.service'; + +// #docregion lazy-load-crisis-center +const crisisCenterRoutes: Routes = [ + { + path: '', + redirectTo: '/heroes', + pathMatch: 'full' + }, + { + path: 'crisis-center', + loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule' + } +]; + +const appRoutes: Routes = [ + ...loginRoutes, + ...crisisCenterRoutes +]; +// #enddocregion lazy-load-crisis-center + +export const appRoutingProviders: any[] = [ + authProviders, + CanDeactivateGuard +]; + +export const routing = RouterModule.forRoot(appRoutes); + +/* A link parameters array +// #docregion heroes-redirect +{ + path: '', + redirectTo: '/heroes', + pathMatch: 'full' +}, +// #enddocregion heroes-redirect +*/ diff --git a/public/docs/_examples/router/ts/app/auth-guard.service.ts b/public/docs/_examples/router/ts/app/auth-guard.service.ts index a70fadb5cf..63aee1deb5 100755 --- a/public/docs/_examples/router/ts/app/auth-guard.service.ts +++ b/public/docs/_examples/router/ts/app/auth-guard.service.ts @@ -2,7 +2,8 @@ import { Injectable } from '@angular/core'; import { CanActivate, Router, ActivatedRouteSnapshot, - RouterStateSnapshot } from '@angular/router'; + RouterStateSnapshot, + NavigationExtras } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() @@ -20,7 +21,7 @@ export class AuthGuard implements CanActivate { // Set our navigation extras object // that contains our global query params and fragment - let navigationExtras = { + let navigationExtras: NavigationExtras = { queryParams: { 'session_id': sessionId }, fragment: 'anchor' }; diff --git a/public/docs/_examples/router/ts/app/can-deactivate-guard.service.1.ts b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.1.ts new file mode 100644 index 0000000000..b6e16bfa4c --- /dev/null +++ b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.1.ts @@ -0,0 +1,32 @@ +// #docregion +import { Injectable } from '@angular/core'; +import { CanDeactivate, + ActivatedRouteSnapshot, + RouterStateSnapshot } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; + +import { CrisisDetailComponent } from './crisis-center/crisis-detail.component'; + +@Injectable() +export class CanDeactivateGuard implements CanDeactivate { + + canDeactivate( + component: CrisisDetailComponent, + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable | Promise | boolean { + // Get the Crisis Center ID + console.log(route.params['id']); + + // Get the current URL + console.log(state.url); + + // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged + if (!component.crisis || component.crisis.name === component.editName) { + return true; + } + // Otherwise ask the user with the dialog service and return its + // promise which resolves to true or false when the user decides + return component.dialogService.confirm('Discard changes?'); + } +} diff --git a/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts index e7774533bc..db8ecef5bf 100644 --- a/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts +++ b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts @@ -9,7 +9,7 @@ export interface CanComponentDeactivate { @Injectable() export class CanDeactivateGuard implements CanDeactivate { - canDeactivate(component: CanComponentDeactivate): Observable | boolean { + canDeactivate(component: CanComponentDeactivate): Observable | Promise | boolean { return component.canDeactivate ? component.canDeactivate() : true; } } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts index 4f4173a4e5..a8dacc8549 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts @@ -5,7 +5,6 @@ import { Component } from '@angular/core'; template: `

    CRISIS ADMINISTRATION

    Manage your crises here

    - `, - directives: [] + ` }) export class CrisisAdminComponent { } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts index 9783466d4c..38fe14a38e 100755 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { Observable } from 'rxjs/Observable'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; @Component({ @@ -12,25 +12,22 @@ import 'rxjs/add/operator/map';

    Session ID: {{ sessionId | async }}

    Token: {{ token | async }}

    - `, - directives: [] + ` }) export class CrisisAdminComponent implements OnInit { sessionId: Observable; token: Observable; - constructor(private router: Router) {} + constructor(private route: ActivatedRoute) {} ngOnInit() { // Capture the session ID if available - this.sessionId = this.router - .routerState + this.sessionId = this.route .queryParams .map(params => params['session_id'] || 'None'); // Capture the fragment if available - this.token = this.router - .routerState + this.token = this.route .fragment .map(fragment => fragment || 'None'); } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts deleted file mode 100644 index d5a1112c7b..0000000000 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { CrisisService } from './crisis.service'; - -// #docregion minus-imports -@Component({ - template: ` -

    CRISIS CENTER

    - - `, - directives: [ROUTER_DIRECTIVES], -// #docregion providers - providers: [CrisisService] -// #enddocregion providers -}) -export class CrisisCenterComponent { } -// #enddocregion minus-imports diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts index 9cc268b6bf..31d1790f45 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts @@ -1,16 +1,14 @@ // #docregion -import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { CrisisService } from './crisis.service'; +// #docplaster +import { Component } from '@angular/core'; +// #docregion minus-imports @Component({ template: `

    CRISIS CENTER

    - `, - directives: [ROUTER_DIRECTIVES], - providers: [CrisisService] + ` }) export class CrisisCenterComponent { } +// #enddocregion minus-imports // #enddocregion diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts new file mode 100644 index 0000000000..a392ccfe04 --- /dev/null +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts @@ -0,0 +1,32 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +import { CrisisService } from './crisis.service'; + +import { CrisisCenterComponent } from './crisis-center.component'; +import { CrisisListComponent } from './crisis-list.component'; +import { CrisisDetailComponent } from './crisis-detail.component'; + +import { crisisCenterRouting } from './crisis-center.routing'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + crisisCenterRouting + ], + declarations: [ + CrisisCenterComponent, + CrisisListComponent, + CrisisDetailComponent + ], +// #docregion providers + providers: [ + CrisisService + ] +// #enddocregion providers +}) +export class CrisisCenterModule {} +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts new file mode 100644 index 0000000000..41b31d6aa5 --- /dev/null +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts @@ -0,0 +1,42 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +import { CrisisService } from './crisis.service'; +// #docregion crisis-detail-resolve +import { CrisisDetailResolve } from './crisis-detail-resolve.service'; +// #enddocregion crisis-detail-resolve + +import { CrisisCenterComponent } from './crisis-center.component'; +import { CrisisListComponent } from './crisis-list.component'; +import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisAdminComponent } from './crisis-admin.component'; + +import { crisisCenterRouting } from './crisis-center.routing'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + crisisCenterRouting + ], + declarations: [ + CrisisCenterComponent, + CrisisListComponent, + CrisisDetailComponent, + CrisisAdminComponent + ], + // #docregion crisis-detail-resolve + + providers: [ + CrisisService, + CrisisDetailResolve + ] + // #enddocregion crisis-detail-resolve +}) +// #docregion crisis-center-module-export +export class CrisisCenterModule {} +// #enddocregion crisis-center-module-export +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts similarity index 72% rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts index 7f28dabdcf..0d53587aa4 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts @@ -1,11 +1,12 @@ // #docregion -import { RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; + import { CrisisDetailComponent } from './crisis-detail.component'; import { CrisisListComponent } from './crisis-list.component'; import { CrisisCenterComponent } from './crisis-center.component'; // #docregion routes -export const crisisCenterRoutes: RouterConfig = [ +const crisisCenterRoutes: Routes = [ { path: 'crisis-center', component: CrisisCenterComponent, @@ -15,4 +16,6 @@ export const crisisCenterRoutes: RouterConfig = [ ] } ]; + +export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes); // #enddocregion routes diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts similarity index 77% rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts index 3e8d2f391e..a95ab751f3 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts @@ -1,11 +1,12 @@ // #docregion -import { RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; + import { CrisisDetailComponent } from './crisis-detail.component'; import { CrisisListComponent } from './crisis-list.component'; import { CrisisCenterComponent } from './crisis-center.component'; // #docregion routes -export const crisisCenterRoutes: RouterConfig = [ +const crisisCenterRoutes: Routes = [ // #docregion redirect { path: '', @@ -22,4 +23,6 @@ export const crisisCenterRoutes: RouterConfig = [ ] } ]; + +export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes); // #enddocregion routes diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts similarity index 86% rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts index b0d0fc9fca..8d92662132 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts @@ -1,6 +1,7 @@ // #docplaster // #docregion -import { RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; + import { CrisisDetailComponent } from './crisis-detail.component'; import { CrisisListComponent } from './crisis-list.component'; import { CrisisCenterComponent } from './crisis-center.component'; @@ -8,7 +9,7 @@ import { CrisisAdminComponent } from './crisis-admin.component'; import { CanDeactivateGuard } from '../can-deactivate-guard.service'; -export const crisisCenterRoutes: RouterConfig = [ +const crisisCenterRoutes: Routes = [ { path: '', redirectTo: '/crisis-center', @@ -36,6 +37,8 @@ export const crisisCenterRoutes: RouterConfig = [ ] } ]; + +export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes); // #enddocregion /* diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts similarity index 87% rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts index a7e1612297..fa5d1e887c 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts @@ -1,6 +1,7 @@ // #docplaster // #docregion -import { RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; + import { CrisisDetailComponent } from './crisis-detail.component'; import { CrisisListComponent } from './crisis-list.component'; import { CrisisCenterComponent } from './crisis-center.component'; @@ -9,7 +10,7 @@ import { CrisisAdminComponent } from './crisis-admin.component'; import { CanDeactivateGuard } from '../can-deactivate-guard.service'; import { AuthGuard } from '../auth-guard.service'; -export const crisisCenterRoutes: RouterConfig = [ +const crisisCenterRoutes: Routes = [ { path: '', redirectTo: '/crisis-center', @@ -38,6 +39,8 @@ export const crisisCenterRoutes: RouterConfig = [ ] } ]; + +export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes); // #enddocregion /* diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts similarity index 63% rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts index 6712b35ced..cb7cda5d31 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts @@ -1,14 +1,20 @@ +// #docplaster // #docregion -import { RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; + +import { CrisisCenterComponent } from './crisis-center.component'; import { CrisisDetailComponent } from './crisis-detail.component'; import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; import { CrisisAdminComponent } from './crisis-admin.component'; import { CanDeactivateGuard } from '../can-deactivate-guard.service'; import { AuthGuard } from '../auth-guard.service'; +// #docregion crisis-detail-resolve +import { CrisisDetailResolve } from './crisis-detail-resolve.service'; -export const crisisCenterRoutes: RouterConfig = [ +// #enddocregion crisis-detail-resolve + +const crisisCenterRoutes: Routes = [ { path: '', redirectTo: '/crisis-center', @@ -25,11 +31,16 @@ export const crisisCenterRoutes: RouterConfig = [ canActivate: [AuthGuard] }, // #enddocregion admin-route + // #docregion crisis-detail-resolve { path: ':id', component: CrisisDetailComponent, - canDeactivate: [CanDeactivateGuard] + canDeactivate: [CanDeactivateGuard], + resolve: { + crisis: CrisisDetailResolve + } }, + // #enddocregion crisis-detail-resolve { path: '', component: CrisisListComponent @@ -37,3 +48,5 @@ export const crisisCenterRoutes: RouterConfig = [ ] } ]; + +export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes); diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts new file mode 100644 index 0000000000..2d044f9de9 --- /dev/null +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts @@ -0,0 +1,50 @@ +// #docplaster +// #docregion +import { Routes, RouterModule } from '@angular/router'; + +import { CrisisCenterComponent } from './crisis-center.component'; +import { CrisisDetailComponent } from './crisis-detail.component'; +import { CrisisListComponent } from './crisis-list.component'; +import { CrisisAdminComponent } from './crisis-admin.component'; + +import { CanDeactivateGuard } from '../can-deactivate-guard.service'; +import { AuthGuard } from '../auth-guard.service'; +// #docregion crisis-detail-resolve +import { CrisisDetailResolve } from './crisis-detail-resolve.service'; + +// #enddocregion crisis-detail-resolve + +// #docregion lazy-load-crisis-center +const crisisCenterRoutes: Routes = [ + { + path: '', + component: CrisisCenterComponent, + children: [ + // #docregion admin-route + { + path: 'admin', + component: CrisisAdminComponent, + canActivate: [AuthGuard] + }, + // #enddocregion admin-route + // #docregion crisis-detail-resolve + { + path: ':id', + component: CrisisDetailComponent, + canDeactivate: [CanDeactivateGuard], + resolve: { + crisis: CrisisDetailResolve + } + // #enddocregion crisis-detail-resolve + }, + { + path: '', + component: CrisisListComponent + } + ] + } +]; + +export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes); +// #enddocregion lazy-load-crisis-center +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts new file mode 100644 index 0000000000..d0d6d1f192 --- /dev/null +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts @@ -0,0 +1,25 @@ +// #docregion +import { Injectable } from '@angular/core'; +import { Router, Resolve, + ActivatedRouteSnapshot } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; + +import { Crisis, CrisisService } from './crisis.service'; + +@Injectable() +export class CrisisDetailResolve implements Resolve { + constructor(private cs: CrisisService, private router: Router) {} + + resolve(route: ActivatedRouteSnapshot): Observable | Promise | any { + let id = +route.params['id']; + + return this.cs.getCrisis(id).then(crisis => { + if (crisis) { + return crisis; + } else { // id not found + this.router.navigate(['/crisis-center']); + return false; + } + }); + } +} diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts index fdb331dec7..9d37453cc1 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts @@ -2,13 +2,11 @@ // #docregion import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/observable/fromPromise'; import { Crisis, CrisisService } from './crisis.service'; import { DialogService } from '../dialog.service'; - - +import { Observable } from 'rxjs/Observable'; +import { Subscription } from 'rxjs/Subscription'; @Component({ // #docregion template @@ -36,7 +34,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy { crisis: Crisis; editName: string; // #enddocregion ngOnDestroy - private sub: any; + private sub: Subscription; // #enddocregion ngOnDestroy // #enddocregion cancel-save @@ -44,7 +42,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy { private service: CrisisService, private router: Router, private route: ActivatedRoute, - private dialogService: DialogService + public dialogService: DialogService ) { } // #docregion ngOnInit @@ -86,16 +84,14 @@ export class CrisisDetailComponent implements OnInit, OnDestroy { // #enddocregion cancel-save // #docregion cancel-save-only - canDeactivate(): Observable | boolean { + canDeactivate(): Observable | Promise | boolean { // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged if (!this.crisis || this.crisis.name === this.editName) { return true; } // Otherwise ask the user with the dialog service and return its // promise which resolves to true or false when the user decides - let p = this.dialogService.confirm('Discard changes?'); - let o = Observable.fromPromise(p); - return o; + return this.dialogService.confirm('Discard changes?'); } // #enddocregion cancel-save-only @@ -105,7 +101,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy { // Pass along the hero id if available // so that the CrisisListComponent can select that hero. // Add a totally useless `foo` parameter for kicks. - this.router.navigate(['/crisis-center', { id: crisisId, foo: 'foo' }], { relativeTo: this.route }); + this.router.navigate(['/crisis-center', { id: crisisId, foo: 'foo' }]); } // #enddocregion gotoCrises // #docregion cancel-save diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts index 95df7d567f..303f8c6d43 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts @@ -1,12 +1,11 @@ // #docplaster // #docregion -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { Router, ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/observable/fromPromise'; +import { Component, OnInit } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; -import { Crisis, CrisisService } from './crisis.service'; -import { DialogService } from '../dialog.service'; +import { Crisis } from './crisis.service'; +import { DialogService } from '../dialog.service'; +import { Observable } from 'rxjs/Observable'; @Component({ template: ` @@ -27,40 +26,24 @@ import { DialogService } from '../dialog.service'; styles: ['input {width: 20em}'] }) -export class CrisisDetailComponent implements OnInit, OnDestroy { +export class CrisisDetailComponent implements OnInit { crisis: Crisis; editName: string; - private sub: any; constructor( - private service: CrisisService, private route: ActivatedRoute, private router: Router, - private dialogService: DialogService + public dialogService: DialogService ) { } +// #docregion crisis-detail-resolve ngOnInit() { - this.sub = this.route - .params - .subscribe(params => { - let id = +params['id']; - this.service.getCrisis(id) - .then(crisis => { - if (crisis) { - this.editName = crisis.name; - this.crisis = crisis; - } else { // id not found - this.gotoCrises(); - } - }); - }); - } - - ngOnDestroy() { - if (this.sub) { - this.sub.unsubscribe(); - } + this.route.data.forEach((data: { crisis: Crisis }) => { + this.editName = data.crisis.name; + this.crisis = data.crisis; + }); } +// #enddocregion crisis-detail-resolve cancel() { this.gotoCrises(); @@ -71,16 +54,14 @@ export class CrisisDetailComponent implements OnInit, OnDestroy { this.gotoCrises(); } - canDeactivate(): Observable | boolean { + canDeactivate(): Observable | Promise | boolean { // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged if (!this.crisis || this.crisis.name === this.editName) { return true; } // Otherwise ask the user with the dialog service and return its // promise which resolves to true or false when the user decides - let p = this.dialogService.confirm('Discard changes?'); - let o = Observable.fromPromise(p); - return o; + return this.dialogService.confirm('Discard changes?'); } // #docregion gotoCrises @@ -91,7 +72,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy { // Add a totally useless `foo` parameter for kicks. // #docregion gotoCrises-navigate // Absolute link - this.router.navigate(['/crisis-center', {id: crisisId, foo: 'foo'}]); + this.router.navigate(['/crisis-center', { id: crisisId, foo: 'foo' }]); // #enddocregion gotoCrises-navigate } // #enddocregion gotoCrises diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts index c962ee0134..2d1df3df33 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts @@ -4,6 +4,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Crisis, CrisisService } from './crisis.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ // #docregion template @@ -20,7 +21,7 @@ import { Crisis, CrisisService } from './crisis.service'; export class CrisisListComponent implements OnInit, OnDestroy { crises: Crisis[]; selectedId: number; - private sub: any; + private sub: Subscription; constructor( private service: CrisisService, diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts index df51b14ade..7a6dcb2e9e 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts @@ -4,6 +4,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Crisis, CrisisService } from './crisis.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ template: ` @@ -14,12 +15,12 @@ import { Crisis, CrisisService } from './crisis.service'; {{crisis.id}} {{crisis.name}} - `, + ` }) export class CrisisListComponent implements OnInit, OnDestroy { crises: Crisis[]; private selectedId: number; - private sub: any; + private sub: Subscription; constructor( private service: CrisisService, diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts index e84e4ad3e1..338b9ce3c4 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts @@ -4,6 +4,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { Hero, HeroService } from './hero.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ template: ` @@ -20,12 +21,12 @@ import { Hero, HeroService } from './hero.service';

    - `, + ` }) export class HeroDetailComponent implements OnInit, OnDestroy { hero: Hero; // #docregion ngOnInit - private sub: any; + private sub: Subscription; // #enddocregion ngOnInit // #docregion ctor diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts index 628a6e2dd1..07b876c79f 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts @@ -20,7 +20,7 @@ import { Hero, HeroService } from './hero.service';

    - `, + ` }) export class HeroDetailComponent implements OnInit { hero: Hero; diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts index 7d5fb1cf96..20b851ae6e 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts @@ -3,7 +3,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; -import { Hero, HeroService } from './hero.service'; +import { Hero, HeroService } from './hero.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ template: ` @@ -20,13 +21,13 @@ import { Hero, HeroService } from './hero.service';

    - `, + ` }) export class HeroDetailComponent implements OnInit, OnDestroy { hero: Hero; // #docregion ngOnInit - private sub: any; + private sub: Subscription; // #enddocregion ngOnInit // #docregion ctor diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts index 72dd3e0b25..831f24adc4 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts @@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; // #enddocregion import-router -import { Hero, HeroService } from './hero.service'; +import { Hero, HeroService } from './hero.service'; +import { Subscription } from 'rxjs/Subscription'; @Component({ // #docregion template @@ -27,7 +28,7 @@ export class HeroListComponent implements OnInit, OnDestroy { // #docregion ctor private selectedId: number; - private sub: any; + private sub: Subscription; constructor( private service: HeroService, diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts b/public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts new file mode 100644 index 0000000000..973102f83b --- /dev/null +++ b/public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts @@ -0,0 +1,25 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { HeroListComponent } from './hero-list.component'; +import { HeroDetailComponent } from './hero-detail.component'; + +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule + ], + declarations: [ + HeroListComponent, + HeroDetailComponent + ], + providers: [ + HeroService + ] +}) +export class HeroesModule {} +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes.module.ts new file mode 100644 index 0000000000..1816ef1e56 --- /dev/null +++ b/public/docs/_examples/router/ts/app/heroes/heroes.module.ts @@ -0,0 +1,30 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { HeroListComponent } from './hero-list.component'; +import { HeroDetailComponent } from './hero-detail.component'; + +import { HeroService } from './hero.service'; + +// #docregion heroes-routes +import { heroesRouting } from './heroes.routing'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + heroesRouting + ], + declarations: [ + HeroListComponent, + HeroDetailComponent + ], + providers: [ + HeroService + ] +}) +// #enddocregion heroes-routes +export class HeroesModule {} +// #enddocregion diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts b/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts similarity index 68% rename from public/docs/_examples/router/ts/app/heroes/heroes.routes.ts rename to public/docs/_examples/router/ts/app/heroes/heroes.routing.ts index f6c2b19c75..89270ec492 100644 --- a/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts +++ b/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts @@ -1,12 +1,15 @@ // #docregion -import { RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; + import { HeroListComponent } from './hero-list.component'; import { HeroDetailComponent } from './hero-detail.component'; -export const heroesRoutes: RouterConfig = [ +const heroesRoutes: Routes = [ { path: 'heroes', component: HeroListComponent }, // #docregion hero-detail-route { path: 'hero/:id', component: HeroDetailComponent } // #enddocregion hero-detail-route ]; + +export const heroesRouting = RouterModule.forChild(heroesRoutes); // #enddocregion diff --git a/public/docs/_examples/router/ts/app/login.component.1.ts b/public/docs/_examples/router/ts/app/login.component.1.ts new file mode 100644 index 0000000000..ddee339011 --- /dev/null +++ b/public/docs/_examples/router/ts/app/login.component.1.ts @@ -0,0 +1,46 @@ +// #docregion +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { AuthService } from './auth.service'; + +@Component({ + template: ` +

    LOGIN

    +

    {{message}}

    +

    + + +

    ` +}) +export class LoginComponent { + message: string; + + constructor(public authService: AuthService, public router: Router) { + this.setMessage(); + } + + setMessage() { + this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out'); + } + + login() { + this.message = 'Trying to log in ...'; + + this.authService.login().subscribe(() => { + this.setMessage(); + if (this.authService.isLoggedIn) { + // Get the redirect URL from our auth service + // If no redirect has been set, use the default + let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin'; + + // Redirect the user + this.router.navigate([redirect]); + } + }); + } + + logout() { + this.authService.logout(); + this.setMessage(); + } +} diff --git a/public/docs/_examples/router/ts/app/login.component.ts b/public/docs/_examples/router/ts/app/login.component.ts index ddee339011..6dd5605fb1 100755 --- a/public/docs/_examples/router/ts/app/login.component.ts +++ b/public/docs/_examples/router/ts/app/login.component.ts @@ -1,7 +1,8 @@ // #docregion -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; -import { AuthService } from './auth.service'; +import { Component } from '@angular/core'; +import { Router, + NavigationExtras } from '@angular/router'; +import { AuthService } from './auth.service'; @Component({ template: ` @@ -33,8 +34,17 @@ export class LoginComponent { // If no redirect has been set, use the default let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin'; + // #docregion preserve + // Set our navigation extras object + // that passes on our global query params and fragment + let navigationExtras: NavigationExtras = { + preserveQueryParams: true, + preserveFragment: true + }; + // Redirect the user - this.router.navigate([redirect]); + this.router.navigate([redirect], navigationExtras); + // #enddocregion preserve } }); } diff --git a/public/docs/_examples/router/ts/app/login.routes.ts b/public/docs/_examples/router/ts/app/login.routes.ts deleted file mode 100644 index 8bfc1ff10d..0000000000 --- a/public/docs/_examples/router/ts/app/login.routes.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { RouterConfig } from '@angular/router'; -import { AuthGuard } from './auth-guard.service'; -import { AuthService } from './auth.service'; -import { LoginComponent } from './login.component'; - -export const loginRoutes: RouterConfig = [ - { path: 'login', component: LoginComponent } -]; - -export const authProviders = [AuthGuard, AuthService]; diff --git a/public/docs/_examples/router/ts/app/login.routing.ts b/public/docs/_examples/router/ts/app/login.routing.ts new file mode 100644 index 0000000000..9e3eaf2350 --- /dev/null +++ b/public/docs/_examples/router/ts/app/login.routing.ts @@ -0,0 +1,14 @@ +// #docregion +import { Routes } from '@angular/router'; +import { AuthGuard } from './auth-guard.service'; +import { AuthService } from './auth.service'; +import { LoginComponent } from './login.component'; + +export const loginRoutes: Routes = [ + { path: 'login', component: LoginComponent } +]; + +export const authProviders = [ + AuthGuard, + AuthService +]; diff --git a/public/docs/_examples/router/ts/app/main.1.ts b/public/docs/_examples/router/ts/app/main.1.ts deleted file mode 100644 index deff5b9ac5..0000000000 --- a/public/docs/_examples/router/ts/app/main.1.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* First version */ -// #docplaster -// #docregion all -// main entry point -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; -import { appRouterProviders } from './app.routes'; - -// #enddocregion - -/* Can't use AppComponent ... but display as if we can -// #docregion all - -bootstrap(AppComponent, [ -// #enddocregion all -*/ -// Actually use the v.1 component -import { AppComponent as ac } from './app.component.ts'; // './app.component.1'; - -bootstrap(ac, [ -// #docregion all - appRouterProviders -]) -.catch(err => console.error(err)); -// #enddocregion all diff --git a/public/docs/_examples/router/ts/app/main.2.ts b/public/docs/_examples/router/ts/app/main.2.ts deleted file mode 100644 index 10e4e4b18a..0000000000 --- a/public/docs/_examples/router/ts/app/main.2.ts +++ /dev/null @@ -1,33 +0,0 @@ -/* Second version */ -// For Milestone #2 -// Also includes digression on HashPathStrategy (not used in the final app) -// #docplaster -// #docregion -// main entry point -import { bootstrap } from '@angular/platform-browser-dynamic'; - -// Add these symbols to override the `LocationStrategy` -import { LocationStrategy, - HashLocationStrategy } from '@angular/common'; - -import { AppComponent } from './app.component'; -import { appRouterProviders } from './app.routes'; - -// #enddocregion - -/* Can't use AppComponent ... but display as if we can -// #docregion -bootstrap(AppComponent, [ -// #enddocregion -*/ -// Actually use the v.2 component -import { AppComponent as ac } from './app.component.ts'; // './app.component.2'; - -bootstrap(ac, [ -// #docregion - appRouterProviders, - { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/ - -]) -.catch(err => console.error(err)); -// #enddocregion diff --git a/public/docs/_examples/router/ts/app/main.3.ts b/public/docs/_examples/router/ts/app/main.3.ts deleted file mode 100644 index e1be742421..0000000000 --- a/public/docs/_examples/router/ts/app/main.3.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* third version */ -// #docregion -// main entry point -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component.3'; -import { appRouterProviders } from './app.routes'; - -bootstrap(AppComponent, [ - appRouterProviders -]) -.catch(err => console.error(err)); diff --git a/public/docs/_examples/router/ts/app/main.ts b/public/docs/_examples/router/ts/app/main.ts index 6142cad5ee..ba9421d573 100644 --- a/public/docs/_examples/router/ts/app/main.ts +++ b/public/docs/_examples/router/ts/app/main.ts @@ -1,10 +1,6 @@ // #docregion -// main entry point -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; -import { appRouterProviders } from './app.routes'; +import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; -bootstrap(AppComponent, [ - appRouterProviders -]) -.catch(err => console.error(err)); +import { AppModule } from './app.module'; + +browserDynamicPlatform().bootstrapModule(AppModule); diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html deleted file mode 100644 index 2330a69e75..0000000000 --- a/public/docs/_examples/router/ts/index.2.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Router Sample v.2 - - - - - - - - - - - - - - - - -

    Milestone 2

    - loading... - - - -

    Milestone 2

    - loading... - - - - diff --git a/public/docs/_examples/router/ts/plnkr.json b/public/docs/_examples/router/ts/plnkr.json index 73d83adaf6..97c725fd7d 100644 --- a/public/docs/_examples/router/ts/plnkr.json +++ b/public/docs/_examples/router/ts/plnkr.json @@ -6,7 +6,8 @@ "!**/*.[1,2,3,4,5].*", "!app/crisis-list.component.ts", "!app/hero-list.component.ts", - "!app/crisis-center/add-crisis.component.ts" + "!app/crisis-center/add-crisis.component.ts", + "!app/not-found.component.ts" ], "tags": ["router"] } diff --git a/public/docs/_examples/security/ts/app/app.component.ts b/public/docs/_examples/security/ts/app/app.component.ts index a2fc7e7320..c30235e8e7 100644 --- a/public/docs/_examples/security/ts/app/app.component.ts +++ b/public/docs/_examples/security/ts/app/app.component.ts @@ -1,20 +1,13 @@ // #docregion import { Component } from '@angular/core'; -import { BypassSecurityComponent } from './bypass-security.component'; -import { InnerHtmlBindingComponent } from './inner-html-binding.component'; - @Component({ selector: 'my-app', template: `

    Security

    - `, - directives: [ - BypassSecurityComponent, - InnerHtmlBindingComponent, - ] + ` }) export class AppComponent { } diff --git a/public/docs/_examples/security/ts/app/app.module.ts b/public/docs/_examples/security/ts/app/app.module.ts new file mode 100644 index 0000000000..21d880be3b --- /dev/null +++ b/public/docs/_examples/security/ts/app/app.module.ts @@ -0,0 +1,18 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { BypassSecurityComponent } from './bypass-security.component'; +import { InnerHtmlBindingComponent } from './inner-html-binding.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + BypassSecurityComponent, + InnerHtmlBindingComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/security/ts/app/main.ts b/public/docs/_examples/security/ts/app/main.ts index 3e1476beac..fc0ac5294a 100644 --- a/public/docs/_examples/security/ts/app/main.ts +++ b/public/docs/_examples/security/ts/app/main.ts @@ -1,8 +1,6 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -// #docregion import -import { AppComponent } from './app.component'; -// #enddocregion import +platformBrowserDynamic().bootstrapModule(AppModule); -bootstrap(AppComponent); diff --git a/public/docs/_examples/server-communication/ts/app/app.component.ts b/public/docs/_examples/server-communication/ts/app/app.component.ts index 144475d0e4..3a532b6524 100644 --- a/public/docs/_examples/server-communication/ts/app/app.component.ts +++ b/public/docs/_examples/server-communication/ts/app/app.component.ts @@ -7,12 +7,6 @@ import { Component } from '@angular/core'; import './rxjs-operators'; // #enddocregion import-rxjs -import { HeroListComponent } from './toh/hero-list.component'; -import { HeroListPromiseComponent } from './toh/hero-list.component.promise'; - -import { WikiComponent } from './wiki/wiki.component'; -import { WikiSmartComponent } from './wiki/wiki-smart.component'; - @Component({ selector: 'my-app', template: ` @@ -20,18 +14,7 @@ import { WikiSmartComponent } from './wiki/wiki-smart.component'; - `, -// #enddocregion -/* -// #docregion http-providers - providers: [ HTTP_PROVIDERS ] -// #enddocregion http-providers -*/ -// #docregion - directives: [ - HeroListComponent, HeroListPromiseComponent, - WikiComponent, WikiSmartComponent - ] + ` }) export class AppComponent { } // #enddocregion diff --git a/public/docs/_examples/server-communication/ts/app/app.module.1.ts b/public/docs/_examples/server-communication/ts/app/app.module.1.ts new file mode 100644 index 0000000000..51e52573cb --- /dev/null +++ b/public/docs/_examples/server-communication/ts/app/app.module.1.ts @@ -0,0 +1,22 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpModule, JsonpModule } from '@angular/http'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + HttpModule, + JsonpModule + ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } + + + diff --git a/public/docs/_examples/server-communication/ts/app/app.module.ts b/public/docs/_examples/server-communication/ts/app/app.module.ts new file mode 100644 index 0000000000..528110661b --- /dev/null +++ b/public/docs/_examples/server-communication/ts/app/app.module.ts @@ -0,0 +1,41 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpModule, JsonpModule, XHRBackend } from '@angular/http'; + +import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; +import { HeroData } from './hero-data'; +import { AppComponent } from './app.component'; + +import { HeroListComponent } from './toh/hero-list.component'; +import { HeroListPromiseComponent } from './toh/hero-list.component.promise'; + +import { WikiComponent } from './wiki/wiki.component'; +import { WikiSmartComponent } from './wiki/wiki-smart.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + HttpModule, + JsonpModule + ], + providers: [ + { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server + { provide: SEED_DATA, useClass: HeroData } // in-mem server data + ], + declarations: [ + AppComponent, + HeroListComponent, + HeroListPromiseComponent, + WikiComponent, + WikiSmartComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } + + + + diff --git a/public/docs/_examples/server-communication/ts/app/main.ts b/public/docs/_examples/server-communication/ts/app/main.ts index 194ab5c5fb..4acf5de663 100644 --- a/public/docs/_examples/server-communication/ts/app/main.ts +++ b/public/docs/_examples/server-communication/ts/app/main.ts @@ -1,29 +1,5 @@ -// #docplaster -// #docregion final -// Imports for loading & configuring the in-memory web api -import { XHRBackend } from '@angular/http'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { InMemoryBackendService, - SEED_DATA } from 'angular2-in-memory-web-api'; -import { HeroData } from './hero-data'; - -// The usual bootstrapping imports -// #docregion v1 -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { HTTP_PROVIDERS } from '@angular/http'; - -import { AppComponent } from './app.component'; - -// #enddocregion v1, final -/* -// #docregion v1 -bootstrap(AppComponent, [ HTTP_PROVIDERS ]); -// #enddocregion v1 - */ -// #docregion final -bootstrap(AppComponent, [ - HTTP_PROVIDERS, - { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server - { provide: SEED_DATA, useClass: HeroData } // in-mem server data -]); -// #enddocregion final +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts index 608ee996b0..e6bbce139b 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts @@ -1,6 +1,5 @@ // #docregion import { Component } from '@angular/core'; -import { JSONP_PROVIDERS } from '@angular/http'; import { Observable } from 'rxjs/Observable'; // #docregion import-subject import { Subject } from 'rxjs/Subject'; @@ -20,7 +19,7 @@ import { WikipediaService } from './wikipedia.service';
  • {{item}}
    • `, - providers: [JSONP_PROVIDERS, WikipediaService] + providers: [WikipediaService] }) export class WikiSmartComponent { diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts index 6253e0933b..92c31afb80 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts @@ -1,6 +1,5 @@ // #docregion import { Component } from '@angular/core'; -import { JSONP_PROVIDERS } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { WikipediaService } from './wikipedia.service'; @@ -17,7 +16,7 @@ import { WikipediaService } from './wikipedia.service';
  • {{item}}
    • `, - providers: [JSONP_PROVIDERS, WikipediaService] + providers: [WikipediaService] }) export class WikiComponent { items: Observable; diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts index 8bc5747e43..96eca70af1 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts @@ -12,7 +12,7 @@ export class WikipediaService { // #docregion search-parameters let params = new URLSearchParams(); -params.set('search', term); // the user's search value + params.set('search', term); // the user's search value params.set('action', 'opensearch'); params.set('format', 'json'); params.set('callback', 'JSONP_CALLBACK'); diff --git a/public/docs/_examples/structural-directives/ts/app/app.module.ts b/public/docs/_examples/structural-directives/ts/app/app.module.ts new file mode 100644 index 0000000000..0712db6d4b --- /dev/null +++ b/public/docs/_examples/structural-directives/ts/app/app.module.ts @@ -0,0 +1,18 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { StructuralDirectivesComponent } from './structural-directives.component'; +import { UnlessDirective } from './unless.directive'; +import { HeavyLoaderComponent } from './heavy-loader.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + StructuralDirectivesComponent, + UnlessDirective, + HeavyLoaderComponent + ], + bootstrap: [ StructuralDirectivesComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/structural-directives/ts/app/main.ts b/public/docs/_examples/structural-directives/ts/app/main.ts index 5f5b5aeb19..fc0ac5294a 100644 --- a/public/docs/_examples/structural-directives/ts/app/main.ts +++ b/public/docs/_examples/structural-directives/ts/app/main.ts @@ -1,5 +1,6 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { StructuralDirectivesComponent } from './structural-directives.component'; +platformBrowserDynamic().bootstrapModule(AppModule); -bootstrap(StructuralDirectivesComponent); diff --git a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts index 1e5a9ef939..8e36da3462 100644 --- a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts +++ b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts @@ -1,14 +1,11 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { UnlessDirective } from './unless.directive'; -import { HeavyLoaderComponent } from './heavy-loader.component'; @Component({ selector: 'structural-directives', templateUrl: 'app/structural-directives.component.html', - styles: ['button { min-width: 100px; }'], - directives: [UnlessDirective, HeavyLoaderComponent] + styles: ['button { min-width: 100px; }'] }) export class StructuralDirectivesComponent { heroes = ['Mr. Nice', 'Narco', 'Bombasto']; diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts index 67ae0213be..a9f29647a0 100644 --- a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts @@ -1,7 +1,7 @@ // #docregion import { Component } from '@angular/core'; -import { HeroesComponent, HeroService } from './heroes'; +import { HeroService } from './heroes'; @Component({ moduleId: module.id, @@ -10,7 +10,6 @@ import { HeroesComponent, HeroService } from './heroes'; `, styleUrls: ['app.component.css'], - directives: [HeroesComponent], - providers: [HeroService] + providers: [ HeroService ] }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.module.ts new file mode 100644 index 0000000000..53f29ea8cb --- /dev/null +++ b/public/docs/_examples/style-guide/ts/01-01/app/app.module.ts @@ -0,0 +1,27 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroesComponent } from './heroes/heroes.component'; + +@NgModule({ + imports: [ + BrowserModule, + // #enddocregion + RouterModule.forChild([{ path: '01-01', component: AppComponent }]) + // #docregion + ], + declarations: [ + AppComponent, + HeroesComponent + ], + exports: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } +// #enddocregion + + diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts index e19934c4d2..853e6ab64e 100644 --- a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts @@ -1,8 +1,9 @@ // #docregion /* avoid */ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { Component, OnInit } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule, Component, OnInit } from '@angular/core'; class Hero { id: number; @@ -27,7 +28,15 @@ class AppComponent implements OnInit { } } -bootstrap(AppComponent, []); +@NgModule({ + imports: [ BrowserModule ], + declarations: [ AppComponent ], + exports: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } + +platformBrowserDynamic().bootstrapModule(AppModule); const HEROES: Hero[] = [ {id: 1, name: 'Bombasto'}, diff --git a/public/docs/_examples/style-guide/ts/01-01/main.ts b/public/docs/_examples/style-guide/ts/01-01/main.ts index 6b97e81a59..7e8269bd65 100644 --- a/public/docs/_examples/style-guide/ts/01-01/main.ts +++ b/public/docs/_examples/style-guide/ts/01-01/main.ts @@ -1,6 +1,6 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app/app.component'; +import { AppModule } from './app/app.module'; -bootstrap(AppComponent, []); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts index 9e4bb0b8c5..c82e12624d 100644 --- a/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts @@ -1,14 +1,10 @@ import { Component } from '@angular/core'; -import { HeroComponent } from './heroes'; -import { UsersComponent } from './users'; - @Component({ selector: 'sg-app', template: ` - `, - directives: [HeroComponent, UsersComponent] + ` }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/02-07/app/app.module.ts b/public/docs/_examples/style-guide/ts/02-07/app/app.module.ts new file mode 100644 index 0000000000..4320fe67d5 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroComponent } from './heroes'; +import { UsersComponent } from './users'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '02-07', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroComponent, + UsersComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts index 29b3ed7062..bf27aeaf8a 100644 --- a/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { ValidateDirective } from './shared'; - @Component({ selector: 'sg-app', - template: '', - directives: [ValidateDirective] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/02-08/app/app.module.ts b/public/docs/_examples/style-guide/ts/02-08/app/app.module.ts new file mode 100644 index 0000000000..a86c713d4f --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-08/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { ValidateDirective } from './shared'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '02-08', component: AppComponent }]) + ], + declarations: [ + AppComponent, + ValidateDirective + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/03-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-01/app/app.module.ts new file mode 100644 index 0000000000..48079f21c7 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-01/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '03-01', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/03-02/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-02/app/app.module.ts new file mode 100644 index 0000000000..2db4012ebf --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-02/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '03-02', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/03-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-03/app/app.module.ts new file mode 100644 index 0000000000..29b3d2e765 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-03/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '03-03', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/03-04/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-04/app/app.module.ts new file mode 100644 index 0000000000..a5a8d5bb4e --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-04/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '03-04', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts new file mode 100644 index 0000000000..b70c8416c7 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +export const route = { path: '03-05', component: AppComponent }; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '03-05', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-06/app/app.module.ts new file mode 100644 index 0000000000..f259ce23a2 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-06/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '03-06', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts deleted file mode 100644 index dbf3079697..0000000000 --- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './heroes.component'; diff --git a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts index b7554b8d06..aef486d9a2 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts @@ -1,13 +1,9 @@ // #docregion import { Component } from '@angular/core'; -// #docregion example -import { HeroesComponent } from './+heroes'; -// #enddocregion example - @Component({ selector: 'sg-app', - template: '', - directives: [HeroesComponent] + template: '' }) -export class AppComponent { } +export class AppComponent { + } diff --git a/public/docs/_examples/style-guide/ts/04-10/app/app.module.ts b/public/docs/_examples/style-guide/ts/04-10/app/app.module.ts new file mode 100644 index 0000000000..dec8d2c6f2 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/04-10/app/app.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroesComponent } from './heroes/heroes.component'; +import { SharedModule } from './shared/shared.module'; + +@NgModule({ + imports: [ + BrowserModule, + SharedModule, + RouterModule.forChild([{ path: '04-10', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroesComponent + ], + exports: [ AppComponent ], + entryComponents: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.avoid.ts similarity index 94% rename from public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts rename to public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.avoid.ts index b61e3ab782..2d10e7b3c3 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.avoid.ts @@ -1,3 +1,4 @@ +/* tslint:disable:no-unused-variable */ // #docregion // #docregion example /* avoid */ diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.html similarity index 100% rename from public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html rename to public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.html diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts similarity index 86% rename from public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts rename to public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts index 9ca611ee5c..1443a5b445 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts @@ -7,8 +7,6 @@ import { CONFIG, EntityService, ExceptionService, - FilterTextComponent, - InitCapsPipe, SpinnerService, ToastService } from '../shared'; @@ -17,8 +15,6 @@ import { // #enddocregion example moduleId: module.id, providers: [EntityService, ExceptionService, SpinnerService, ToastService], - directives: [FilterTextComponent], - pipes: [InitCapsPipe], // #docregion example selector: 'toh-heroes', templateUrl: 'heroes.component.html' diff --git a/public/docs/_examples/style-guide/ts/04-10/app/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/index.ts deleted file mode 100644 index aa9e5b0b7c..0000000000 --- a/public/docs/_examples/style-guide/ts/04-10/app/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './+heroes'; -export * from './shared'; -export * from './app.component'; diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/shared.module.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/shared.module.ts new file mode 100644 index 0000000000..6500b28330 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/shared.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { FilterTextComponent, + InitCapsPipe, + ModalComponent, + NavComponent, + SpinnerComponent } from './'; + +const declarations = [ + FilterTextComponent, InitCapsPipe, ModalComponent, + NavComponent, SpinnerComponent, +]; + +@NgModule({ + imports: [ BrowserModule ], + declarations: declarations, + exports: declarations +}) +export class SharedModule { } diff --git a/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts index ebf8146349..0e43893f7f 100644 --- a/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { HeroesComponent } from './+heroes'; - @Component({ selector: 'sg-app', - template: '', - directives: [HeroesComponent] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts b/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts new file mode 100644 index 0000000000..be01c06624 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroesComponent } from './+heroes'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '04-14', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroesComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts index 76bf4eafd5..03062c57fd 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -import { HeroButtonComponent } from './heroes'; - @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html', - directives: [HeroButtonComponent] + templateUrl: 'app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-02/app/app.module.ts new file mode 100644 index 0000000000..1c458e2ca1 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroButtonComponent } from './heroes'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '05-02', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroButtonComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts index 76bf4eafd5..03062c57fd 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -import { HeroButtonComponent } from './heroes'; - @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html', - directives: [HeroButtonComponent] + templateUrl: 'app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-03/app/app.module.ts new file mode 100644 index 0000000000..1b754e3ee5 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroButtonComponent } from './heroes'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '05-03', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroButtonComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts index c8e62772b4..0e43893f7f 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { HeroesComponent } from './heroes'; - @Component({ selector: 'sg-app', - template: '', - directives: [HeroesComponent] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts new file mode 100644 index 0000000000..9cae85085a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroesComponent } from './heroes'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '05-04', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroesComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts index c6bf721e40..dac40205c9 100644 --- a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { HeroButtonComponent } from './heroes'; - @Component({ selector: 'sg-app', - template: '', - directives: [HeroButtonComponent] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-12/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-12/app/app.module.ts new file mode 100644 index 0000000000..5177b2cc64 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-12/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroButtonComponent } from './heroes'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '05-12', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroButtonComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts index 76bf4eafd5..03062c57fd 100644 --- a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -import { HeroButtonComponent } from './heroes'; - @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html', - directives: [HeroButtonComponent] + templateUrl: 'app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts new file mode 100644 index 0000000000..102ed0f617 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroButtonComponent } from './heroes'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '05-13', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroButtonComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts index 05e38bf35c..8ed6da4c82 100644 --- a/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { ToastComponent } from './shared'; - @Component({ selector: 'sg-app', - template: ``, - directives: [ToastComponent] + template: `` }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-14/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-14/app/app.module.ts new file mode 100644 index 0000000000..0b294573d2 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-14/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { ToastComponent } from './shared'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '05-14', component: AppComponent }]) + ], + declarations: [ + AppComponent, + ToastComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts index 7fd78842b8..91b569b1e7 100644 --- a/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts @@ -1,11 +1,10 @@ import { Component } from '@angular/core'; -import { HeroListComponent, HeroService } from './heroes'; +import { HeroService } from './heroes'; @Component({ selector: 'sg-app', template: '', - directives: [HeroListComponent], providers: [HeroService] }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-15/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-15/app/app.module.ts new file mode 100644 index 0000000000..9bd4b8c9a2 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroListComponent } from './heroes'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '05-15', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroListComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts index 39fab1a724..03062c57fd 100644 --- a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -import { HeroComponent } from './heroes'; - @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html', - directives: [HeroComponent] + templateUrl: 'app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-16/app/app.module.ts new file mode 100644 index 0000000000..c3fb36f8ac --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroComponent } from './heroes'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '05-16', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts index 8e2e7e727c..86728b8b80 100644 --- a/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { HeroListComponent } from './heroes'; - @Component({ selector: 'sg-app', - template: '', - directives: [HeroListComponent] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-17/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-17/app/app.module.ts new file mode 100644 index 0000000000..e850d80ae3 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/app.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroComponent, HeroListComponent } from './heroes'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '05-17', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroComponent, + HeroListComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts index 8570544a36..b8ebd4cc46 100644 --- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts @@ -10,8 +10,8 @@ import { Hero } from '../shared/hero.model.ts'; template: `
    Our list of heroes: - - + + Total powers: {{totalPowers}}
    Average power: {{avgPower}}
    diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/hero.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/hero.component.ts new file mode 100644 index 0000000000..334f836a7d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/hero.component.ts @@ -0,0 +1,13 @@ +import { Component, Input } from '@angular/core'; + +import { Hero } from '../shared/hero.model'; + +@Component({ + selector: 'toh-hero', + template: `...` +}) +export class HeroComponent { + @Input() hero: Hero; +} + + diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/index.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/index.ts new file mode 100644 index 0000000000..084f36d703 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/index.ts @@ -0,0 +1 @@ +export * from './hero.component'; diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts index f1112f1c7c..dcf3e79bd3 100644 --- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts @@ -1,2 +1,3 @@ +export * from './hero'; export * from './hero-list'; export * from './shared'; diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts index 97a52c0c0c..03062c57fd 100644 --- a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -import { HighlightDirective } from './shared'; - @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html', - directives: [HighlightDirective] + templateUrl: 'app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/06-01/app/app.module.ts new file mode 100644 index 0000000000..318cd306d7 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/06-01/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HighlightDirective } from './shared'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '06-01', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HighlightDirective + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts index c40b5c0406..5f4ea8dce5 100644 --- a/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { ValidatorDirective } from './shared'; - @Component({ selector: 'sg-app', - template: '', - directives: [ValidatorDirective] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/06-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/06-03/app/app.module.ts new file mode 100644 index 0000000000..8677138eef --- /dev/null +++ b/public/docs/_examples/style-guide/ts/06-03/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { ValidatorDirective } from './shared'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '06-03', component: AppComponent }]) + ], + declarations: [ + AppComponent, + ValidatorDirective + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/07-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/07-01/app/app.module.ts new file mode 100644 index 0000000000..0077500dea --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-01/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '07-01', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts index 276321e2f1..f4d25e1ab6 100644 --- a/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts @@ -1,14 +1,13 @@ // #docregion import { Component } from '@angular/core'; -import { HeroListComponent, HeroService } from './heroes'; +import { HeroService } from './heroes'; @Component({ selector: 'toh-app', template: ` `, - directives: [HeroListComponent], providers: [HeroService] }) export class AppComponent {} diff --git a/public/docs/_examples/style-guide/ts/07-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/07-03/app/app.module.ts new file mode 100644 index 0000000000..8ba06d22be --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-03/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroListComponent } from './heroes'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '07-03', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroListComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/07-04/app/app.module.ts b/public/docs/_examples/style-guide/ts/07-04/app/app.module.ts new file mode 100644 index 0000000000..71c515c9c9 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + RouterModule.forChild([{ path: '07-04', component: AppComponent }]) + ], + declarations: [ + AppComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts index 50ddf5fe1e..ebc904f722 100644 --- a/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { HeroButtonComponent } from './heroes'; - @Component({ selector: 'sg-app', - template: '', - directives: [HeroButtonComponent] + template: '' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/09-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/09-01/app/app.module.ts new file mode 100644 index 0000000000..5872e801d6 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/09-01/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { AppComponent } from './app.component'; +import { HeroButtonComponent } from './heroes'; + +@NgModule({ + imports: [ + RouterModule.forChild([{ path: '09-01', component: AppComponent }]) + ], + declarations: [ + AppComponent, + HeroButtonComponent + ], + exports: [ AppComponent ] +}) +export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/app/app.component.ts b/public/docs/_examples/style-guide/ts/app/app.component.ts index d90494c212..0a3c992498 100644 --- a/public/docs/_examples/style-guide/ts/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/app/app.component.ts @@ -1,9 +1,7 @@ import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: [ROUTER_DIRECTIVES] + templateUrl: 'app/app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/app/app.routes.ts b/public/docs/_examples/style-guide/ts/app/app.routes.ts index 644e86bffd..3d5d6b3c15 100644 --- a/public/docs/_examples/style-guide/ts/app/app.routes.ts +++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts @@ -1,62 +1,59 @@ -import { provideRouter, RouterConfig } from '@angular/router'; +import { RouterConfig } from '@angular/router'; import { AppComponent as S0101 } from '../01-01/app'; -import { AppComponent as S0207 } from '../02-07/app'; -import { AppComponent as S0208 } from '../02-08/app'; -import { AppComponent as S0301 } from '../03-01/app'; -import { AppComponent as S0302 } from '../03-02/app'; -import { AppComponent as S0303 } from '../03-03/app'; -import { AppComponent as S0304 } from '../03-04/app'; -import { AppComponent as S0305 } from '../03-05/app'; -import { AppComponent as S0306 } from '../03-06/app'; -import { AppComponent as S0410 } from '../04-10/app'; -import { AppComponent as S0414 } from '../04-14/app'; -import { AppComponent as S0502 } from '../05-02/app'; -import { AppComponent as S0503 } from '../05-03/app'; -import { AppComponent as S0504 } from '../05-04/app'; -import { AppComponent as S0512 } from '../05-12/app'; -import { AppComponent as S0513 } from '../05-13/app'; -import { AppComponent as S0514 } from '../05-14/app'; -import { AppComponent as S0515 } from '../05-15/app'; -import { AppComponent as S0516 } from '../05-16/app'; -import { AppComponent as S0517 } from '../05-17/app'; -import { AppComponent as S0601 } from '../06-01/app'; -import { AppComponent as S0603 } from '../06-03/app'; -import { AppComponent as S0701 } from '../07-01/app'; -import { AppComponent as S0703 } from '../07-03/app'; -import { AppComponent as S0704 } from '../07-04/app'; -import { AppComponent as S0901 } from '../09-01/app'; +// import { AppComponent as S0207 } from '../02-07/app'; +// import { AppComponent as S0208 } from '../02-08/app'; +// import { AppComponent as S0301 } from '../03-01/app'; +// import { AppComponent as S0302 } from '../03-02/app'; +// import { AppComponent as S0303 } from '../03-03/app'; +// import { AppComponent as S0304 } from '../03-04/app'; +// import { AppComponent as S0305 } from '../03-05/app'; +// import { AppComponent as S0306 } from '../03-06/app'; +// import { AppComponent as S0410 } from '../04-10/app'; +// import { AppComponent as S0414 } from '../04-14/app'; +// import { AppComponent as S0502 } from '../05-02/app'; +// import { AppComponent as S0503 } from '../05-03/app'; +// import { AppComponent as S0504 } from '../05-04/app'; +// import { AppComponent as S0512 } from '../05-12/app'; +// import { AppComponent as S0513 } from '../05-13/app'; +// import { AppComponent as S0514 } from '../05-14/app'; +// import { AppComponent as S0515 } from '../05-15/app'; +// import { AppComponent as S0516 } from '../05-16/app'; +// import { AppComponent as S0517 } from '../05-17/app'; +// import { AppComponent as S0601 } from '../06-01/app'; +// import { AppComponent as S0603 } from '../06-03/app'; +// import { AppComponent as S0701 } from '../07-01/app'; +// import { AppComponent as S0703 } from '../07-03/app'; +// import { AppComponent as S0704 } from '../07-04/app'; +// import { AppComponent as S0901 } from '../09-01/app'; -const routes: RouterConfig = [ +export const routes: RouterConfig = [ { path: '', redirectTo: '/01-01', pathMatch: 'full' }, { path: '01-01', component: S0101 }, - { path: '02-07', component: S0207 }, - { path: '02-08', component: S0208 }, - { path: '03-01', component: S0301 }, - { path: '03-02', component: S0302 }, - { path: '03-03', component: S0303 }, - { path: '03-04', component: S0304 }, - { path: '03-05', component: S0305 }, - { path: '03-06', component: S0306 }, - { path: '04-10', component: S0410 }, - { path: '04-14', component: S0414 }, - { path: '05-02', component: S0502 }, - { path: '05-03', component: S0503 }, - { path: '05-04', component: S0504 }, - { path: '05-12', component: S0512 }, - { path: '05-13', component: S0513 }, - { path: '05-14', component: S0514 }, - { path: '05-15', component: S0515 }, - { path: '05-16', component: S0516 }, - { path: '05-17', component: S0517 }, - { path: '06-01', component: S0601 }, - { path: '06-03', component: S0603 }, - { path: '07-01', component: S0701 }, - { path: '07-03', component: S0703 }, - { path: '07-04', component: S0704 }, - { path: '09-01', component: S0901 }, + // { path: '02-07', component: S0207 }, + // { path: '02-08', component: S0208 }, + // { path: '03-01', component: S0301 }, + // { path: '03-02', component: S0302 }, + // { path: '03-03', component: S0303 }, + // { path: '03-04', component: S0304 }, + // { path: '03-05', component: S0305 }, + // { path: '03-06', component: S0306 }, + ///////////////////{ path: '04-10', component: S0410 }, + // { path: '04-14', component: S0414 }, + // { path: '05-02', component: S0502 }, + // { path: '05-03', component: S0503 }, + // { path: '05-04', component: S0504 }, + // { path: '05-12', component: S0512 }, + // { path: '05-13', component: S0513 }, + // { path: '05-14', component: S0514 }, + // { path: '05-15', component: S0515 }, + // { path: '05-16', component: S0516 }, + // { path: '05-17', component: S0517 }, + // { path: '06-01', component: S0601 }, + // { path: '06-03', component: S0603 }, + // { path: '07-01', component: S0701 }, + // { path: '07-03', component: S0703 }, + // { path: '07-04', component: S0704 }, + // { path: '09-01', component: S0901 }, ]; -export const appRouterProviders = [ - provideRouter(routes) -]; diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts index 759f9e261b..77e1c29934 100644 --- a/public/docs/_examples/style-guide/ts/app/main.ts +++ b/public/docs/_examples/style-guide/ts/app/main.ts @@ -1,17 +1,98 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { XHRBackend, HTTP_PROVIDERS } from '@angular/http'; -import { HashLocationStrategy, LocationStrategy } from '@angular/common'; -import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; +import { NgModule } from '@angular/core'; +import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; +import { BrowserModule } from '@angular/platform-browser'; + +import { HttpModule, + XHRBackend } from '@angular/http'; +import { RouterModule } from '@angular/router'; + +import { HashLocationStrategy, + LocationStrategy } from '@angular/common'; + +import { InMemoryBackendService, + SEED_DATA } from 'angular2-in-memory-web-api'; + import 'rxjs/add/operator/map'; -import { appRouterProviders } from './app.routes'; -import { HeroData } from './hero-data'; -import { AppComponent } from './app.component'; +import { HeroData } from './hero-data'; +import { AppComponent } from './app.component'; + +import * as s0101 from '../01-01/app/app.module'; +import * as s0207 from '../02-07/app/app.module'; +import * as s0208 from '../02-08/app/app.module'; +import * as s0301 from '../03-01/app/app.module'; +import * as s0302 from '../03-02/app/app.module'; +import * as s0303 from '../03-03/app/app.module'; +import * as s0304 from '../03-04/app/app.module'; +import * as s0305 from '../03-05/app/app.module'; +import * as s0306 from '../03-06/app/app.module'; +import * as s0410 from '../04-10/app/app.module'; +import * as s0414 from '../04-14/app/app.module'; +import * as s0502 from '../05-02/app/app.module'; +import * as s0503 from '../05-03/app/app.module'; +import * as s0504 from '../05-04/app/app.module'; +import * as s0512 from '../05-12/app/app.module'; +import * as s0513 from '../05-13/app/app.module'; +import * as s0514 from '../05-14/app/app.module'; +import * as s0515 from '../05-15/app/app.module'; +import * as s0516 from '../05-16/app/app.module'; +import * as s0517 from '../05-17/app/app.module'; +import * as s0601 from '../06-01/app/app.module'; +import * as s0603 from '../06-03/app/app.module'; +import * as s0701 from '../07-01/app/app.module'; +import * as s0703 from '../07-03/app/app.module'; +import * as s0704 from '../07-04/app/app.module'; +import * as s0901 from '../09-01/app/app.module'; + +/////////////////// +const moduleMetadata = { + imports: [ + BrowserModule, + HttpModule, + + s0101.AppModule, + s0207.AppModule, + s0208.AppModule, + s0301.AppModule, + s0302.AppModule, + s0303.AppModule, + s0304.AppModule, + s0305.AppModule, + s0306.AppModule, + s0410.AppModule, + s0414.AppModule, + s0502.AppModule, + s0503.AppModule, + s0504.AppModule, + s0512.AppModule, + s0513.AppModule, + s0514.AppModule, + s0515.AppModule, + s0516.AppModule, + s0517.AppModule, + s0601.AppModule, + s0603.AppModule, + s0701.AppModule, + s0703.AppModule, + s0704.AppModule, + s0901.AppModule, + + RouterModule.forRoot([ + { path: '', redirectTo: '/01-01', pathMatch: 'full' } + ], {/* enableTracing: true */}), + ], + declarations: [AppComponent], + providers: [ + { provide: LocationStrategy, useClass: HashLocationStrategy }, + { provide: XHRBackend, useClass: InMemoryBackendService }, + { provide: SEED_DATA, useClass: HeroData } + ], + bootstrap: [ AppComponent ] +}; + +@NgModule(moduleMetadata) +class MainModule { } + +browserDynamicPlatform().bootstrapModule(MainModule); + -bootstrap(AppComponent, [ - appRouterProviders, - HTTP_PROVIDERS, - { provide: LocationStrategy, useClass: HashLocationStrategy }, - { provide: XHRBackend, useClass: InMemoryBackendService }, - { provide: SEED_DATA, useClass: HeroData } - ]); diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js index 10f13fe801..1ffb1b863a 100644 --- a/public/docs/_examples/style-guide/ts/systemjs.custom.js +++ b/public/docs/_examples/style-guide/ts/systemjs.custom.js @@ -23,7 +23,8 @@ '05-14', '05-14/app', '05-14/app/shared', '05-14/app/shared/toast', '05-15', '05-15/app', '05-15/app/heroes', '05-15/app/heroes/hero-list', '05-15/app/heroes/shared', '05-16', '05-16/app', '05-16/app/heroes', - '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero-list', '05-17/app/heroes/shared', + '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero', '05-17/app/heroes/hero-list', + '05-17/app/heroes/shared', '06-01', '06-01/app', '06-01/app/shared', '06-03', '06-03/app', '06-03/app/shared', '07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared', diff --git a/public/docs/_examples/styleguide/js/app.js b/public/docs/_examples/styleguide/js/app.js index 51a17a2429..61a0f2ae31 100644 --- a/public/docs/_examples/styleguide/js/app.js +++ b/public/docs/_examples/styleguide/js/app.js @@ -19,8 +19,20 @@ app.AppComponent = // #enddocregion // #docregion bootstrap +app.AppModule = + ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ app.AppComponent ], + bootstrap: [ app.AppComponent ] + }) + .Class({ + constructor: function() {} + }); + document.addEventListener('DOMContentLoaded', function() { - ng.platformBrowserDynamic.bootstrap(app.AppComponent); + ng.platformBrowserDynamic + .platformBrowserDynamic() + .bootstrapModule(app.AppModule); }); // #enddocregion // #enddocregion diff --git a/public/docs/_examples/styleguide/ts/app/app.module.ts b/public/docs/_examples/styleguide/ts/app/app.module.ts new file mode 100644 index 0000000000..0a9ee6adf7 --- /dev/null +++ b/public/docs/_examples/styleguide/ts/app/app.module.ts @@ -0,0 +1,11 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/styleguide/ts/app/main.ts b/public/docs/_examples/styleguide/ts/app/main.ts index ad256f0823..4acf5de663 100644 --- a/public/docs/_examples/styleguide/ts/app/main.ts +++ b/public/docs/_examples/styleguide/ts/app/main.ts @@ -1,5 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js index 22b0c210cc..1921a431c0 100644 --- a/public/docs/_examples/systemjs.config.js +++ b/public/docs/_examples/systemjs.config.js @@ -49,9 +49,6 @@ // Add package entries for angular packages ngPackageNames.forEach(setPackageConfig); - // No umd for router yet - packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' }; - var config = { map: map, packages: packages diff --git a/public/docs/_examples/systemjs.config.plunker.build.js b/public/docs/_examples/systemjs.config.plunker.build.js new file mode 100644 index 0000000000..3ccf77808c --- /dev/null +++ b/public/docs/_examples/systemjs.config.plunker.build.js @@ -0,0 +1,105 @@ +/** + * PLUNKER CURRENT BUILD VERSION + * (based on systemjs.config.js in angular.io) + * System configuration for Angular 2 samples + * Adjust as necessary for your application needs. + */ +(function(global) { + + var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current! + var routerVer = '@3.0.0-rc.1'; // lock router version + var formsVer = '@0.3.0'; // 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 = { + 'app': 'app', + + + '@angular/core': 'https://cdn.rawgit.com/angular/core-builds/master', + '@angular/common': 'https://cdn.rawgit.com/angular/common-builds/master', + '@angular/compiler':'https://cdn.rawgit.com/angular/compiler-builds/master', + '@angular/forms':'https://cdn.rawgit.com/angular/forms-builds/master', + '@angular/http':'https://cdn.rawgit.com/angular/http-builds/master', + '@angular/platform-browser':'https://cdn.rawgit.com/angular/platform-browser-builds/master', + '@angular/platform-browser-dynamic': 'https://cdn.rawgit.com/angular/platform-browser-dynamic-builds/master', + '@angular/router': 'https://cdn.rawgit.com/angular/router-builds/master', + + 'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6', + 'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js', + 'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js', + + 'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', + }; + + //packages tells the System loader how to load when no filename and/or no extension + var packages = { + app: { + main: 'main.ts', + defaultExtension: 'ts' + }, + '@angular/core': { + main: 'index.js', + defaultExtension: 'js' + }, + '@angular/compiler': { + main: 'index.js', + defaultExtension: 'js' + }, + '@angular/common': { + main: 'index.js', + defaultExtension: 'js' + }, + '@angular/forms': { + main: 'index.js', + defaultExtension: 'js' + }, + '@angular/http': { + main: 'index.js', + defaultExtension: 'js' + }, + '@angular/platform-browser-dynamic': { + main: 'index.js', + defaultExtension: 'js' + }, + '@angular/platform-browser': { + main: 'index.js', + defaultExtension: 'js' + }, + '@angular/router': { + main: 'index.js', + defaultExtension: 'js' + }, + 'angular2-in-memory-web-api': { + main: 'index.js', + defaultExtension: 'js' + }, + rxjs: { + defaultExtension: 'js' + } + } + var config = { + // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER + transpiler: 'ts', + typescriptOptions: { + tsconfig: true + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + map: map, + packages: packages + }; + + System.config(config); + +})(this); + + +/* +Copyright 2016 Google Inc. All Rights Reserved. +Use of this source code is governed by an MIT-style license that +can be found in the LICENSE file at http://angular.io/license +*/ diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js index 5ff363b229..d55c4db274 100644 --- a/public/docs/_examples/systemjs.config.plunker.js +++ b/public/docs/_examples/systemjs.config.plunker.js @@ -5,13 +5,13 @@ */ (function(global) { - var ngVer = '@2.0.0-rc.4'; // lock in the angular package version; do not let it float to current! - var routerVer = '@3.0.0-beta.2'; // lock router version - var formsVer = '@0.2.0'; // lock forms version + var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current! + var routerVer = '@3.0.0-rc.1'; // lock router version + var formsVer = '@0.3.0'; // 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 = { + var map = { 'app': 'app', '@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version @@ -48,7 +48,7 @@ }); // Add package entries for angular packages - ngPackageNames.forEach(function(pkgName) { + ngPackageNames.concat(['forms', 'router', 'router-deprecated']).forEach(function(pkgName) { // Bundled (~40 requests): packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; @@ -57,15 +57,6 @@ //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; }); - // No umd for router yet - packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' }; - - // 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', diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html index ebd9981e1a..50c07a1fc8 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.html +++ b/public/docs/_examples/template-syntax/ts/app/app.component.html @@ -664,8 +664,7 @@ bindon-ngModel
    - +
    diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts index 087feccdb6..9f64d3c98f 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts @@ -2,11 +2,9 @@ // #docplaster import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core'; -import { NgForm } from '@angular/common'; +import { NgForm } from '@angular/forms'; import { Hero } from './hero'; -import { HeroDetailComponent, BigHeroDetailComponent } from './hero-detail.component'; -import { MyClickDirective, MyClickDirective2 } from './my-click.directive'; // Alerter fn: monkey patch during test export function alerter(msg?: string) { @@ -20,11 +18,7 @@ export enum Color {Red, Green, Blue}; */ @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: [ - HeroDetailComponent, BigHeroDetailComponent, - MyClickDirective, MyClickDirective2 - ] + templateUrl: 'app/app.component.html' }) export class AppComponent implements AfterViewInit, OnInit { diff --git a/public/docs/_examples/template-syntax/ts/app/app.module.1.ts b/public/docs/_examples/template-syntax/ts/app/app.module.1.ts new file mode 100644 index 0000000000..47007ecae4 --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/app/app.module.1.ts @@ -0,0 +1,18 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/template-syntax/ts/app/app.module.ts b/public/docs/_examples/template-syntax/ts/app/app.module.ts new file mode 100644 index 0000000000..2a99d8b395 --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/app/app.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component'; +import { MyClickDirective, MyClickDirective2 } from './my-click.directive'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent, + BigHeroDetailComponent, + HeroDetailComponent, + MyClickDirective, + MyClickDirective2 + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/template-syntax/ts/app/main.ts b/public/docs/_examples/template-syntax/ts/app/main.ts index 42dbeb9f7d..458fd21eb1 100644 --- a/public/docs/_examples/template-syntax/ts/app/main.ts +++ b/public/docs/_examples/template-syntax/ts/app/main.ts @@ -1,5 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; +import { AppModule } from './app.module'; -bootstrap(AppComponent); +browserDynamicPlatform().bootstrapModule(AppModule); diff --git a/public/docs/_examples/toh-1/ts/app/app.module.ts b/public/docs/_examples/toh-1/ts/app/app.module.ts new file mode 100644 index 0000000000..4c0b77ea48 --- /dev/null +++ b/public/docs/_examples/toh-1/ts/app/app.module.ts @@ -0,0 +1,18 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/toh-1/ts/app/main.ts b/public/docs/_examples/toh-1/ts/app/main.ts index dae4ddf676..62da4340b8 100644 --- a/public/docs/_examples/toh-1/ts/app/main.ts +++ b/public/docs/_examples/toh-1/ts/app/main.ts @@ -1,7 +1,6 @@ -// #docregion pt1 -import { bootstrap } from '@angular/platform-browser-dynamic'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); -// #enddocregion pt1 +platformBrowserDynamic().bootstrapModule(AppModule); +// #enddocregion diff --git a/public/docs/_examples/toh-2/ts/app/app.module.ts b/public/docs/_examples/toh-2/ts/app/app.module.ts new file mode 100644 index 0000000000..4c0b77ea48 --- /dev/null +++ b/public/docs/_examples/toh-2/ts/app/app.module.ts @@ -0,0 +1,18 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/toh-2/ts/app/main.ts b/public/docs/_examples/toh-2/ts/app/main.ts index 42dbeb9f7d..62da4340b8 100644 --- a/public/docs/_examples/toh-2/ts/app/main.ts +++ b/public/docs/_examples/toh-2/ts/app/main.ts @@ -1,5 +1,6 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); +// #enddocregion diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts index bbe047a629..fe5a5b98ad 100644 --- a/public/docs/_examples/toh-3/ts/app/app.component.ts +++ b/public/docs/_examples/toh-3/ts/app/app.component.ts @@ -4,9 +4,6 @@ import { Component } from '@angular/core'; // #docregion hero-import import { Hero } from './hero'; // #enddocregion hero-import -// #docregion hero-detail-import -import { HeroDetailComponent } from './hero-detail.component'; -// #enddocregion hero-detail-import const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, @@ -85,10 +82,7 @@ const HEROES: Hero[] = [ margin-right: .8em; border-radius: 4px 0 0 4px; } - `], -// #docregion directives - directives: [HeroDetailComponent] -// #enddocregion directives + `] }) export class AppComponent { title = 'Tour of Heroes'; diff --git a/public/docs/_examples/toh-3/ts/app/app.module.ts b/public/docs/_examples/toh-3/ts/app/app.module.ts new file mode 100644 index 0000000000..26b63938ad --- /dev/null +++ b/public/docs/_examples/toh-3/ts/app/app.module.ts @@ -0,0 +1,24 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +// #docregion hero-detail-import +import { HeroDetailComponent } from './hero-detail.component'; +// #enddocregion hero-detail-import + +// #docregion declarations +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent, + HeroDetailComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } +// #enddocregion declarations diff --git a/public/docs/_examples/toh-3/ts/app/main.ts b/public/docs/_examples/toh-3/ts/app/main.ts index dae4ddf676..e6bbb4c282 100644 --- a/public/docs/_examples/toh-3/ts/app/main.ts +++ b/public/docs/_examples/toh-3/ts/app/main.ts @@ -1,7 +1,6 @@ // #docregion pt1 -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); // #enddocregion pt1 diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts index 9df27d44bd..5a0a4d0524 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts @@ -6,7 +6,6 @@ import { OnInit } from '@angular/core'; import { Component } from '@angular/core'; import { Hero } from './hero'; -import { HeroDetailComponent } from './hero-detail.component'; // #docregion hero-service-import import { HeroService } from './hero.service.1'; // #enddocregion hero-service-import @@ -20,7 +19,6 @@ import { HeroService } from './hero.service.1'; `, - directives: [HeroDetailComponent], // #docregion providers providers: [HeroService] // #enddocregion providers diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts index cf2b42a034..00bee85659 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.ts @@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core'; import { Hero } from './hero'; -import { HeroDetailComponent } from './hero-detail.component'; // #docregion hero-service-import import { HeroService } from './hero.service'; // #enddocregion hero-service-import @@ -73,7 +72,6 @@ import { HeroService } from './hero.service'; border-radius: 4px 0 0 4px; } `], - directives: [HeroDetailComponent], providers: [HeroService] }) export class AppComponent implements OnInit { diff --git a/public/docs/_examples/toh-4/ts/app/app.module.ts b/public/docs/_examples/toh-4/ts/app/app.module.ts new file mode 100644 index 0000000000..3df186c62a --- /dev/null +++ b/public/docs/_examples/toh-4/ts/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { HeroDetailComponent } from './hero-detail.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent, + HeroDetailComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/toh-4/ts/app/main.1.ts b/public/docs/_examples/toh-4/ts/app/main.1.ts index f8cf0497d6..2470c9595e 100644 --- a/public/docs/_examples/toh-4/ts/app/main.1.ts +++ b/public/docs/_examples/toh-4/ts/app/main.1.ts @@ -1,5 +1,4 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component.1'; - -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/toh-4/ts/app/main.ts b/public/docs/_examples/toh-4/ts/app/main.ts index 42dbeb9f7d..2470c9595e 100644 --- a/public/docs/_examples/toh-4/ts/app/main.ts +++ b/public/docs/_examples/toh-4/ts/app/main.ts @@ -1,5 +1,4 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); 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 789e14d9be..cbdd040437 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 @@ -1,24 +1,13 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; -import { HeroService } from './hero.service'; -import { HeroesComponent } from './heroes.component'; -// #enddocregion - -// #docregion @Component({ selector: 'my-app', template: `

    {{title}}

    - `, - directives: [HeroesComponent], - providers: [ - // #enddocregion - // #docregion - HeroService - ] + ` }) export class AppComponent { title = 'Tour of Heroes'; 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 c2699f317b..82e5147775 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 @@ -1,27 +1,16 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -// #docregion import-router -import { ROUTER_DIRECTIVES } from '@angular/router'; -// #enddocregion import-router - -import { HeroService } from './hero.service'; @Component({ selector: 'my-app', // #docregion template template: `

    {{title}}

    - Heroes + Heroes - `, + ` // #enddocregion template - // #docregion directives-and-providers - directives: [ROUTER_DIRECTIVES], - providers: [ - HeroService - ] - // #enddocregion directives-and-providers }) 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 index ff64e27ab1..2d1f83853c 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.3.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.3.ts @@ -1,9 +1,6 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { HeroService } from './hero.service'; @Component({ selector: 'my-app', @@ -11,10 +8,8 @@ import { HeroService } from './hero.service'; template: `

    {{title}}

    `, @@ -22,10 +17,6 @@ import { HeroService } from './hero.service'; // #docregion style-urls styleUrls: ['app/app.component.css'], // #enddocregion style-urls - directives: [ROUTER_DIRECTIVES], - providers: [ - HeroService - ] }) export class AppComponent { title = 'Tour of Heroes'; 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 3f3e758dcf..fbf2279067 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.ts @@ -1,9 +1,6 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; - -import { HeroService } from './hero.service'; @Component({ selector: 'my-app', @@ -11,8 +8,8 @@ import { HeroService } from './hero.service'; template: `

    {{title}}

    `, @@ -20,10 +17,6 @@ import { HeroService } from './hero.service'; // #docregion style-urls styleUrls: ['app/app.component.css'], // #enddocregion style-urls - directives: [ROUTER_DIRECTIVES], - providers: [ - HeroService - ] }) export class AppComponent { title = 'Tour of Heroes'; diff --git a/public/docs/_examples/toh-5/ts/app/app.module.1.ts b/public/docs/_examples/toh-5/ts/app/app.module.1.ts new file mode 100644 index 0000000000..473ca08fb8 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.module.1.ts @@ -0,0 +1,28 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; + +import { HeroesComponent } from './heroes.component'; + +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], + declarations: [ + AppComponent, + HeroesComponent + ], + providers: [ + HeroService + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.module.2.ts b/public/docs/_examples/toh-5/ts/app/app.module.2.ts new file mode 100644 index 0000000000..1a4ac0f48d --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.module.2.ts @@ -0,0 +1,30 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { routing } from './app.routing'; + +import { HeroesComponent } from './heroes.component'; + +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing + ], + declarations: [ + AppComponent, + HeroesComponent + ], + providers: [ + HeroService + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.module.3.ts b/public/docs/_examples/toh-5/ts/app/app.module.3.ts new file mode 100644 index 0000000000..2eca272b26 --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.module.3.ts @@ -0,0 +1,47 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { routing } from './app.routing'; + +import { HeroesComponent } from './heroes.component'; +// #docregion dashboard-declaration +import { DashboardComponent } from './dashboard.component'; +// #enddocregion dashboard-declaration +// #docregion hero-detail-declaration +import { HeroDetailComponent } from './hero-detail.component'; +// #enddocregion hero-detail-declaration +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing + ], +// #docregion dashboard-declaration, hero-detail-declaration + + declarations: [ +// #enddocregion dashboard-declaration, hero-detail-declaration + AppComponent, + HeroesComponent, +// #docregion dashboard-declaration + DashboardComponent, +// #enddocregion dashboard-declaration +// #docregion hero-detail-declaration + HeroDetailComponent +// #enddocregion hero-detail-declaration +// #docregion dashboard-declaration, hero-detail-declaration + ], +// #enddocregion dashboard-declaration, hero-detail-declaration + providers: [ + HeroService + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/toh-5/ts/app/app.module.ts b/public/docs/_examples/toh-5/ts/app/app.module.ts new file mode 100644 index 0000000000..47cc9415bb --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.module.ts @@ -0,0 +1,34 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { routing } from './app.routing'; + +import { HeroesComponent } from './heroes.component'; +import { DashboardComponent } from './dashboard.component'; +import { HeroDetailComponent } from './hero-detail.component'; + +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing + ], + declarations: [ + AppComponent, + HeroesComponent, + DashboardComponent, + HeroDetailComponent + ], + providers: [ + HeroService + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion 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 deleted file mode 100644 index 075cc37496..0000000000 --- a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { provideRouter, RouterConfig } from '@angular/router'; -import { HeroesComponent } from './heroes.component'; - -const routes: RouterConfig = [ - { - path: 'heroes', - component: HeroesComponent - } -]; - -export const appRouterProviders = [ - provideRouter(routes) -]; diff --git a/public/docs/_examples/toh-5/ts/app/app.routing.1.ts b/public/docs/_examples/toh-5/ts/app/app.routing.1.ts new file mode 100644 index 0000000000..055b26754e --- /dev/null +++ b/public/docs/_examples/toh-5/ts/app/app.routing.1.ts @@ -0,0 +1,17 @@ +// #docregion +// #docregion routing-config +import { Routes, RouterModule } from '@angular/router'; + +import { HeroesComponent } from './heroes.component'; + +const appRoutes: Routes = [ + { + path: 'heroes', + component: HeroesComponent + } +]; +// #enddocregion routing-config + +// #docregion routing-export +export const routing = RouterModule.forRoot(appRoutes); +// #enddocregion routing-export diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routing.2.ts similarity index 76% rename from public/docs/_examples/toh-5/ts/app/app.routes.1.ts rename to public/docs/_examples/toh-5/ts/app/app.routing.2.ts index 0c34add29c..a75df506e7 100644 --- a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts +++ b/public/docs/_examples/toh-5/ts/app/app.routing.2.ts @@ -1,12 +1,13 @@ // #docregion -import { provideRouter, RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; + import { DashboardComponent } from './dashboard.component'; -import { HeroesComponent } from './heroes.component'; +import { HeroesComponent } from './heroes.component'; // #docregion hero-detail-import import { HeroDetailComponent } from './hero-detail.component'; // #enddocregion hero-detail-import -const routes: RouterConfig = [ +const appRoutes: Routes = [ // #docregion redirect-route { path: '', @@ -32,6 +33,4 @@ const routes: RouterConfig = [ } ]; -export const appRouterProviders = [ - provideRouter(routes) -]; +export const routing = RouterModule.forRoot(appRoutes); diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routing.ts similarity index 60% rename from public/docs/_examples/toh-5/ts/app/app.routes.ts rename to public/docs/_examples/toh-5/ts/app/app.routing.ts index c6074c3607..62071e2567 100644 --- a/public/docs/_examples/toh-5/ts/app/app.routes.ts +++ b/public/docs/_examples/toh-5/ts/app/app.routing.ts @@ -1,13 +1,13 @@ // #docregion -import { provideRouter, RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; -import { DashboardComponent } from './dashboard.component'; -import { HeroesComponent } from './heroes.component'; +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; // #docregion hero-detail-import import { HeroDetailComponent } from './hero-detail.component'; // #enddocregion hero-detail-import -const routes: RouterConfig = [ +const appRoutes: Routes = [ { path: '', redirectTo: '/dashboard', @@ -27,6 +27,4 @@ const routes: RouterConfig = [ } ]; -export const appRouterProviders = [ - provideRouter(routes) -]; +export const routing = RouterModule.forRoot(appRoutes); 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 61edccb90e..713d27c9f2 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,10 @@ // #docplaster // #docregion // #docregion import-oninit, v2 -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; // #enddocregion import-oninit // #docregion import-activated-route -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Params } from '@angular/router'; // #enddocregion import-activated-route import { Hero } from './hero'; @@ -23,10 +23,9 @@ import { HeroService } from './hero.service'; }) // #enddocregion extract-template // #docregion implement -export class HeroDetailComponent implements OnInit, OnDestroy { +export class HeroDetailComponent implements OnInit { // #enddocregion implement hero: Hero; - sub: any; // #docregion ctor constructor( @@ -38,7 +37,7 @@ export class HeroDetailComponent implements OnInit, OnDestroy { // #docregion ng-oninit ngOnInit() { // #docregion get-id - this.sub = this.route.params.subscribe(params => { + this.route.params.forEach((params: Params) => { let id = +params['id']; this.heroService.getHero(id) .then(hero => this.hero = hero); @@ -47,12 +46,6 @@ export class HeroDetailComponent implements OnInit, OnDestroy { } // #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/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts index f04d528627..091a7d82a7 100644 --- a/public/docs/_examples/toh-5/ts/app/main.ts +++ b/public/docs/_examples/toh-5/ts/app/main.ts @@ -1,9 +1,6 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +// main entry point +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; -import { appRouterProviders } from './app.routes'; - -bootstrap(AppComponent, [ - appRouterProviders -]); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts index d49c87ccbf..16d6396184 100644 --- a/public/docs/_examples/toh-6/ts/app/app.component.ts +++ b/public/docs/_examples/toh-6/ts/app/app.component.ts @@ -1,9 +1,7 @@ // #docplaster // #docregion import { Component } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; -import { HeroService } from './hero.service'; // #docregion rxjs-extensions import './rxjs-extensions'; // #enddocregion rxjs-extensions @@ -14,16 +12,12 @@ import './rxjs-extensions'; template: `

    {{title}}

    `, - styleUrls: ['app/app.component.css'], - directives: [ROUTER_DIRECTIVES], - providers: [ - HeroService, - ] + styleUrls: ['app/app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; diff --git a/public/docs/_examples/toh-6/ts/app/app.module.1.ts b/public/docs/_examples/toh-6/ts/app/app.module.1.ts new file mode 100644 index 0000000000..6924d5a390 --- /dev/null +++ b/public/docs/_examples/toh-6/ts/app/app.module.1.ts @@ -0,0 +1,44 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +// Imports for loading & configuring the in-memory web api +import { HttpModule, XHRBackend } from '@angular/http'; + +import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; +import { InMemoryDataService } from './in-memory-data.service'; + +import { AppComponent } from './app.component'; +import { routing } from './app.routing'; + +import { HeroesComponent } from './heroes.component'; +import { DashboardComponent } from './dashboard.component'; +import { HeroDetailComponent } from './hero-detail.component'; + +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing, + HttpModule + ], + declarations: [ + AppComponent, + HeroesComponent, + DashboardComponent, + HeroDetailComponent + ], + providers: [ + HeroService, + { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server + { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion final diff --git a/public/docs/_examples/toh-6/ts/app/app.module.2.ts b/public/docs/_examples/toh-6/ts/app/app.module.2.ts new file mode 100644 index 0000000000..2ec598cd0b --- /dev/null +++ b/public/docs/_examples/toh-6/ts/app/app.module.2.ts @@ -0,0 +1,44 @@ +// #docplaster +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; + +import { AppComponent } from './app.component'; +import { routing } from './app.routing'; + +import { HeroesComponent } from './heroes.component'; +import { DashboardComponent } from './dashboard.component'; +import { HeroDetailComponent } from './hero-detail.component'; +// #docregion hero-search-declaration +import { HeroSearchComponent } from './hero-search.component'; +// #enddocregion hero-search-declaration + +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing, + HttpModule + ], +// #docregion hero-search-declaration + + declarations: [ + AppComponent, + HeroesComponent, + DashboardComponent, + HeroDetailComponent, + HeroSearchComponent + ], +// #enddocregion hero-search-declaration + providers: [ + HeroService + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/toh-6/ts/app/app.module.ts b/public/docs/_examples/toh-6/ts/app/app.module.ts new file mode 100644 index 0000000000..0beff178e0 --- /dev/null +++ b/public/docs/_examples/toh-6/ts/app/app.module.ts @@ -0,0 +1,45 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +// Imports for loading & configuring the in-memory web api +import { HttpModule, XHRBackend } from '@angular/http'; + +import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; +import { InMemoryDataService } from './in-memory-data.service'; + +import { AppComponent } from './app.component'; +import { routing } from './app.routing'; + +import { HeroesComponent } from './heroes.component'; +import { DashboardComponent } from './dashboard.component'; +import { HeroDetailComponent } from './hero-detail.component'; +import { HeroSearchComponent } from './hero-search.component'; + +import { HeroService } from './hero.service'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + routing, + HttpModule + ], + declarations: [ + AppComponent, + HeroesComponent, + DashboardComponent, + HeroDetailComponent, + HeroSearchComponent + ], + providers: [ + HeroService, + { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server + { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { +} +// #enddocregion diff --git a/public/docs/_examples/toh-6/ts/app/app.routes.ts b/public/docs/_examples/toh-6/ts/app/app.routing.ts similarity index 56% rename from public/docs/_examples/toh-6/ts/app/app.routes.ts rename to public/docs/_examples/toh-6/ts/app/app.routing.ts index e143b2a3bf..c5753a4ee9 100644 --- a/public/docs/_examples/toh-6/ts/app/app.routes.ts +++ b/public/docs/_examples/toh-6/ts/app/app.routing.ts @@ -1,11 +1,11 @@ // #docregion -import { provideRouter, RouterConfig } from '@angular/router'; +import { Routes, RouterModule } from '@angular/router'; -import { DashboardComponent } from './dashboard.component'; -import { HeroesComponent } from './heroes.component'; +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; -const routes: RouterConfig = [ +const appRoutes: Routes = [ { path: '', redirectTo: '/dashboard', @@ -25,6 +25,4 @@ const routes: RouterConfig = [ } ]; -export const appRouterProviders = [ - provideRouter(routes) -]; +export const routing = RouterModule.forRoot(appRoutes); diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts index 41b4de58df..4a90a4d6bf 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts @@ -1,16 +1,14 @@ // #docregion , search import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { Router } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; -import { HeroSearchComponent } from './hero-search.component'; @Component({ selector: 'my-dashboard', templateUrl: 'app/dashboard.component.html', - styleUrls: ['app/dashboard.component.css'], - directives: [HeroSearchComponent] + styleUrls: ['app/dashboard.component.css'] }) // #enddocregion search export class DashboardComponent implements OnInit { 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 85d722999e..062917401e 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,9 +1,9 @@ // #docplaster // #docregion, variables-imports -import { Component, EventEmitter, Input, OnInit, OnDestroy, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; // #enddocregion variables-imports -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Params } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -14,11 +14,10 @@ import { HeroService } from './hero.service'; styleUrls: ['app/hero-detail.component.css'] }) // #docregion variables-imports -export class HeroDetailComponent implements OnInit, OnDestroy { +export class HeroDetailComponent implements OnInit { @Input() hero: Hero; @Output() close = new EventEmitter(); error: any; - sub: any; navigated = false; // true if navigated here // #enddocregion variables-imports @@ -29,7 +28,7 @@ export class HeroDetailComponent implements OnInit, OnDestroy { // #docregion ngOnInit ngOnInit() { - this.sub = this.route.params.subscribe(params => { + this.route.params.forEach((params: Params) => { if (params['id'] !== undefined) { let id = +params['id']; this.navigated = true; @@ -43,10 +42,6 @@ export class HeroDetailComponent implements OnInit, OnDestroy { } // #enddocregion ngOnInit - ngOnDestroy() { - this.sub.unsubscribe(); - } - // #docregion save save() { this.heroService diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts index 3bf618f5bd..e5c5ab1c49 100644 --- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts @@ -5,13 +5,11 @@ import { Router } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; // #docregion hero-detail-component -import { HeroDetailComponent } from './hero-detail.component'; @Component({ selector: 'my-heroes', templateUrl: 'app/heroes.component.html', - styleUrls: ['app/heroes.component.css'], - directives: [HeroDetailComponent] + styleUrls: ['app/heroes.component.css'] }) // #enddocregion hero-detail-component export class HeroesComponent implements OnInit { diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts index bda66d0377..091a7d82a7 100644 --- a/public/docs/_examples/toh-6/ts/app/main.ts +++ b/public/docs/_examples/toh-6/ts/app/main.ts @@ -1,33 +1,6 @@ -// #docplaster -// #docregion final -// Imports for loading & configuring the in-memory web api -import { XHRBackend } from '@angular/http'; +// #docregion +// main entry point +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; -import { InMemoryDataService } from './in-memory-data.service'; - -// The usual bootstrapping imports -// #docregion v1 -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { HTTP_PROVIDERS } from '@angular/http'; - -import { AppComponent } from './app.component'; -import { appRouterProviders } from './app.routes'; - -// #enddocregion v1, final -/* -// #docregion v1 -bootstrap(AppComponent, [ - appRouterProviders, - HTTP_PROVIDERS -]); -// #enddocregion v1 -*/ -// #docregion final -bootstrap(AppComponent, [ - appRouterProviders, - HTTP_PROVIDERS, - { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server - { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data -]); -// #enddocregion final +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/typings.json b/public/docs/_examples/typings.json index a4bf5572aa..3d826df25a 100644 --- a/public/docs/_examples/typings.json +++ b/public/docs/_examples/typings.json @@ -2,6 +2,6 @@ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", - "node": "registry:dt/node#6.0.0+20160720070758" + "node": "registry:dt/node#6.0.0+20160807145350" } } diff --git a/public/docs/_examples/upgrade-adapter/e2e-spec.ts b/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-adapter/e2e-spec.ts rename to public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts rename to public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled similarity index 92% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled index 5b9ad15f32..3881a30e4d 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled @@ -1,10 +1,7 @@ // #docregion import { - describe, beforeEachProviders, - it, - inject, - expect + inject } from '@angular/core/testing'; import { CheckmarkPipe } from './checkmark.pipe'; diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts rename to public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts index f59e9c7afd..4db648092b 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts @@ -6,6 +6,7 @@ import { APP_BASE_HREF } from '@angular/common'; import { bootstrap } from '@angular/platform-browser-dynamic'; +import { FormsModule } from '@angular/forms'; import { HTTP_PROVIDERS } from '@angular/http'; import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { Phone } from './core/phone/phone.service'; @@ -13,11 +14,14 @@ import { AppComponent } from './app.component'; // #enddocregion imports // #docregion bootstrap -bootstrap(AppComponent, [ - HTTP_PROVIDERS, - ROUTER_PROVIDERS, - { provide: APP_BASE_HREF, useValue: '!' }, - { provide: LocationStrategy, useClass: HashLocationStrategy }, - Phone -]); +bootstrap(AppComponent, { + imports: [FormsModule], + providers: [ + HTTP_PROVIDERS, + ROUTER_PROVIDERS, + { provide: APP_BASE_HREF, useValue: '!' }, + { provide: LocationStrategy, useClass: HashLocationStrategy }, + Phone + ] +}); // #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts.disabled diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts.disabled similarity index 100% rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts.disabled diff --git a/public/docs/_examples/user-input/ts/app/app.component.ts b/public/docs/_examples/user-input/ts/app/app.component.ts index 330d84b5a1..35be5f232d 100644 --- a/public/docs/_examples/user-input/ts/app/app.component.ts +++ b/public/docs/_examples/user-input/ts/app/app.component.ts @@ -1,26 +1,8 @@ // #docregion import { Component } from '@angular/core'; -import { ClickMeComponent } from './click-me.component'; -import { ClickMe2Component } from './click-me2.component'; - -import { LoopbackComponent } from './loop-back.component'; - -import { KeyUpComponent_v1, - KeyUpComponent_v2, - KeyUpComponent_v3, - KeyUpComponent_v4 } from './keyup.components'; - -import { LittleTourComponent } from './little-tour.component'; - @Component({ selector: 'my-app', - templateUrl: 'app/app.component.html', - directives: [ - ClickMeComponent, ClickMe2Component, - LoopbackComponent, - KeyUpComponent_v1, KeyUpComponent_v2, KeyUpComponent_v3, KeyUpComponent_v4, - LittleTourComponent - ] + templateUrl: 'app/app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/user-input/ts/app/app.module.ts b/public/docs/_examples/user-input/ts/app/app.module.ts new file mode 100644 index 0000000000..41f13f9f11 --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/app.module.ts @@ -0,0 +1,37 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { ClickMeComponent } from './click-me.component'; +import { ClickMe2Component } from './click-me2.component'; +import { + KeyUpComponent_v1, + KeyUpComponent_v2, + KeyUpComponent_v3, + KeyUpComponent_v4 +} from './keyup.components'; +import { LittleTourComponent } from './little-tour.component'; +import { LoopbackComponent } from './loop-back.component'; + + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent, + ClickMeComponent, + ClickMe2Component, + KeyUpComponent_v1, + KeyUpComponent_v2, + KeyUpComponent_v3, + KeyUpComponent_v4, + LittleTourComponent, + LoopbackComponent + ], + providers: [ + + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/user-input/ts/app/main.ts b/public/docs/_examples/user-input/ts/app/main.ts index 42dbeb9f7d..6af7a5b2ae 100644 --- a/public/docs/_examples/user-input/ts/app/main.ts +++ b/public/docs/_examples/user-input/ts/app/main.ts @@ -1,5 +1,5 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppComponent } from './app.component'; +import { AppModule } from './app.module'; -bootstrap(AppComponent); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/webpack/e2e-spec.ts b/public/docs/_examples/webpack/e2e-spec.ts.disabled similarity index 100% rename from public/docs/_examples/webpack/e2e-spec.ts rename to public/docs/_examples/webpack/e2e-spec.ts.disabled diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index e383ba3355..4b3dc3e15d 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -10,14 +10,14 @@ }, "license": "MIT", "dependencies": { - "@angular/common": "2.0.0-rc.4", - "@angular/compiler": "2.0.0-rc.4", - "@angular/core": "2.0.0-rc.4", - "@angular/forms": "0.2.0", - "@angular/http": "2.0.0-rc.4", - "@angular/platform-browser": "2.0.0-rc.4", - "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-beta.1", + "@angular/common": "2.0.0-rc.5", + "@angular/compiler": "2.0.0-rc.5", + "@angular/core": "2.0.0-rc.5", + "@angular/forms": "0.3.0", + "@angular/http": "2.0.0-rc.5", + "@angular/platform-browser": "2.0.0-rc.5", + "@angular/platform-browser-dynamic": "2.0.0-rc.5", + "@angular/router": "3.0.0-rc.1", "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/app/app.component.spec.ts b/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts index c2e85fd099..d7d0696aef 100644 --- a/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts +++ b/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts @@ -1,18 +1,17 @@ // #docregion import { - it, + addProviders, inject, - describe, - beforeEachProviders, - expect } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('App', () => { - beforeEachProviders(() => [ - AppComponent - ]); + beforeEach(() => { + addProviders([ + AppComponent + ]); + }); it ('should work', inject([AppComponent], (app: AppComponent) => { // Add real test here diff --git a/public/docs/_examples/webpack/ts/src/app/app.module.ts b/public/docs/_examples/webpack/ts/src/app/app.module.ts new file mode 100644 index 0000000000..362f3401fa --- /dev/null +++ b/public/docs/_examples/webpack/ts/src/app/app.module.ts @@ -0,0 +1,16 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/webpack/ts/src/main.ts b/public/docs/_examples/webpack/ts/src/main.ts index 8ea0ea84ce..0057db95ab 100644 --- a/public/docs/_examples/webpack/ts/src/main.ts +++ b/public/docs/_examples/webpack/ts/src/main.ts @@ -1,8 +1,8 @@ // #docregion -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; -import { AppComponent } from './app/app.component'; +import { AppModule } from './app/app.module'; // #docregion enable-prod if (process.env.ENV === 'production') { @@ -10,5 +10,5 @@ if (process.env.ENV === 'production') { } // #enddocregion enable-prod -bootstrap(AppComponent, []); +browserDynamicPlatform().bootstrapModule(AppModule); // #enddocregion diff --git a/public/docs/_examples/webpack/ts/typings.1.json b/public/docs/_examples/webpack/ts/typings.1.json index 3385926d1f..3d826df25a 100644 --- a/public/docs/_examples/webpack/ts/typings.1.json +++ b/public/docs/_examples/webpack/ts/typings.1.json @@ -2,6 +2,6 @@ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", - "node": "registry:dt/node#6.0.0+20160621231320" + "node": "registry:dt/node#6.0.0+20160807145350" } } diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 7d5ed7b13a..7bbc458b55 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -3,7 +3,7 @@ "icon": "home", "title": "Angular Docs", "menuTitle": "Docs Home", - "banner": "Welcome to Angular in JavaScript! The current Angular 2 release is rc.4. Please consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "Welcome to Angular in JavaScript! The current Angular 2 release is rc.5. Please consult the Change Log about recent enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 1e0d9aa221..250d244eb4 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -29,7 +29,7 @@ "basics": true }, - "forms-deprecated": { + "forms": { "title": "Forms", "intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.", "nextable": true, diff --git a/public/docs/js/latest/guide/forms-deprecated.jade b/public/docs/js/latest/guide/forms-deprecated.jade index 5a963272c8..b825bf6f2c 100644 --- a/public/docs/js/latest/guide/forms-deprecated.jade +++ b/public/docs/js/latest/guide/forms-deprecated.jade @@ -2,7 +2,7 @@ include ../_util-fns .alert.is-important :marked - This guide is using the deprecated forms API. + This guide is using the deprecated forms API, which is disabled as of RC5, thus this sample only works up to RC4. We have created a new version using the new API here. diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 315d687414..045eb758ab 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -29,11 +29,12 @@ figure.image-display .file app .children .file app.component.js + .file app.module.js .file main.js .file index.html .file styles.css :marked - Functionally, it's an `index.html`, `styles.css` and two JavaScript files in an `app/` folder. + Functionally, it's an `index.html`, `styles.css` and three JavaScript files in an `app/` folder. We can handle that! Of course we won't build many apps that only run in plunker. @@ -41,6 +42,7 @@ figure.image-display 1. Set up our development environment 1. Write the Angular root component for our app + 1. Add an Angular Module 1. Bootstrap it to take control of the main web page 1. Write the main page (`index.html`) 1. Add some CSS (`styles.css`) @@ -124,7 +126,7 @@ code-example(format=""). '(component schema)')(format=".") :marked - The **`Component`** method takes a configuration object with two + The **`Component`** method takes a configuration object with three properties. The **`Class`** method is where we implement the component itself, giving it properties and methods that bind to the view and whatever behavior is appropriate for this part of the UI. @@ -167,7 +169,7 @@ code-example(format=""). provided by another module, we get it from the `app` object. When another module needs to refer to `AppComponent`, it gets it from the `app.AppComponent` like this: -+makeExample('quickstart/js/app/main.js', 'import','app/main.js (import)')(format=".") ++makeExample('quickstart/js/app/app.module.js', 'import', 'app/app.module.js (import)')(format=".") :marked Angular is also modular. It is a collection of library modules. @@ -210,22 +212,36 @@ code-example(format=""). Now we need something to tell Angular to load this component. + ### Add an NgModule + + Angular apps are composed of [Angular Modules](guide/ngmodules.html) that + snuggly contain all our components and everything else we need for our app. + + Create the `app/app.module.ts` file with the following content: + ++makeExample('quickstart/js/app/app.module.js', null, 'app/app.module.js') + +.l-sub-section + :marked + Read more about the `NgModule` configuration in the [appendix below](#ngmodule). + +:marked ### Bootstrap it! - + Add a new file , `main.js`, to the `app/` folder as follows: +makeExample('quickstart/js/app/main.js', null, 'app/main.js')(format=".") :marked We need two things to launch the application: - 1. Angular's browser `bootstrap` function - 1. The application root component that we just wrote. + 1. Angular's `platformBrowserDynamic().bootstrapModule` function + 1. The application root module that we just wrote. We have them both in our 'namespaces'. - Then we call `bootstrap`, passing in the **root component type**, `AppComponent`. + Then we call `bootstrapModule`, passing in the **root app module**, `AppModule`. .l-sub-section :marked - Learn why we need `bootstrap` from `ng.platformBrowserDynamic` - and why we create a separate *main.js* file in the [appendix below](#main). + Learn why we need `bootstrapModule` from `ng.platformBrowserDynamic` + and why we create a separate js files in the [appendix below](#main). :marked We've asked Angular to launch the app in a browser with our component at the root. Where will Angular put it? @@ -250,13 +266,14 @@ code-example(format=""). 1. We load the JavaScript libraries we need; learn about them [below](#libraries). - 2. We load our JavaScript files, paying attention to their order (`main.js` needs `app.component.js` to be there first). + 2. We load our JavaScript files, paying attention to their order (`main.js` needs `app.module.js` to be there first, and `app.module.js` needs `app.component.js`). 3. We add the `` tag in the ``. **This is where our app lives!** - When Angular calls the `bootstrap` function in `main.js`, it reads the `AppComponent` - metadata, finds the `my-app` selector, locates an element tag named `my-app`, - and loads our application between those tags. + When Angular calls the `bootstrapModule` function in `main.js`, + it reads the `AppModule` metadata, sees that `AppComponent` is the bootstrap component, + finds the `my-app` selector, locates an element tag named `my-app`, + and renders our application's view between those tags. :marked ### Add some style @@ -314,6 +331,7 @@ figure.image-display .file app .children .file app.component.js + .file app.module.js .file main.js .file index.html .file package.json @@ -322,12 +340,18 @@ figure.image-display And here are the files: +makeTabs(` quickstart/js/app/app.component.js, + quickstart/js/app/app.module.js, quickstart/js/app/main.js, quickstart/js/index.html, quickstart/js/package.1.json, quickstart/js/styles.1.css `,null, - `app/app.component.js, app/main.js, index.html, package.json, styles.css`) + `app/app.component.js, + app/app.module.js, + app/main.js, + index.html, + package.json, + styles.css`) :marked .l-main-section @@ -448,13 +472,32 @@ code-example(format=""). Just make sure there are no `npm ERR!` messages at the very end of `npm install`. +.l-main-section +:marked + + ### Appendix: ***NgModule*** + The `NgModule` decorator is listing: + + 1. What other Angular Modules ours uses + 1. Which components and directives we declare in our components + 1. The component to bootstrap at the start + + We import our lone `app.AppComponent` and add it to both `declaration` and `bootstrap` array. + + Notice that we also add `ng.platformBrowser.BrowserModule` to the `imports` array. + This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser. + + Angular itself is split into separate Angular Modules so we only need to import the ones we really use. + + One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`. + .l-main-section :marked ### Appendix: ***main.js*** #### Bootstrapping is platform-specific - We use the `bootstrap` function from `ng.platformBrowserDynamic`, + We use the `platformBrowserDynamic().bootstrapModule` function from `ng.platformBrowserDynamic`, not `ng.core`. There's a good reason. We only call "core" those capabilities that are the same across all platform targets. @@ -469,11 +512,11 @@ code-example(format=""). These targets require a different kind of bootstrap function that we'd import from a different library. - #### Why do we create a separate ***main.js*** file? + #### Why do we create a separate ***main.js***, ***app.module.js*** and ***app.component.js*** files? The *main.js* file is tiny. This is just a QuickStart. - We could have folded its few lines into the `app.component.js` file - and spared ourselves some complexity. + We could have folded its few lines into the `app.module.js` file, and that one into + `app.component.js` and spared ourselves some complexity. We didn't for what we believe to be good reasons: 1. Doing it right is easy @@ -485,7 +528,7 @@ code-example(format=""). #### It's easy Sure it's an extra step and an extra file. How hard is that in the scheme of things? - We'll see that a separate `main.js` is beneficial for *most* apps + We'll see that a separate `main.js` and `app.module.js` is beneficial for *most* apps even if it isn't critical for the QuickStart. Let's develop good habits now while the cost is low. @@ -493,32 +536,33 @@ code-example(format=""). We should be thinking about testability from the beginning even if we know we'll never test the QuickStart. - It is difficult to unit test a component when there is a call to `bootstrap` in the same file. + It is difficult to unit test a component when there is a call to `bootstrapModule` in the same file. As soon as we load the component file to test the component, - the `bootstrap` function tries to load the application in the browser. + the `bootstrapModule` function tries to load the application in the browser. It throws an error because we're not expecting to run the entire application, just test the component. - Relocating the `bootstrap` function to `main.js` eliminates this spurious error + Relocating the `bootstrapModule` function to `main.js` eliminates this spurious error and leaves us with a clean component module file. #### Reusability We refactor, rename, and relocate files as our application evolves. - We can't do any of those things while the file calls `bootstrap`. + We can't do any of those things while the file calls `bootstrapModule`. we can't move it. We can't reuse the component in another application. We can't pre-render the component on the server for better performance. #### Separation of concerns - A component's responsibility is to present and manage a view. + A component's responsibility is to present and manage a view, and a NgModule's + reponsibility is to define the application context. - Launching the application has nothing to do with view management. + Launching the application has nothing to do with any of these. That's a separate concern. The friction we're encountering in testing and reuse stems from this unnecessary mix of responsibilities. #### Import/Export - While writing a separate `main.js` file we learned an essential Angular skill: + While writing a separate `main.js` and `app.module.js` files we learned an essential Angular skill: how to 'export' from one 'module' and 'import' into another via our simple namespace abstraction. We'll do a lot of that as we learn more Angular. diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 735c69c2b2..6f63472d16 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -3,7 +3,7 @@ "icon": "home", "title": "Angular Docs", "menuTitle": "Docs Home", - "banner": "Welcome to Angular in TypeScript! The current Angular 2 release is rc.4. Please consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "Welcome to Angular in TypeScript! The current Angular 2 release is rc.5. Please consult the Change Log about recent enhancements, fixes, and breaking changes." }, "cli-quickstart": { diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 2607a72898..ecfc0e22d6 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -28,14 +28,14 @@ "dynamic-form-deprecated": { "title": "Dynamic Forms", - "intro": "Render dynamic forms with NgFormModel" + "intro": "Render dynamic forms with NgFormModel", + "basics": true, + "hide": true }, "dynamic-form": { "title": "Dynamic Forms", - "intro": "Render dynamic forms with FormGroup", - "basics": true, - "hide": true + "intro": "Render dynamic forms with FormGroup" }, "set-document-title": { diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade index 8860d2bfe9..9145c58b1d 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade @@ -16,13 +16,11 @@ a(id="top") * [Filters/Pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular 2 - * [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular 2. - Also covers modules. + * [Modules/Controllers/Components](#controllers-components) - *modules* are *modules* but different + and *controllers* are *components* in Angular 2. * [Style Sheets](#style-sheets) - more options for CSS in Angular 2. - * [String date pipe](#string-dates) - a tip for displaying string date values. - .l-main-section :marked ## Template Basics @@ -49,7 +47,7 @@ table(width="100%") associated with this template. When using the `controller as` syntax, - the binding is prefixed with the controller alias (`vm`) because we + the binding is prefixed with the controller alias (`vm` or `$ctrl`) because we have to be specific about the source of the binding. td :marked @@ -131,11 +129,15 @@ table(width="100%") td :marked ### Bootstrapping - +makeExample('cb-a1-a2-quick-reference/ts/app/main.1.ts')(format="." ) + +makeExample('cb-a1-a2-quick-reference/ts/app/main.ts','','main.ts')(format="." ) +
    + +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." ) + :marked Angular 2 does not have a bootstrap directive. - We always launch the app in code by explicitly calling a bootstrap function - and passing it the name of the application's module (`AppComponent`). + We always launch the app in code by explicitly bootstrapping the application's root module (`AppModule`) + in `main.ts` + and the application's root component (`AppComponent`) in `app.module.ts`. For more information see [Quick Start](../quickstart.html). tr(style=top) @@ -499,7 +501,7 @@ table(width="100%") ### date +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'date')(format=".") :marked - The Angular 2 `date` pipe is similar. See [note](#string-dates) about string date values. + The Angular 2 `date` pipe is similar. tr(style=top) td @@ -604,7 +606,10 @@ table(width="100%") a(id="controllers-components") .l-main-section :marked - ## Controllers / Components + ## Modules / Controllers / Components + In both Angular 1 and Angular 2, we use Angular modules to + help us organize our application into cohesive blocks of functionality. + In Angular 1, we write the code that provides the model and the methods for the view in a **controller**. In Angular 2, we build a **component**. @@ -647,15 +652,14 @@ table(width="100%") of other modules that this module depends upon. td :marked - ### import - +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'import')(format=".") + ### Angular modules + +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts')(format=".") :marked - Angular 2 does not have its own module system. Instead we use ES 2015 modules. - ES 2015 modules are file based, so each code file is its own module. + Angular 2 modules, defined with the `NgModule` decorator, serve the same purpose: + - `imports`: specifies the list of other modules that this module depends upon + - `declaration`: keeps track of our components, pipes, and directives. - We `import` what we need from the module files. - - For more information on modules see [Architecture Overview](../guide/architecture.html#module). + For more information on modules see [Angular Modules](../guide/ngmodule.html). tr(style=top) td :marked @@ -773,23 +777,3 @@ table(width="100%") other parts of the application. :marked [Back to top](#top) - -a(id="string-dates") -.l-main-section -:marked - ## Appendix: String dates - - Currently the Angular 2 `date` pipe does not process string dates such as - "2015-12-19T00:00:00". - - As a work around, subclass the Angular `DatePipe` with a version that can convert strings - and substitute that pipe in the HTML: - -+makeExample('cb-a1-a2-quick-reference/ts/app/date.pipe.ts', 'date-pipe', 'date.pipe.ts')(format=".") -:marked - Then import and declare that pipe in the `@Component` metadata `pipes` array: -:marked -+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'date-pipe')(format=".") - -:marked - [Back to top](#top) diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade index 352ecd3c2b..acfb42c1f5 100644 --- a/public/docs/ts/latest/cookbook/dependency-injection.jade +++ b/public/docs/ts/latest/cookbook/dependency-injection.jade @@ -80,7 +80,7 @@ include ../_util-fns .l-main-section :marked ## External module configuration - We can register _certain_ module providers when bootstrapping rather than in the root application component. + We can register _certain_ module providers in the `NgModule` rather than in the root application component. We'd do this when we expect to select or configure external modules that support our application but (a) aren't conceptually part of the application and (b) that we could change later without @@ -95,10 +95,10 @@ include ../_util-fns We'll switch to the real backend in production. The application shouldn't know or care one way or the other. - See both examples in the following `main.ts` - where we list their service providers in an array in the second parameter of the `bootstrap` method. + See both examples in the following `app.module.ts` + where we list their service providers in the `providers` array of the `NgModule` (AppModule). -+makeExample('cb-dependency-injection/ts/app/main.ts','bootstrap','app/main.ts')(format='.') ++makeExample('cb-dependency-injection/ts/app/app.module.ts','bootstrap','app/app.module.ts')(format='.') a(id="injectable") a(id="nested-dependencies") @@ -872,33 +872,12 @@ a(id="forwardref") The *Parent Finder* sample is full of circular class references that are impossible to break. - In the [*Alex/Cathy* example](#known-parent) above: - - * the `AlexComponent` lists the `CathyComponent` in its component metadata `directives` array - so it can display *Cathy* in its template. - - * the `CathyComponent` constructor injects the parent `AlexComponent` which means that the `alex` parameter - of its constructor has the `AlexComponent` type. - - *Alex* refers to *Cathy* and *Cathy* refers to *Alex*. We're stuck. We must define one of them first. - - We defined *Alex* first and built its `C_DIRECTIVES` array with a forward reference to *Cathy*: -+makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','C_DIRECTIVES','parent-finder.component.ts (C_DIRECTIVES)')(format='.') :marked -.l-sub-section - :marked - Defining *Alex* and *Cathy* in separate files won't help. - *Alex* would have to import *Cathy* and *Cathy* would have to import *Alex*. - - We *had* to define *Alex* first because, - while we can add `forwardRef(CathyComponent)` to *Alex*'s `directives` array, - we can't write `public alex: forwardRef(AlexComponent))` in *Cathy*'s constructor. -:marked - We face a similar dilemma when a class makes *a reference to itself* + We face this dilemma when a class makes *a reference to itself* as does the `AlexComponent` in its `providers` array. The `providers` array is a property of the `@Component` decorator function which must appear *above* the class definition. - Again we break the circularity with `forwardRef`: + We break the circularity with `forwardRef`: +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-providers','parent-finder.component.ts (AlexComponent providers)')(format='.') :marked diff --git a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade b/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade index 453b46bc7d..029c7c7743 100644 --- a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade +++ b/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade @@ -2,7 +2,7 @@ include ../_util-fns .alert.is-important :marked - This cookbook is using the deprecated forms API. + This cookbook is using the deprecated forms API, which is disabled as of RC5, thus this sample only works up to RC4. We have created a new version of this cookbook using the new API here. diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade index 2c865b64cf..705fadc488 100644 --- a/public/docs/ts/latest/cookbook/dynamic-form.jade +++ b/public/docs/ts/latest/cookbook/dynamic-form.jade @@ -1,11 +1,5 @@ include ../_util-fns -.alert.is-important - :marked - This cookbook uses the new forms API. - - The old forms API is deprecated, but we still maintain a separate version of the cookbook using the deprecated forms API here. - :marked We can't always justify the cost and time to build handcrafted forms, especially if we'll need a great number of them, they're similar to each other, and they change frequently @@ -44,16 +38,21 @@ include ../_util-fns :marked ## Bootstrap - During bootstrap we have to register the new forms module by calling `provideForms()` and pass the result to the provider array. + We start by creating an `NgModule` called `AppModule`. -+makeExample('cb-dynamic-form/ts/app/main.ts','','app/main.ts') - -:marked - The old forms API is going through a deprecation phase. During this transition Angular is supporting both form modules. - - To remind us that the old API is deprecated, Angular will print a warning message to the console. + In our example we will be using Reactive Forms. - Since we are converting to the new API, and no longer need the old API, we call `disableDeprecatedForms()` to disable the old form functionality and the warning message. + Reactive Forms belongs to a different `NgModule` called `ReactiveFormsModule`, so in order to access any Reactive Forms directives, we have to import `ReactiveFormsModule` from `AppModule`. + + We bootstrap our `AppModule` in main.ts. + ++makeTabs( + `cb-dynamic-form/ts/app/app.module.ts, + cb-dynamic-form/ts/app/main.ts`, + null, + `app.module.ts, + main.ts` +) .l-main-section @@ -121,9 +120,7 @@ include ../_util-fns In both components we're relying on Angular's **formGroup** to connect the template HTML to the underlying control objects, populated from the question model with display and validation rules. - `formControlName` and `formGroup` have to be registered as directives before we can use them in our templates. - - It turns out we get access to all form directives by importing and registering `REACTIVE_FORM_DIRECTIVES`. + `formControlName` and `formGroup` are directives defined in `ReactiveFormsModule`. Our templates can can access these directives directly since we imported `ReactiveFormsModule` from `AppModule`. :marked diff --git a/public/docs/ts/latest/cookbook/set-document-title.jade b/public/docs/ts/latest/cookbook/set-document-title.jade index f25fe798f8..60fa73a49b 100644 --- a/public/docs/ts/latest/cookbook/set-document-title.jade +++ b/public/docs/ts/latest/cookbook/set-document-title.jade @@ -38,18 +38,8 @@ code-example(format=''). for getting and setting the current HTML document title: * `getTitle() : string` — Gets the title of the current HTML document. - * `setTitle( newTitle : string )` — Sets the title of the current HTML document. - - While this class is part of the Browser platform package, it is *not part of the default Browser - platform providers* that Angular loads automatically. - This means as we bootstrap our application using the Browser platform `boostrap()` - function, we'll also have to include `Title` service explicitly as one of the bootstrap providers: - -+makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.') -:marked - Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our - custom application components and services. - + * `setTitle( newTitle : string )` — Sets the title of the current HTML document. + Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it: +makeExample( "cb-set-document-title/ts/app/app.component.ts", "class", "app/app.component.ts (class)" )(format='.') @@ -63,9 +53,10 @@ figure.image-display +makeTabs( `cb-set-document-title/ts/app/main.ts, - cb-set-document-title/ts/app/app.component.ts`, - '', - 'app/main.ts, app/app.component.ts' ) + cb-set-document-title/ts/app/app.module.ts, + cb-set-document-title/ts/app/app.component.ts`, + '', + 'app/main.ts, app/app.module.ts, app/app.component.ts' ) // Todo: tie this back to the router so we can see how to use this Title service to (re)set the title diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index 50c6100cda..3342e16d0f 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -21,6 +21,19 @@ include _util-fns // #enddocregion a1 .l-main-section + +:marked + ## Angular Module +.l-sub-section + :marked + Helps us organize an application into cohesive blocks of functionality. + An Angular module identifies the components, directives, and pipes that are used by the application + along with the list of external Angular modules that the application needs, such as `FormsModule`. + + Every Angular application has an application root module class. By convention the class is + called `AppModule` and resides in a file named `app.component.ts`. + + See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples. :marked ## Annotation .l-sub-section @@ -50,10 +63,10 @@ include _util-fns ## Barrel .l-sub-section :marked - A barrel is a way to *rollup exports* from several modules into a single convenience module. - The barrel itself is a module file that re-exports *selected* exports of other modules. + A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module. + The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules. - Imagine three modules in a `heroes` folder: + Imagine three ES2015 modules in a `heroes` folder: code-example. // heroes/hero.component.ts export class HeroComponent {} @@ -81,12 +94,17 @@ include _util-fns import { Hero, HeroService } from '../heroes'; // index is implied :marked The Angular [scoped packages](#scoped-package) each have a barrel named `index`. + // #enddocregion b-c :marked That's why we can write this: +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '') // #docregion b-c +.alert.is-important + :marked + Note that you can often achieve this same goal using [Angular modules](#angular-module) instead. + :marked ## Binding .l-sub-section @@ -102,10 +120,9 @@ include _util-fns ## Bootstrap .l-sub-section :marked - We launch an Angular application by "bootstrapping" it with the `bootstrap` method. - The `bootstrap` method identifies an application's top level "root" [Component](#component) - and optionally registers service [providers](#provider) with the - [dependency injection system](#dependency-injection). + We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). + The bootstraping identifies an application's top level "root" [Component](#component), which is the first + component that is loaded for the application. For more information see the [QuickStart](/docs/ts/latest/quickstart.html). One can bootstrap multiple apps in the same `index.html`, each with its own top level root. @@ -271,9 +288,7 @@ include _util-fns Registering providers is a critical preparatory step. Angular registers some of its own providers with every injector. - We can register our own providers. Quite often the best time to register a `Provider` - is when we [bootstrap](#bootstrap) the application. - There are other opportunities to register as well. + We can register our own providers. Learn more in the [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html) chapter. :marked @@ -450,6 +465,14 @@ include _util-fns :marked ## Module .l-sub-section + + .alert.is-important + :marked + In Angular, there are two types of modules: + - [Angular modules](#angular-module). + See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples. + - ES2015 modules as described in this section. + :marked Angular apps are modular. @@ -487,6 +510,17 @@ include _util-fns .l-main-section +:marked + ## Observable +.l-sub-section + :marked + We can think of an observable as an array whose items arrive asynchronously over time. + Observables help us manage asynchronous data, such as data coming from a backend service. + Observables are used within Angular itself, including Angular's event system and its http client service. + + To use observables, Angular uses a third-party library called Reactive Extensions (RxJS). + Observables are a proposed feature for ES 2016, the next version of JavaScript. + :marked ## Output .l-sub-section @@ -505,7 +539,7 @@ include _util-fns .l-sub-section :marked The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter. - Class names are typically spelled in PascalCase. Examples include: `Person` and `Customer`. + Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`. This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase). In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*. @@ -516,7 +550,7 @@ include _util-fns :marked An Angular pipe is a function that transforms input values to output values for display in a [view](#view). We use the `#{atSym}Pipe` !{decorator} - to associate the pipe function with a name. We then can use that + to associate the pipe function with a name. We can then use that name in our HTML to declaratively transform values on screen. Here's an example that uses the built-in `currency` pipe to display @@ -543,6 +577,23 @@ include _util-fns .l-main-section + +:marked + ## Reactive Forms +.l-sub-section + :marked + A technique for building Angular forms through code in a component. + The alternate technique is [Template-Driven Forms](#template-driven-forms). + + When building reactive forms: + - The "source of truth" is the component. The validation is defined using code in the component. + - Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`. + - The template input elements do *not* use `ngModel`. + - The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`. + + Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation + of form controls. + :marked ## Router .l-sub-section @@ -555,18 +606,32 @@ include _util-fns The Angular [Component Router](/docs/ts/latest/guide/router.html) is a richly featured mechanism for configuring and managing the entire view navigation process including the creation and destruction of views. + + In most cases, components becomes attached to a [router](#router) by means + of a `RouterConfig` that defines routes to views. + + A [routing component's](#routing-component) template has a `RouterOutlet` element where it can display views produced by the router. + + Other views in the application likely have anchor tags or buttons with `RouterLink` directives that users can click to navigate. + + See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more. + +:marked + ## RouterModule +.l-sub-section + :marked + A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views. + + See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more. + + :marked ## Routing Component .l-sub-section :marked - A [Component](#component) with an attached router. + An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations. - In most cases, the component became attached to a [router](#router) by means - of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component. - - The component's template has a `RouterOutlet` element where it can display views produced by the router. - - It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate. + See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more. .l-main-section @@ -587,6 +652,23 @@ include _util-fns +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '') // #docregion n-s-2 +:marked + ## Service +.l-sub-section + :marked + Components are great and all … but what do we do with data or logic that are not associated + with a specific view or that we want to share across components? We build services! + + Applications often require services such as a hero data service or a logging service. + Our components depend on these services to do the heavy lifting. + + A service is a class with a focused purpose. + We often create a service to implement features that are + independent from any specific view, + provide share data or logic across components, or encapsulate external interactions. + + See the [Services](/docs/ts/latest/tutorial/toh-pt4.html) chapter of the tutorial to learn more. + :marked ## Structural Directive .l-sub-section @@ -597,6 +679,8 @@ include _util-fns The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are good examples in this category. + + See the [Structural Directives](/docs/ts/latest/guide/structural-directives.html) chapter to learn more. // #enddocregion n-s-2 // #docregion t1 @@ -612,11 +696,31 @@ include _util-fns We write templates in a special [Template Syntax](/docs/ts/latest/guide/template-syntax.html). + +:marked + ## Template-Driven Forms +.l-sub-section + :marked + A technique for building Angular forms using HTML forms and input elements in the view. + The alternate technique is [Reactive Forms](#reactive-forms). + + When building template-driven forms: + - The "source of truth" is the template. The validation is defined using attributes on the individual input elements. + - [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements. + - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and + two-way binding set up. + - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`. + + Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios. + + Learn how to build template-driven forms + in the [Forms](/docs/ts/latest/guide/forms.html) chapter. + :marked ## Template Expression .l-sub-section :marked - An expression in a JavaScript-like syntax that Angular evaluates within + An expression is a JavaScript-like syntax that Angular evaluates within a [data binding](#data-binding). Learn how to write template expressions in the [Template Syntax](/docs/ts/latest/guide/template-syntax.html#template-expressions) chapter. diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index 3bc69e1c15..b59ef46195 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -33,15 +33,15 @@ "title": "Forms", "intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.", "nextable": true, - "basics": true, - "hide": true + "basics": true }, "forms-deprecated": { "title": "Forms", "intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.", "nextable": true, - "basics": true + "basics": true, + "hide": true }, "dependency-injection": { diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index 3510c864bb..a13f303e0d 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -12,10 +12,11 @@ block angular-parts The framework consists of several cooperating libraries, some of them core and some optional. :marked - With Angular, we write applications by composing HTML *templates* with Angularized-markup, + We write Angular applications by composing HTML *templates* with Angularized-markup, writing *component* classes to manage those templates, adding application logic in *services*, - and handing the top root component to Angular's *bootstrapper*. - + and boxing components and services in *modules*. + + Then we launch the app by *bootstrapping* the top _root module_. Angular takes over, presenting our application content in a browser and responding to user interactions according to the instructions we provided. @@ -49,118 +50,114 @@ figure figure img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" ) :marked - Angular apps are modular. + Angular apps are modular and Angular has its own modularity system called _Angular Modules_ + or, occasionally, _NgModules_. - In general we assemble our application from many **modules**. + _Angular Modules_ are a big deal. + We can only introduce them there; the [Angular Modules](ngmodule.html) chapter covers them in depth. - A typical module is a cohesive block of code dedicated to a single purpose. - A module **exports** something of value in that code, typically one thing such as a class. -

    - -block modules-in-dart - //- N/A - -block modules-are-optional - .l-sub-section - :marked - ### Modules are optional - We highly recommend modular design. TypeScript has great support for ES2015 module syntax and our chapters assume we're taking a modular - approach using that syntax. That's why we list *Module* among the basic building blocks. - - Angular itself doesn't require a modular approach nor this particular syntax. Don't use it if you don't want it. - Each chapter has plenty to offer after you steer clear of the `import` and `export` statements. - - Find setup and organization clues in the JavaScript track (select it from the combo-box at the top of this page) - which demonstrates Angular 2 development with plain old JavaScript and no module system. - -- var _app_comp_filename = _docsFor == 'dart' ? 'app_component.dart' : 'app.component.ts'; +

    :marked - Perhaps the first module we meet is a module that exports a *component* class. - The component is one of the basic Angular blocks, we write a lot of them, - and we'll talk about components in the next segment. For the moment it is enough to know that a - component class is the kind of thing we'd export from a module. + Every Angular app has at least one module, the _root module_, conventionally named `AppModule`. - Most applications have an `AppComponent`. By convention, we'll find it in a file named `!{_app_comp_filename}`. - Look inside such a file and we'll see a declaration such as this one. + While the _root_ module may be the only module in a small application, most apps have many more + _feature_ modules, each a cohesive block of code dedicated to an application domain, + a workflow, or a closely-related set of capabilities. -+makeExcerpt('app/app.component.ts ()', 'export') - -block export-qualifier + An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` decorator. +.l-sub-section :marked - The `export` statement tells TypeScript that this is a module whose - `AppComponent` class is public and accessible to other modules of the application. - + Decorators are functions that modify JavaScript classes. + Angular has many decorators that attach metadata to classes so that it knows + what those classes mean and how they should work. + + Learn more about decorators on the web. :marked - When we need a reference to the `AppComponent`, we **import** it like this: + `NgModule` is a decorator function that takes a single metadata object whose properties describe the module. + The most important are + * `declarations` - the _view classes_ that belong to this module. + Angular has three kinds of view classes: [components](#components), [directives](#directives) and [pipes](pipes.html). -+makeExcerpt('app/main.ts', 'import') + * `exports` - subset of declarations that should be visible and usable in the component [templates](#templates) of other modules. -block ts-import + * `imports` - other modules whose exported classes are needed by component templates declared in _this_ module. + + * `providers` creators of [services](#services) that this module contributes to + the global collection of services; they become accessible in all parts of the app. + + * `bootstrap` - identifies the main application view, called the _root component_, + that hosts all other app views. Only the _root module_ should set this `bootstrap` property. + + Here's a simple root module: ++makeExample('app/mini-app.ts', 'module', 'app/app.module.ts')(format='.') + +.l-sub-section :marked - The `import` statement tells the system it can get an `AppComponent` from a module named `app.component` - located in a neighboring file. - The **module name** (AKA module id) is often the same as the filename without its extension. + The `export` of `AppComponent` is just for show. + A root module has no reason to export anything because ... it's the root. + We don't expect other modules to import the root module. + + But if one did, it could use the `AppComponent` in its component templates. +:marked + We launch an application by _bootstrapping_ its root module. + During development we're likely to bootstrap the `AppModule` in a `main.ts` file like this one. + ++makeExample('app/main.ts', '', 'app/main.ts')(format='.') :marked - ### Libraries + ### Angular Modules vs. JavaScript Modules + + The Angular module — a class decorated with `@NgModule` — is a fundamental feature of Angular itself. + + JavaScript also has its own module system for managing collections of JavaScript objects. + It's completely different and unrelated to the Angular module system. + + In JavaScript each _file_ is a module and all objects defined in the file belong to that module. + The module declares some objects to be public by marking them with the `export` key word. + Other JavaScript modules use *import statements* to access public objects from other modules. + ++makeExample('app/app.module.ts', 'imports', '')(format='.') ++makeExample('app/app.module.ts', 'export', '')(format='.') + +.l-sub-section + :marked + Learn more about the JavaScript module system on the web. +:marked + These are two different and _complementary_ module systems. We use them both to write our apps. + + ### Angular Libraries figure img(src="/resources/images/devguide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" ) -block angular-library-modules - :marked - Some modules are _libraries_ of other modules. - Angular itself ships as a collection of library modules within several npm packages. - Their names begin with the `!{_at_angular}` prefix. - - Each Angular library contains a [barrel](../glossary.html#barrel) module - that is actually a public façade over several logically-related private modules. - :marked - `!{_at_angular}/core` is the primary Angular library from which we get most of what we need. -
    + Angular itself ships as a collection of JavaScript modules. We can think of them as library modules. - There are other important Angular libraries too, such as `!{_at_angular}/common`, - `!{_at_angular}/http` and `!{_at_angular}/router`. - We import what we need from an Angular !{_library_module}. - -block angular-imports - :marked - For example, we import the Angular **`Component` *function*** from `@angular/core` like this: - +makeExcerpt('app/app.component.ts', 'import') - :marked - Compare that syntax to our previous import of `AppComponent`. - +makeExcerpt('app/main.ts', 'import') - - :marked - Notice the difference? - In the first case, when importing from an Angular library module, - the import statement refers to the bare module name, `@angular/core`, *without a path prefix*. - - When we import from one of *our* own files, we prefix the module name with the file path. - In this example we specify a relative file path (`./`). That means the - source module is in the same folder (`./`) as the module importing it. - We could path up and around the application folder structure if the source module were somewhere else. - .l-sub-section - :marked - We import and export in the ECMAScript 2015 (ES2015) module syntax. - Learn more about that syntax [here](http://www.2ality.com/2014/09/es6-modules-final.html) - and many other places on the web. - - The infrastructure *behind* module loading and importing is an important subject. - But it's a subject outside the scope of this introduction to Angular. - While we're focused on our application, *import* and *export* - is about all we need to know. - -- var _export = _docsFor == 'dart' ? 'publicly declare' : 'export'; -- var _declare = _docsFor == 'dart' ? 'declare' : 'export'; + Each Angular library name begin with the `!{_at_angular}` prefix. + + We install them with the **npm** package manager and import parts of them with JavaScript `import` statements. +

    :marked - The key take-aways are: - * Angular apps are composed of modules. - * Modules !{_export} things — classes, function, values — that other modules import. - * We prefer to write our application as a collection of modules, each module exporting one thing. + For example, we import Angular's `Component` decorator from the `@angular/core` library like this: ++makeExample('app/app.component.ts', 'import', '')(format='.') +:marked + We also import Angular _modules_ from Angular _libraries_ using JavaScript import statements: ++makeExample('app/mini-app.ts', 'import-browser-module', '')(format='.') +:marked + Our application module needs material from within that `BrowserModule` + so we add it to the `@NgModule` metadata `imports` like this. ++makeExample('app/mini-app.ts', 'ngmodule-imports', '')(format='.') +:marked + We're using both the Angular and JavaScript module systems _together_. - The first module we write will most likely !{_declare} a component. + It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports". + Hang in there. The confusion will yield to clarity with time and experience. + +.l-sub-section + :marked + Learn more in the [Angular Modules](ngmodule.html) chapter. + +.l-hr .l-main-section :marked @@ -192,6 +189,8 @@ figure For the moment, have faith that Angular will call the constructor and deliver an appropriate `HeroService` when we need it. +.l-hr + .l-main-section :marked ## Templates @@ -231,6 +230,8 @@ figure In this manner we'll compose complex component trees to build out our richly featured application.
    +.l-hr + .l-main-section :marked ## Metadata @@ -259,7 +260,6 @@ figure block ts-decorator :marked - A decorator is a function. Decorators often have a configuration parameter. The `@Component` decorator takes a required configuration object with the information Angular needs to create and present the component and its view. @@ -299,6 +299,8 @@ figure The architectural takeaway is that we must add metadata to our code so that Angular knows what to do. +.l-hr + .l-main-section :marked ## Data binding @@ -357,6 +359,8 @@ figure Data binding is also important for communication between parent and child components.
    +.l-hr + .l-main-section :marked ## Directives @@ -417,6 +421,8 @@ block dart-bool `HeroListComponent` are one kind of custom directive. +.l-hr + .l-main-section :marked ## Services @@ -469,6 +475,8 @@ figure Angular does help us *follow* these principles by making it easy to factor our application logic into services and make those services available to components through *dependency injection*. +.l-hr + .l-main-section :marked ## Dependency injection @@ -503,18 +511,19 @@ figure If the injector doesn't have a `HeroService`, how does it know how to make one? In brief, we must have previously registered a **provider** of the `HeroService` with the injector. - A provider is something that can create or return a service, typically the service class itself. + A provider is something that can create or return a service, typically the service class itself. - We can register providers at any level of the application component tree. - We often do so at the root when we bootstrap the application so that - the same instance of a service is available everywhere. + We can register providers in modules or in components. -+makeExcerpt('app/main.ts', 'bootstrap') + We often add providers to the [root module](#module) so that + the same instance of a service is available everywhere. + ++makeExample('app/app.module.ts', 'providers', 'app/app.module.ts (module providers)')(format='.') :marked - Alternatively, we might register at a component level, in the providers property of the `@Component` metadata: + Alternatively, we might register at a component level in the `providers` property of the `@Component` metadata: -+makeExcerpt('app/hero-list.component.ts', 'providers') ++makeExample('app/hero-list.component.ts', 'providers', 'app/hero-list.component.ts (component providers)')(format='.') :marked Registering at a component level means we get a new instance of the @@ -535,6 +544,8 @@ figure * We register *providers* with injectors. +.l-hr + .l-main-section :marked ## Wrap up @@ -560,15 +571,10 @@ figure > [**Animations**](animations.html): The animation library makes it easy for developers to animate component behavior without deep knowledge of animation techniques or CSS. - > **Bootstrap**: A method to configure and launch the root application component. - > **Change detection**: Learn how Angular decides that a component property value has changed and when to update the screen. Learn how it uses **zones** to intercept asynchronous activity and run its change detection strategies. - > **Component router**: With the component Router service, users can navigate a multi-screen application - in a familiar web browsing style using URLs. - > **Events**: The DOM raises events. So can components and services. Angular offers mechanisms for publishing and subscribing to events. diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index e6f0db9472..b27047af9c 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/public/docs/ts/latest/guide/attribute-directives.jade @@ -126,10 +126,11 @@ p Meanwhile, we'll revise the `AppComponent` to reference this template. +makeExample('attribute-directives/ts/app/app.component.ts',null,'app/app.component.ts') :marked - We've added an `import` statement to fetch the 'Highlight' directive and, - added that class to a `directives` component metadata so that Angular + We'll add an `import` statement to fetch the 'Highlight' directive and, + added that class to the `declarations` NgModule metadata so that Angular will recognize our directive when it encounters `myHighlight` in the template. - ++makeExample('attribute-directives/ts/app/app.module.ts',null,'app/app.module.ts') +:marked We run the app and see that our directive highlights the paragraph text. figure.image-display @@ -138,15 +139,15 @@ figure.image-display :marked ### Your directive isn't working? - Did you remember to set the `directives` attribute of `@Component`? It is easy to forget! + Did you remember to add the directive to the the `declarations` attribute of `@NgModule`? It is easy to forget! Open the console in the browser tools and look for an error like this: code-example(format="nocode"). EXCEPTION: Template parse errors: - Can't bind to 'myHighlight' since it isn't a known native property + Can't bind to 'myHighlight' since it isn't a known property of 'p'. :marked Angular detects that we're trying to bind to *something* but it doesn't know what. - We have to tell it by listing `HighlightDirective` in the `directives` metadata array. + We have to tell it by listing `HighlightDirective` in the `declarations` metadata array. :marked Let's recap what happened. @@ -318,6 +319,7 @@ figure.image-display `attribute-directives/ts/app/app.component.ts, attribute-directives/ts/app/app.component.html, attribute-directives/ts/app/highlight.directive.ts, + attribute-directives/ts/app/app.module.ts, attribute-directives/ts/app/main.ts, attribute-directives/ts/index.html `, @@ -325,6 +327,7 @@ figure.image-display `app.component.ts, app.component.html, highlight.directive.ts, + app.module.ts, main.ts, index.html `) diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade index 2ad5b7a7ed..8755cbec03 100644 --- a/public/docs/ts/latest/guide/dependency-injection.jade +++ b/public/docs/ts/latest/guide/dependency-injection.jade @@ -253,37 +253,37 @@ block ctor-syntax We do have to configure the injector by registering the **providers** that create the services our application requires. We'll explain what [providers](#providers) are later in this chapter. - Before we do, let's see an example of provider registration during bootstrapping: -+makeExample('dependency-injection/ts/app/main.1.ts', 'bootstrap-discouraged')(format='.') + We can either register a provider within an [NgModule](ngmodule.html) or in application components -:marked - The injector now knows about our `HeroService`. - An instance of our `HeroService` will be available for injection across our entire application. + ### Registering providers in an NgModule + Here's our AppModule where we register a `Logger`, an `UserService`, and an `APP_CONFIG` provider. - Of course we can't help wondering about that comment telling us not to do it this way. - It *will* work. It's just not a best practice. - The bootstrap provider option is intended for configuring and overriding Angular's own - preregistered services, such as its routing support. - - The preferred approach is to register application providers in application components. +- var stylePattern = { otl: /(providers)/ }; ++makeExample('dependency-injection/ts/app/app.module.ts', 'ngmodule','app/app.module.ts', stylePattern)(format='.') + :marked ### Registering providers in a component Here's a revised `HeroesComponent` that registers the `HeroService`. -- var stylePattern = { otl: /(providers:.*),/ }; +makeExample('dependency-injection/ts/app/heroes/heroes.component.1.ts', 'full','app/heroes/heroes.component.ts', stylePattern)(format='.') :marked - Look closely at the `providers` part of the `@Component` metadata. - An instance of the `HeroService` is now available for injection in this `HeroesComponent` - and all of its child components. + ### When to use the NgModule and when an application component? + On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider + registered within an NgModule will be accessible in the entire application. - The `HeroesComponent` itself doesn't happen to need the `HeroService`. - But its child `HeroListComponent` does, so we head there next. + On the other hand, a provider registered in an application component is available only on that component and all its children. + + We want the `APP_CONFIG` service to be available all across the application, but a `HeroService` is only used within the *Heroes* + feature area — and nowhere else. — + +.l-sub-section + :marked + Read also **Should I add providers to the root AppModule or the root AppComponent?** at the [NgModule](ngmodule.html#q-root-component-or-module) chapter. :marked ### Preparing the HeroListComponent for injection @@ -470,9 +470,9 @@ block real-logger :marked We're likely to need the same logger service everywhere in our application, so we put it in the project's `#{_appDir}` folder, and - we register it in the `providers` #{_array} of the metadata for our application root component, `AppComponent`. + we register it in the `providers` #{_array} of the metadata for our application module, `AppModule`. -+makeExcerpt('app/providers.component.ts','providers-logger','app/app.component.ts (excerpt)') ++makeExcerpt('app/providers.component.ts','providers-logger','app/app.module.ts (excerpt)') :marked If we forget to register the logger, Angular throws an exception when it first looks for the logger: @@ -497,7 +497,7 @@ code-example(format="nocode"). We must register a service *provider* with the injector, or it won't know how to create the service. - Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppComponent` like this: + Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppModule` like this: +makeExample('dependency-injection/ts/app/providers.component.ts','providers-logger') @@ -801,9 +801,9 @@ block what-should-we-use-as-token block dart-map-alternative :marked - Or we can provide and inject the configuration object in our top-level `AppComponent`. + Or we can provide and inject the configuration object in an ngModule like `AppModule`. - +makeExcerpt('app/app.component.ts','providers') + +makeExcerpt('app/app.module.ts','ngmodule-providers') #optional :marked diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade index 5fbf0e7ff7..376c2d254c 100644 --- a/public/docs/ts/latest/guide/displaying-data.jade +++ b/public/docs/ts/latest/guide/displaying-data.jade @@ -278,6 +278,7 @@ block hero-class block final-code +makeTabs(`displaying-data/ts/app/app.component.ts, displaying-data/ts/app/hero.ts, + displaying-data/ts/app/app.module.ts, displaying-data/ts/app/main.ts`, - 'final,,', - 'app/app.component.ts, app/hero.ts, main.ts') + 'final,,,', + 'app/app.component.ts, app/hero.ts, app.module.ts, main.ts') diff --git a/public/docs/ts/latest/guide/forms-deprecated.jade b/public/docs/ts/latest/guide/forms-deprecated.jade index f29cb3087a..ad2d70a669 100644 --- a/public/docs/ts/latest/guide/forms-deprecated.jade +++ b/public/docs/ts/latest/guide/forms-deprecated.jade @@ -2,7 +2,7 @@ include ../_util-fns .alert.is-important :marked - This guide is using the deprecated forms API. + This guide is using the deprecated forms API, which is disabled as of RC5, thus this sample only works up to RC4. We have created a new version using the new API here. diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index 90facf5e1f..dbe9b8ded6 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -1,15 +1,7 @@ include ../_util-fns -.alert.is-important - :marked - This guide is using the new forms API. To use this API, you must opt in by adding special - providers to your bootstrap file (see the Bootstrap seection below). - - The old forms API is deprecated, but we still maintain a separate version of the guide using - the deprecated forms API here. - :marked - We’ve all used a form to login, submit a help request, place an order, book a flight, + We’ve all used a form to log in, submit a help request, place an order, book a flight, schedule a meeting and perform countless other data entry tasks. Forms are the mainstay of business applications. @@ -23,38 +15,22 @@ include ../_util-fns **two-way data binding, change tracking, validation, and error handling** ... which we shall cover in this chapter on Angular forms. - We will build a simple form from scratch, one step at a time. Along the way we'll learn + We will build a simple form from scratch, one step at a time. Along the way we'll learn how to - - to build an Angular form with a component and template + - build an Angular form with a component and template - - two-way data binding with `[(ngModel)]` syntax for reading and writing values to input controls + - two-way data bind with `[(ngModel)]` syntax for reading and writing values to input controls - - using `ngModel` in combination with a form lets us track the change state and validity of form controls + - track the change state and validity of form controls using `ngModel` in combination with a form - - special CSS classes that follow the state of the controls and can be used to provide strong visual feedback + - provide strong visual feedback using special CSS classes that track the state of the controls - - displaying validation errors to users and enable/disable form controls + - display validation errors to users and enable/disable form controls - - sharing information among controls with template reference variables + - use [template reference variables](./template-syntax.html#ref-vars) for sharing information among HTML elements Live Example -.l-main-section -:marked - ## Bootstrap - - We start by showing how to bootstrap the application and add the necessary dependencies to use forms. - - During bootstrap we have to register the new forms module by calling `provideForms()` and pass the result to the provider array. -+makeExample('forms/ts/app/main.ts','','app/main.ts') - -:marked - The old forms API is going through a deprecation phase. During this transition Angular is supporting both form modules. - - To remind us that the old API is deprecated, Angular will print a warning message to the console. - - Since we are converting to the new API, and no longer need the old API, we call `disableDeprecatedForms()` to disable the old form functionality and the warning message. - .l-main-section :marked ## Template-Driven Forms @@ -101,7 +77,7 @@ figure.image-display 1. Create the component that controls the form 1. Create a template with the initial form layout 1. Bind data properties to each form input control with the `ngModel` two-way data binding syntax - 1. Add the **#name** attribute to each form input control + 1. Add the `name` attribute to each form input control 1. Add custom CSS to provide visual feedback 1. Show and hide validation error messages 1. Handle form submission with **ngSubmit** @@ -137,7 +113,8 @@ include ../_quickstart_repo We can create a new hero like this: code-example(format=""). let myHero = new Hero(42, 'SkyDog', - 'Fetch any object at any distance', 'Leslie Rollover'); + 'Fetch any object at any distance', + 'Leslie Rollover'); console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog" :marked @@ -156,13 +133,15 @@ code-example(format=""). :marked There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before. - Understanding this component requires only the Angular 2 concepts we’ve learned in previous chapters + Understanding this component requires only the Angular concepts we’ve learned in previous chapters 1. We import the `Component` decorator from the Angular library as we usually do. + 1. We import the `Hero` model we just created. + 1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `` tag. - 1. The `templateUrl` property points to a separate file for template HTML called `hero-form.component.html`. + 1. The `templateUrl` property points to a separate file for the template HTML called `hero-form.component.html`. 1. We defined dummy data for `model` and `powers` as befits a demo. Down the road, we can inject a data service to get and save real data @@ -182,7 +161,38 @@ code-example(format=""). We made a good choice to put the HTML template elsewhere. We'll write that template in a moment. Before we do, we'll take a step back - and revise the `app.component.ts` to make use of our new `HeroFormComponent`. + and revise the `app.module.ts` and `app.component.ts` to make use of our new `HeroFormComponent`. + +.l-main-section +:marked + ## Revise the *app.module.ts* + + `app.module.ts` defines the application's root module. In it we identify the external modules we'll use in our application + and declare the components that belong to this module, such as our `HeroFormComponent`. + + Because template-driven forms are in their own module, we need to add the `FormsModule` to the array of + `imports` for our application module before we can use forms. + + Replace the contents of the "QuickStart" version with the following: ++makeExample('forms/ts/app/app.module.ts', null, 'app/app.module.ts') + +:marked +.l-sub-section + :marked + There are three changes: + + 1. We import `FormsModule` and our new `HeroFormComponent`. + + 1. We add the `FormsModule` to the list of `imports` defined in the `ngModule` decorator. This gives our application + access to all of the template-driven forms features, including `ngModel`. + + 1. We add the `HeroFormComponent` to the list of `declarations` defined in the `ngModule` decorator. This makes + the `HeroFormComponent` component visible throughout this module. + +.alert.is-important + :marked + If a component, directive, or pipe belongs to a module in the `imports` array, ​_DON'T_​ declare it in the `declarations` array. + If you wrote it and it should belong to this module, ​_DO_​ declare it in the `declarations` array. .l-main-section :marked @@ -196,14 +206,10 @@ code-example(format=""). :marked .l-sub-section :marked - There are only three changes: - - 1. We import the new `HeroFormComponent`. + There is only one changes: 1. The `template` is simply the new element tag identified by the component's `selector` property. - - 1. The `directives` array tells Angular that our template depends upon the `HeroFormComponent` - which is itself a Directive (as are all Components). + This will display the hero form when the application component is loaded. .l-main-section :marked @@ -220,11 +226,11 @@ code-example(format=""). The *Name* `` control has the HTML5 `required` attribute; the *Alter Ego* `` control does not because `alterEgo` is optional. - We've got a *Submit* button at the bottom with some classes on it. + We've got a *Submit* button at the bottom with some classes on it for styling. **We are not using Angular yet**. There are no bindings. No extra directives. Just layout. - The `container`,`form-group`, `form-control`, and `btn` classes + The `container`, `form-group`, `form-control`, and `btn` classes come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic. We're using Bootstrap to gussy up our form. Hey, what's a form without a little style! @@ -295,7 +301,6 @@ figure.image-display so we can see what we're doing. We left ourselves a note to throw it away when we're done. - :marked Focus on the binding syntax: `[(ngModel)]="..."`. @@ -309,18 +314,33 @@ figure.image-display The diagnostic is evidence that we really are flowing values from the input box to the model and back again. **That's two-way data binding!** - Notice that we also added a `name` attribute to our `` tag. This is a requirement when using `[(ngModel)]` in combination with a form, so that we can easily refer to it in the aggregate form value and validity state. + Notice that we also added a `name` attribute to our `` tag and set it to "name" + which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful. + Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form. - Let's add similar `[(ngModel)]` bindings to *Alter Ego* and *Hero Power*. +.l-sub-section + :marked + Internally Angular creates `FormControls` and registers them with an `NgForm` directive that Angular + attached to the `
    ` tag. Each `FormControl` is registered under the name we assigned to the `name` attribute. + We'll talk about `NgForm` [later in this chapter](#ngForm). + +:marked + Let's add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*. We'll ditch the input box binding message and add a new binding at the top to the component's `diagnostic` property. Then we can confirm that two-way data binding works *for the entire Hero model*. - After revision the core of our form should have three `[(ngModel)]` bindings that + After revision the core of our form should have three `[(ngModel)]` bindings and `name` attributes that look much like this: +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-2', 'app/hero-form.component.html (excerpt)') +.l-sub-section + :marked + - Each input element has an `id` property that is used by the `label` element's `for` attribute + to match the label to it's input control. + - Each input element has a `name` property that is required by Angular Forms to register the control with the form. + :marked If we ran the app right now and changed every Hero model property, the form might display like this: figure.image-display @@ -382,28 +402,9 @@ figure.image-display Using `ngModel` in a form gives us more than just two way data binding. It also tells us if the user touched the control, if the value changed, or if the value became invalid. - `ngModel` doesn't just track state; it updates the control with special Angular CSS classes from the set we listed above. + The *NgModel* directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state. We can leverage those class names to change the appearance of the control and make messages appear or disappear. - - We'll explore those effects soon. Right now - let's make sure we have `ngModel` and the corresponding name attribute on all three form controls, - starting with the *Name* input box. -+makeExample('forms/ts/app/hero-form.component.html', 'ngModelName-1', 'app/hero-form.component.html (excerpt)')(format=".") -:marked - We set the `name` attribute to "name" which makes sense for our app. Any unique value will do. - -.l-sub-section - :marked - Internally Angular creates `FormControls` and registers them with an `NgForm` directive that Angular attached to the `` tag. Each `FormControl` is registered under the name we assigned to the `name` attribute. - We'll talk about `NgForm` [later in the chapter](#ngForm). - -.l-main-section -:marked - ## Add Custom CSS for Visual Feedback - - The *NgModel* directive doesn't just track state. - It updates the control with three classes that reflect the state. table tr @@ -448,8 +449,15 @@ figure.image-display :marked The (`ng-valid` | `ng-invalid`) pair are most interesting to us. We want to send a strong visual signal when the data are invalid and we want to mark required fields. + So we add custom CSS for visual feedback. - We realize we can do both at the same time with a colored bar on the left of the input box: + **Delete** the `#spy` template reference variable and `TODO` as they have served their purpose. + +.l-main-section +:marked + ## Add Custom CSS for Visual Feedback + We realize we can mark required fields and invalid data at the same time with a colored bar + on the left of the input box: figure.image-display img(src="/resources/images/devguide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form") @@ -597,7 +605,7 @@ figure.image-display Angular did. Angular creates and attaches an `NgForm` directive to the `` tag automatically. - The `NgForm` directive supplements the `form` element with additional features. + The `NgForm` directive supplements the `form` element with additional features. It holds the controls we created for the elements with `ngModel` directive and `name` attribute and monitors their properties including their validity. It also has its own `valid` property which is true only *if every contained @@ -671,13 +679,14 @@ figure.image-display :marked ## Conclusion - The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation and more: + The Angular form techniques discussed in this chapter take + advantage of the following framework features to provide support for data modification, validation and more: - An Angular HTML form template. - A form component class with a `Component` decorator. - The `ngSubmit` directive for handling the form submission. - - Template reference variables such as `#heroForm`, `#name`, `#alter-ego` and `#power`. - - The `[(ngModel)]` syntax for two-way data binding, validation and change tracking. + - Template reference variables such as `#heroForm`, `#name` and `#power`. + - The `[(ngModel)]` syntax and a `name` attribute for two-way data binding, validation and change tracking. - The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages. - Controlling the submit button's enabled state by binding to `NgForm` validity. - Custom CSS classes that provide visual feedback to users about invalid controls. @@ -689,6 +698,7 @@ figure.image-display .file app .children .file app.component.ts + .file app.module.ts .file hero.ts .file hero-form.component.html .file hero-form.component.ts @@ -706,6 +716,7 @@ figure.image-display `forms/ts/app/hero-form.component.ts, forms/ts/app/hero-form.component.html, forms/ts/app/hero.ts, + forms/ts/app/app.module.ts, forms/ts/app/app.component.ts, forms/ts/app/main.ts, forms/ts/index.html, @@ -714,6 +725,7 @@ figure.image-display `hero-form.component.ts, hero-form.component.html, hero.ts, + app.module.ts, app.component.ts, main.ts, index.html, diff --git a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade index 6fcf422eda..84e0c6ab3f 100644 --- a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade +++ b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade @@ -69,8 +69,8 @@ figure.image-display Such a proliferation of injectors makes little sense until we consider the possibility that injectors at different levels can be configured with different providers. We don't *have* to re-configure providers at every level. But we *can*. - If we don't re-configure, the tree of injectors appears to be flat. All requests bubble up to the root injector that we - configured with the `bootstrap` method. + If we don't re-configure, the tree of injectors appears to be flat. All requests bubble up to the root NgModule injector that we + configured with the `bootstrapModule` method. The ability to configure one or more providers at different levels opens up interesting and useful possibilities. @@ -142,9 +142,9 @@ figure.image-display +makeExample('hierarchical-dependency-injection/ts/app/hero-editor.component.ts', 'providers') :marked This adds a `RestoreService` provider to the injector of the `HeroEditComponent`. - Couldn’t we simply alter our bootstrap call to this? + Couldn’t we simply alter our root NgModule to include this provider? -+makeExample('hierarchical-dependency-injection/ts/app/main.ts', 'bad-alternative') ++makeExample('hierarchical-dependency-injection/ts/app/app.module.ts', 'bad-alternative') :marked Technically we could, but our component wouldn’t quite behave the way it is supposed to. Remember that each injector treats the services that it provides as singletons. However, in order to be able to have multiple instances of `HeroEditComponent` edit multiple heroes at the same time we need to have multiple instances of the `RestoreService`. More specifically, each instance of `HeroEditComponent` needs to be bound to its own instance of the `RestoreService`. diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade index 3d50ef7f42..0308d8c1de 100644 --- a/public/docs/ts/latest/guide/pipes.jade +++ b/public/docs/ts/latest/guide/pipes.jade @@ -166,10 +166,10 @@ figure.image-display Two things to note: 1. We use our custom pipe the same way we use the built-in pipes. - 1. We must include our pipe in the `pipes` #{_array} of the `@Component` #{_decorator}. + 1. We must include our pipe in the `declarations` #{_array} of the AppModule. .callout.is-helpful - header Remember the pipes #{_array}! + header Remember the declarations #{_array}! :marked Angular reports an error if we neglect to list our custom pipe. We didn't list the `DatePipe` in our previous example because all @@ -334,9 +334,9 @@ block pure-change +makeExample('pipes/ts/app/flying-heroes.pipe.ts','filter')(format='.') We can derive a `FlyingHeroesImpureComponent` that we derive from the `FlyingHeroesComponent`. -+makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component','app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.') ++makeExample('pipes/ts/app/flying-heroes-impure.component.html','template-flying-heroes','app/flying-heroes-impure.component.html (FlyingHeroesImpureComponent)')(format='.') :marked - The only substantive change is the pipe. + The only substantive change is the pipe in the template. We can confirm in the that the _flying heroes_ display updates as we enter new heroes even when we mutate the `heroes` #{_array}. diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 1ae824f6bd..9e5c5372af 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -47,14 +47,16 @@ include ../_util-fns * navigating under [program control](#navigate) * toggling css classes for the [active router link](#router-link-active) * embedding critical information in the URL with [route parameters](#route-parameters) + * providing non-critical information in [optional route parameters](#optional-route-parameters) * add [child routes](#child-routing-component) under a feature section * [redirecting](#redirect) from one route to another * confirming or canceling navigation with [guards](#guards) * [CanActivate](#can-activate-guard) to prevent navigation to a route * [CanDeactivate](#can-deactivate-guard) to prevent navigation away from the current route - * passing optional information in [query parameters](#query-parameters) - * persisting information across routes with [global query parameters](#global-query-parameters) + * [Resolve](#resolve-guard) to pre-fetch data before activating a route + * providing optional information across routes with [query parameters](#query-parameters) * jumping to anchor elements using a [fragment](#fragment) + * loading feature areas [asynchronously](#asynchronous-routing) * choosing the "HTML5" or "hash" [URL style](#browser-url-styles) We proceed in phases marked by milestones building from a simple two-pager with placeholder views @@ -83,7 +85,7 @@ include ../_util-fns It is not part of the Angular 2 core. It is in its own library package, `@angular/router`. We import what we need from it as we would from any other Angular package. -+makeExample('router/ts/app/app.component.1.ts','import-router', 'app/app.component.ts (import)')(format=".") ++makeExample('router/ts/app/app.routing.ts','import-router', 'app/app.routing.ts (import)')(format=".") .l-sub-section :marked We cover other options in the [details below](#browser-url-styles). @@ -93,19 +95,24 @@ include ../_util-fns from which it can determine the component to display. A router has no routes until we configure it. - The preferred way is to bootstrap our application with an array of routes using the **`provideRouter`** function. + We bootstrap our application with an array of routes that we'll provide to our **`RouterModule.forRoot`** function. In the following example, we configure our application with four route definitions. -+makeExample('router/ts/app/app.routes.1.ts','route-config','app/app.routes.ts')(format='.') ++makeExample('router/ts/app/app.routing.1.ts','route-config','app/app.routing.ts')(format='.') .l-sub-section :marked - The `RouterConfig` is an array of *routes* that describe how to navigate. + The `Routes` is an array of *routes* that describe how to navigate. Each *Route* maps a URL `path` to a component. There are no **leading slashes** in our **path**. The router parses and builds the URL for us, allowing us to use relative and absolute paths when navigating between application views. + The `data` property in the second route is a place to store arbitrary data associated to each + specific route. This data is accessible with each activated route and can be used to store + items such as page titles, breadcrumb text and other read-only data. We'll use the [resolve guard](#resolve-guard) + to retrieve additional data later in the chapter. + The `:id` in the third route is a token for a route parameter. In a URL such as `/hero/42`, "42" is the value of the `id` parameter. The corresponding `HeroDetailComponent` will use that value to find and present the hero whose `id` is 42. @@ -115,15 +122,12 @@ include ../_util-fns if the URL requested doesn't match any paths for routes defined in our configuration. This is useful for displaying a 404 page or redirecting to another route. - We pass the configuration array to the `provideRouter()` function which returns - (among other things) a configured *Router* [service provider](dependency-injection.html#!#injector-providers). - - Finally, we export this provider in the `appRouterProviders` array - so we can simplify registration of router dependencies later in `main.ts`. - We don't have any other providers to register right now. But we will. :marked - Next we open `main.ts` where we must register our router providers in the `bootstrap` method. -+makeExample('router/ts/app/main.ts','','app/main.ts')(format='.') + We export the `routing` constant so we can import it into our `app.module.ts` file where we'll add + a configured *Router* module to our root NgModule imports. +:marked + Next we open `app.module.ts` where we must register our routing, routing providers, and declare our two route components. ++makeExample('router/ts/app/app.module.1.ts','router-basics','app/app.module.ts (basic setup)')(format='.') :marked ### Router Outlet Given this configuration, when the browser URL for this application becomes `/heroes`, @@ -171,9 +175,7 @@ code-example(format="", language="html"). application using the `Router` service and the `routerState` property. The router state provides us with methods to traverse up and down the route tree from any activated route - to get information we may need from parent, child and sibling routes. It also contains the URL *fragment* - and *query parameters* which are **global** to all routes. We'll use the `RouterState` to access - [Query Parameters](#query-parameters). + to get information we may need from parent, child and sibling routes. :marked ### Let's summarize @@ -193,9 +195,14 @@ table Displays the application component for the active URL. Manages navigation from one component to the next. tr - td RouterConfig + td RouterModule td. - Contains an array of Routes, each mapping a URL path to a component. + A separate Angular module that provides the necessary service providers + and directives for navigating through application views. + tr + td Routes + td. + Defines an array of Routes, each mapping a URL path to a component. tr td Route td. @@ -216,12 +223,16 @@ table td. The directive for adding/removing classes from an HTML element when an associated routerLink contained on or inside the element becomes active/inactive. + tr + td ActivatedRoute + td. + A service that is provided to each route component that contains route specific + information such as route parameters, static data, resolve data, global query params and the global fragment. tr td RouterState td. The current state of the router including a tree of the currently activated - routes in our application along with the URL query params, fragment - and convenience methods for traversing the route tree. + routes in our application along convenience methods for traversing the route tree. tr td Link Parameters Array td. @@ -312,11 +323,14 @@ figure.image-display :marked This app illustrates the router features we'll cover in this chapter + * organizing the application features into modules * navigating to a component (*Heroes* link to "Heroes List") * including a route parameter (passing the Hero `id` while routing to the "Hero Detail") * child routes (the *Crisis Center* has its own routes) * the `CanActivate` guard (checking route access) * the `CanDeactivate` guard (ask permission to discard unsaved changes) + * the `Resolve` guard (pre-fetching route data) + * lazy loading feature area modules .l-main-section @@ -329,7 +343,6 @@ figure.image-display :marked - ### Set the *<base href>* The Component Router uses the browser's [history.pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) @@ -369,29 +382,34 @@ figure.image-display :marked ### Configure the routes for the Router + + We begin by importing some symbols from the router library. + + The Component Router is in its own `@angular/router` package. + It's not part of the Angular 2 core. The router is an optional service because not all applications + need routing and, depending on your requirements, you may need a different routing library. + We teach our router how to navigate by configuring it with routes. - We recommend creating a separate `app.routes.ts` file dedicated to this purpose. + We recommend creating a separate `app.routing.ts` file dedicated to this purpose. .l-sub-section :marked Defining configuration in a separate file paves the way for a future in which we load routing configuration immediately but *delay loading the components themselves* until the user needs them. - Such *asynchronous routing* can make our application launch more quickly. - We'll cover asynchronous routing in a future chapter update. + Such [*asynchronous routing*](#asynchronous-routing) can make our application launch more quickly. :marked - Here is our first configuration. + Here is our first configuration. We pass the array of routes to the `RouterModule.forRoot` method + which returns a module containing the configured `Router` service provider ... and some other, + unseen providers that the routing library requires. We export this as the `routing` token. -+makeExample('router/ts/app/app.routes.2.ts','', 'app/app.routes.ts')(format=".") ++makeExample('router/ts/app/app.routing.2.ts','', 'app/app.routing.ts')(format=".") -h4#import Import from the Component Router library -:marked - We begin by importing some symbols from the router library. - - The Component Router is in its own `@angular/router` package. - It's not part of the Angular 2 core. - The router is an optional service because not all applications need routing and, - depending on your requirements, you may need a different routing library. +.l-sub-section + :marked + We also export an empty `appRoutingProviders` array + so we can simplify registration of router dependencies later in `app.module.ts`. + We don't have any providers to register right now. But we will. a#route-config h4#define-routes Define routes @@ -416,36 +434,23 @@ h4#define-routes Define routes the `CrisisListComponent`, display its view, and update the browser's address location and history with the URL for that path.* -h4#provideRouter Call provideRouter -:marked - We pass the route configuration to the `provideRouter` function which returns an array containing the configured - `Router` service provider ... and some other, unseen providers that the routing library requires. - -:marked - We add the `provideRouter` array to an `appRouterProviders` array and export it. - - We could add *additional* service providers to `appRouterProviders` — - providers that are specific to our routing configuration. - We don't have any yet. We will have some later in this chapter. - .l-sub-section :marked Learn about *providers* in the [Dependency Injection](dependency-injection.html#!#injector-providers) chapter. -h4#register-providers Register routing in bootstrap +h4#register-providers Register routing in the root NgModule :marked - Our app launches from the `main.ts` file in the `/app` folder. - It's short and not much different from the default `main.ts`. + Our app launches from the `app.module.ts` file in the `/app` folder. - The important difference: we import the `appRouterProviders` array - and pass it as the second parameter of the `bootstrap` function. -+makeExample('router/ts/app/main.1.ts','all', 'main.ts')(format=".") + We import the `routing` token we exported from the `app.routing.ts` file and add it to the `imports` array. + + We import our `CrisisListComponent` and `HeroListComponent` components and add them to our *declarations* + so they will be registered within our root NgModule. + + We also import the `appRoutingProviders` array and add it to the `providers` array. ++makeExample('router/ts/app/app.module.1.ts','', 'app.module.ts')(format=".") :marked - Providing the router providers at bootstrap makes the Router available everywhere in our application. -.alert.is-important - :marked - We must register router providers in `bootstrap`. - We cannot wait to do it in `AppComponent`. + Providing the router module in our root NgModule makes the Router available everywhere in our application. h3#shell The AppComponent shell :marked @@ -500,11 +505,10 @@ h3#router-link RouterLinkActive binding To override this behavior, we can bind to the `[routerLinkActiveOptions]` input binding with the `{ exact: true }` expression. By using `{ exact: true }`, a given `RouterLink` will only be active if its URL is an exact match to the current URL. -h3#router-directives ROUTER_DIRECTIVES +h3#router-directives Router Directives :marked - `RouterLink`, `RouterLinkActive` and `RouterOutlet` are directives in the `ROUTER_DIRECTIVES` collection. - Remember to add them to the `directives` array of the `@Component` metadata. -+makeExample('router/ts/app/app.component.1.ts','directives')(format=".") + `RouterLink`, `RouterLinkActive` and `RouterOutlet` are directives provided by the Angular `RouterModule` package. + They are readily available for us to use in our template. :marked The current state of `app.component.ts` looks like this: +makeExample('router/ts/app/app.component.1.ts','', 'app/app.component.ts')(format=".") @@ -518,8 +522,8 @@ h3#router-directives ROUTER_DIRECTIVES We've learned how to * load the router library * add a nav bar to the shell template with anchor tags, `routerLink` and `routerLinkActive` directives - * added a `router-outlet` to the shell template where views will be displayed - * configure the router with `provideRouter` + * add a `router-outlet` to the shell template where views will be displayed + * configure the router module with `RouterModule.forRoot` * set the router to compose "HTML 5" browser URLs. The rest of the starter app is mundane, with little interest from a router perspective. @@ -532,7 +536,8 @@ h3#router-directives ROUTER_DIRECTIVES .file app .children .file app.component.ts - .file app.routes.ts + .file app.module.ts + .file app.routing.ts .file crisis-list.component.ts .file hero-list.component.ts .file main.ts @@ -547,14 +552,16 @@ h3#router-directives ROUTER_DIRECTIVES Here are the files discussed in this milestone +makeTabs( `router/ts/app/app.component.1.ts, - router/ts/app/app.routes.2.ts, - router/ts/app/main.1.ts, + router/ts/app/app.module.1.ts, + router/ts/app/app.routing.2.ts, + router/ts/app/main.ts, router/ts/app/hero-list.component.ts, router/ts/app/crisis-list.component.ts, router/ts/index.html`, - ',,all,,', + ',,,,', `app.component.ts, - app.routes.ts, + app.module.ts, + app.routing.ts, main.ts, hero-list.component.ts, crisis-list.component.ts, @@ -566,7 +573,7 @@ h2#heroes-feature Milestone #2: The Heroes Feature We've seen how to navigate using the `RouterLink` directive. Now we'll learn some new tricks such as how to - * organize our app into *feature areas* + * organize our app and routes into *feature areas* using modules * navigate imperatively from one component to another * pass information in route parameters @@ -593,6 +600,10 @@ figure.image-display :marked ### Add Heroes functionality + We want to break our app out into different *submodules* that we then import + into our main module so it can make use of them. First, we'll create a `heroes.module.ts` + in our heroes folder. + We delete the placeholder `hero-list.component.ts` that's in the `app/` folder. @@ -601,7 +612,14 @@ figure.image-display We copy the `hero-detail.component.ts` and the `hero.service.ts` files into the `heroes/` folder. - When we're done organizing, we have three *Hero Management* files: + We provide the `HeroService` in the `providers` array of our `Heroes` module + so its available to all components within our module. + + Our `Heroes` module is ready for routing. ++makeExample('router/ts/app/heroes/heroes.module.1.ts','', 'app/heroes/heroes.module.ts')(format=".") + +:marked + When we're done organizing, we have four *Hero Management* files: .filetree .file app/heroes @@ -609,11 +627,9 @@ figure.image-display .file hero-detail.component.ts .file hero-list.component.ts .file hero.service.ts + .file heroes.module.ts :marked - We provide the `HeroService` in the application root `AppComponent` - so that it is available everywhere in the app. - Now it's time for some surgery to bring these files and the rest of the app into alignment with our application router. @@ -633,17 +649,29 @@ figure.image-display We recommend giving each feature area its own route configuration file. - Create a new `hero.routes.ts` in the `heroes` folder like this: -+makeExample('router/ts/app/heroes/heroes.routes.ts','', 'app/heroes/heroes.routes.ts')(format=".") + Create a new `heroes.routing.ts` in the `heroes` folder like this: ++makeExample('router/ts/app/heroes/heroes.routing.ts','', 'app/heroes/heroes.routing.ts')(format=".") :marked - We use the same techniques we learned for `app.routes.ts`. + We use the same techniques we learned for `app.routing.ts`. We import the two components from their new locations in the `app/heroes/` folder, define the two hero routes. - and add them to an exported `HeroesRoutes` array. + and add export our `heroesRouting` that returns configured `RouterModule` for our submodule. +:marked + Now that we have routes for our `Heroes` module, we'll need to register them with the *Router*. + We'll import the *RouterModule* like we did in the root NgModule, but there is a slight difference here. + In our root routing setup, we used the static **forRoot** method to register our routes and application level + service providers. Since we are in a submodule, we'll use **Router.forChild** method to only register additional routes. We do this + because the *Router* will combine all the provided routes from the submodule together and build our configuration. This allows us to continue defining + our feature-specific routes without modifying our main route configuration. + + We import our `heroesRouting` token from `heroes.routing.ts` into our `Heroes` module and register the routing. ++makeExample('router/ts/app/heroes/heroes.module.ts', 'heroes-routes', 'app/heroes/heroes.module.ts (Heroes routing)')(format=".") + +:marked ### Route definition with a parameter The route to `HeroDetailComponent` has a twist. -+makeExample('router/ts/app/heroes/heroes.routes.ts','hero-detail-route')(format=".") ++makeExample('router/ts/app/heroes/heroes.routing.ts','hero-detail-route')(format=".") :marked Notice the `:id` token in the path. That creates a slot in the path for a **Route Parameter**. In this case, we're expecting the router to insert the `id` of a hero into that slot. @@ -657,29 +685,13 @@ code-example(format="." language="bash"). pattern and go to the same "Magneta" detail view. .l-sub-section :marked - #### Route parameter or query parameter? + #### Route parameter: Required or optional? Embedding the route parameter token, `:id`, in the route definition path is a good choice for our scenario because the `id` is *required* by the `HeroDetailComponent` and because the value `15` in the path clearly distinguishes the route to "Magneta" from a route for some other hero. - A [query parameter](#query-parameter) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`. - -h3#merge-hero-routes Merge hero routes into application routes -:marked - Our application doesn't know about our hero routes yet. - We'll need to merge them into the application routes we defined in `app.routes.ts`. - - Update `app.routes.ts` as follows: -+makeExample('router/ts/app/app.routes.3.ts', '', 'app/app.routes.ts (v.2)')(format=".") -:marked - We replace the `HeroListComponent` import with an `HeroesRoutes` import. - - We *flatten* the `HeroesRoutes` into the `routes` array with the ES6 *spread operator* (`...`). - - As a result, the `app.routes.ts` no longer has specific knowledge of the hero feature, its components, or its route details. - It won't change as we evolve the hero feature with more components and different routes. - That's a key benefit of creating a separate route configuration for each feature area. + An [optional-route-parameter](#optional-route-parameter) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`. h3#navigate Navigate to hero detail imperatively :marked @@ -811,6 +823,31 @@ h3#nav-to-list Navigating back to the list component that we can bind to a `[routerLink]` directive. It holds the **path to the `HeroListComponent`**: +makeExample('router/ts/app/heroes/hero-detail.component.1.ts','gotoHeroes')(format=".") + +h3#merge-hero-routes Import hero module into root NgModule +:marked + Our heroes feature is ready, but application doesn't know about our heroes module yet. + We'll need to import it into the root NgModule we defined in `app.module.ts`. + + Update `app.module.ts` as follows: + ++makeExample('router/ts/app/app.module.2.ts','hero-import', 'app.module.ts (Heroes module import)')(format=".") + +:marked + We imported the `HeroesModule` and added it to our root NgModule `imports`. + + We removed the `HeroListComponent` from the root NgModule's `declarations` because its being provided by the `HeroesModule` + now. This is important because their can be only **one** owner for a declared component. In our case, the `Heroes` module is + the owner of the `Heroes` components and is making them available to the root NgModule. + + As a result, the `app.module.ts` no longer has specific knowledge of the hero feature, its components, or its route details. + We can evolve the hero feature with more components and different routes. + That's a key benefit of creating a separate module for each feature area. + + Since our `Heroes` routes are defined within our submodule, we can also remove our initial `heroes` route from the `app.routing.ts`. + ++makeExample('router/ts/app/app.routing.3.ts','', 'app.routing.ts (v.2)')(format=".") + :marked ### Heroes App Wrap-up @@ -820,6 +857,7 @@ h3#nav-to-list Navigating back to the list component * organize our app into *feature areas* * navigate imperatively from one component to another * pass information along in route parameters and subscribe to them in our component + * import our feature area NgModule into our root NgModule After these changes, the folder structure looks like this: .filetree @@ -832,9 +870,11 @@ h3#nav-to-list Navigating back to the list component .file hero-detail.component.ts .file hero-list.component.ts .file hero.service.ts - .file heroes.routes.ts + .file heroes.module.ts + .file heroes.routing.ts .file app.component.ts - .file app.routes.ts + .file app.module.ts + .file app.routing.ts .file crisis-list.component.ts .file main.ts .file node_modules ... @@ -850,18 +890,22 @@ h3#nav-to-list Navigating back to the list component Here are the relevant files for this version of the sample application. +makeTabs( `router/ts/app/app.component.1.ts, - router/ts/app/app.routes.3.ts, + router/ts/app/app.module.2.ts, + router/ts/app/app.routing.3.ts, router/ts/app/heroes/hero-list.component.1.ts, router/ts/app/heroes/hero-detail.component.1.ts, router/ts/app/heroes/hero.service.ts, - router/ts/app/heroes/heroes.routes.ts`, + router/ts/app/heroes/heroes.module.ts, + router/ts/app/heroes/heroes.routing.ts`, null, `app.component.ts, - app.routes.ts, + app.module.ts, + app.routing.ts, hero-list.component.ts, hero-detail.component.ts, hero.service.ts, - heroes.routes.ts`) + heroes.module.ts, + heroes.routing.ts`) :marked @@ -870,7 +914,7 @@ h3#nav-to-list Navigating back to the list component ## Milestone #3: The Crisis Center The *Crisis Center* is a fake view at the moment. Time to make it useful. - The new *Crisis Center* begins as a virtual copy of the *Heroes* feature. + The new *Crisis Center* begins as a virtual copy of the *Heroes* module. We create a new `app/crisis-center` folder, copy the Hero files, and change every mention of "hero" to "crisis". @@ -879,7 +923,7 @@ h3#nav-to-list Navigating back to the list component When the user selects a crisis, the app navigates to the `CrisisDetailComponent` for display and editing of the crisis name. - Voilà, instant feature module! + Voilà, another feature module! There's no point to this exercise unless we can learn something. We do have new ideas and techniques in mind: @@ -894,10 +938,10 @@ h3#nav-to-list Navigating back to the list component * The router should block access to certain features until the user logs-in. - * Our `CrisisService` is only needed within the *Crisis Center* feature area. - We should limit access to it to that feature area. + * Our `CrisisService` is only needed within the *Crisis Center* module. + We should limit access to it to that module. - * Changes to a sub-module such as *Crisis Center* shouldn't provoke changes to the `AppComponent` or + * Changes to a submodule such as *Crisis Center* shouldn't provoke changes to the root `NgModule` or any other feature's component. We need to [*separate our concerns*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html). @@ -913,7 +957,7 @@ h3#nav-to-list Navigating back to the list component ### A Crisis Center with child routes We'll organize the *Crisis Center* to conform to the following recommended pattern for Angular applications. - * each feature area in its own folder + * each feature area in its own folder within a defined module * each area with its own area root component * each area root component with its own router-outlet and child routes * area routes rarely (if ever) cross @@ -926,7 +970,7 @@ figure.image-display h3#child-routing-component Child Routing Component :marked Add the following `crisis-center.component.ts` to the `crisis-center` folder: -+makeExample('router/ts/app/crisis-center/crisis-center.component.1.ts', 'minus-imports', 'crisis-center/crisis-center.component.ts (minus imports)')(format='.') ++makeExample('router/ts/app/crisis-center/crisis-center.component.ts', 'minus-imports', 'crisis-center/crisis-center.component.ts (minus imports)')(format='.') :marked The `CrisisCenterComponent` is much like the `AppComponent` shell. @@ -950,14 +994,14 @@ h3#child-routing-component Child Routing Component :marked ### Service isolation - The`CrisisService` is neither needed nor wanted outside the *Crisis Center* domain. - Instead of registering it with the root `AppComponent` providers — + The `CrisisService` is neither needed nor wanted outside the *Crisis Center* domain. + Instead of registering it with the root NgModule's providers — which makes it visible everywhere — - we register the `CrisisService` in the component's providers array. -+makeExample('router/ts/app/crisis-center/crisis-center.component.1.ts', 'providers')(format='.') + we register the `CrisisService` in the `CrisisCenterModule` providers array. ++makeExample('router/ts/app/crisis-center/crisis-center.module.1.ts', 'providers')(format='.') :marked - This limits the scope of the `CrisisService` to the *Crisis Center* component and its sub-component tree. - No component outside of the *Crisis Center* can access it. + This limits the scope of the `CrisisService` to the *Crisis Center* routes. + No module outside of the *Crisis Center* can access it. There's a practical benefit to restricting its scope in this way. @@ -967,20 +1011,17 @@ h3#child-routing-component Child Routing Component Second, we can delay loading this service into memory until we need it. We can remove it from the application launch bundle, reducing the size of the initial payload and improving performance. - We can load it optionally, asynchronously with the other *Crisis Center* components + We can load it optionally, [asynchronously](#asynchronous-routing) with the other *Crisis Center* components if and when the user begins that workflow. -.l-sub-section - :marked - We'll describe asynchronous module loading in a future update. :marked ### Child Route Configuration The `CrisisCenterComponent` is a *Routing Component* like the `AppComponent`. It has its own `RouterOutlet` and its own child routes. - We create a `crisis-center.routes.ts` file as we did the `heroes.routes.ts` file. + We create a `crisis-center.routing.ts` file as we did the `heroes.routing.ts` file. But this time we define **child routes** *within* the parent `crisis-center` route. -+makeExample('router/ts/app/crisis-center/crisis-center.routes.1.ts', 'routes', 'app/crisis-center/crisis-center.routes.ts (Routes)' )(format='.') ++makeExample('router/ts/app/crisis-center/crisis-center.routing.1.ts', 'routes', 'app/crisis-center/crisis-center.routing.ts (Routes)' )(format='.') :marked Notice that the parent `crisis-center` route has a `children` property with an array of two routes. @@ -1007,16 +1048,19 @@ code-example(format=""). localhost:3000/crisis-center/2 :marked - Here's the complete `crisis-center.routes.ts` with its imports. -+makeExample('router/ts/app/crisis-center/crisis-center.routes.1.ts', '', 'app/crisis-center/crisis-center.routes.ts' )(format='.') + Here's the complete `crisis-center.routing.ts` with its imports. ++makeExample('router/ts/app/crisis-center/crisis-center.routing.1.ts', '', 'app/crisis-center/crisis-center.routing.ts' )(format='.') -h3#merge-crisis-routes Merge crisis routes into the application routes +h3#import-crisis-module Import crisis center module into the root NgModule routes :marked - As with hero routes, we must update the router configuration at the top of the application - by merging the crisis routes into the app routes: -+makeExample('router/ts/app/app.routes.4.ts', '', 'app/app.routes.ts' )(format='.') + As with the `Heroes` module, we must import the `Crisis Center` module into the root NgModule: ++makeExample('router/ts/app/app.module.3.ts', '', 'app/app.module.ts (Crisis Center Module)' )(format='.') :marked - We used the spread operator again (...) to insert the crisis routes array. + We also remove the initial crisis center route from our `app.routing.ts`. Our routes + are now being provided by our `HeroesModule` and our `CrisisCenter` submodules. We'll keep our `app.routing.ts` file + for general routes which we'll cover later in the chapter. + ++makeExample('router/ts/app/app.routing.4.ts', '', 'app/app.routing.ts (v.3)' )(format='.') a#redirect h3#redirect Redirecting routes @@ -1033,7 +1077,7 @@ code-example(format=""). The preferred solution is to add a `redirect` route that transparently translates from the initial relative URL (`''`) to the desired default path (`/crisis-center`): -+makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'redirect', 'app/crisis-center/crisis-center.routes.ts (redirect route)' )(format='.') ++makeExample('router/ts/app/crisis-center/crisis-center.routing.2.ts', 'redirect', 'app/crisis-center/crisis-center.routing.ts (redirect route)' )(format='.') :marked A redirect route requires a `pathMatch` property to tell the router how to match a URL to the path of a route. @@ -1063,7 +1107,7 @@ code-example(format=""). :marked The updated route definitions look like this: -+makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'routes', 'app/crisis-center/crisis-center.routes.ts (Routes v.2)' )(format='.') ++makeExample('router/ts/app/crisis-center/crisis-center.routing.2.ts', 'routes', 'app/crisis-center/crisis-center.routing.ts (Routes v.2)' )(format='.') .l-main-section h2#guards Route Guards @@ -1091,15 +1135,17 @@ h2#guards Route Guards The guard could ask the user a question, save changes to the server, or fetch fresh data. These are all asynchronous operations. - Accordingly, a routing guard can return an `Observable` and the + Accordingly, a routing guard can return an `Observable` or a `Promise` and the router will wait for the observable to resolve to `true` or `false`. - The router supports two kinds of guards: + The router supports three kinds of guards: 1. [CanActivate](../api/router/index/CanActivate-interface.html) to mediate navigation *to* a route. 2. [CanDeactivate](../api/router/index/CanDeactivate-interface.html) to mediate navigation *away* from the current route. + 3. [Resolve](../api/router/index/Resolve-interface.html) to perform route data retrieval before *before* route activation. + .l-sub-section :marked We'll examine other router guards in a future update to this chapter. @@ -1135,7 +1181,7 @@ h3#can-activate-guard CanActivate: requiring authentication +makeExample('router/ts/app/crisis-center/crisis-admin.component.1.ts', '', 'crisis-admin.component.ts')(format=".") :marked Next, we add a child route to the `crisis-center.routes` with the path, `/admin`. -+makeExample('router/ts/app/crisis-center/crisis-center.routes.3.ts', 'admin-route-no-guard', 'crisis-center.routes.ts (admin route)')(format=".") ++makeExample('router/ts/app/crisis-center/crisis-center.routing.3.ts', 'admin-route-no-guard', 'crisis-center.routing.ts (admin route)')(format=".") :marked And we add a link to the `AppComponent` shell that users can click to get to this feature. +makeExample('router/ts/app/app.component.4.ts', 'template', 'app/app.component.ts (template)')(format=".") @@ -1163,9 +1209,9 @@ h3#can-activate-guard CanActivate: requiring authentication It simply logs to console and `returns` true immediately, allowing navigation to proceed: +makeExample('router/ts/app/auth-guard.service.1.ts', '', 'app/auth-guard.service.ts')(format=".") :marked - Next we open `crisis-center.routes.ts `, import the `AuthGuard` class, and + Next we open `crisis-center.routing.ts `, import the `AuthGuard` class, and update the admin route with a `CanActivate` guard property that references it: -+makeExample('router/ts/app/crisis-center/crisis-center.routes.ts', 'admin-route', 'crisis-center.routes.ts (guarded admin route)')(format=".") ++makeExample('router/ts/app/crisis-center/crisis-center.routing.ts', 'admin-route', 'crisis-center.routing.ts (guarded admin route)')(format=".") Our admin feature is now protected by the guard, albeit protected poorly. :marked #### Teach *AuthGuard* to authenticate @@ -1200,16 +1246,21 @@ h3#can-activate-guard CanActivate: requiring authentication We need a `LoginComponent` for the user to log in to the app. After logging in, we'll redirect to our stored URL if available, or use the default URL. There is nothing new about this component or the way we wire it into the router configuration. - Here is the pertinent code, offered without comment: + + We'll register a `/login` route in our `app.routing.ts` and add the necessary providers to the `appRoutingProviders` + array we created earlier. In our `app.module.ts`, we'll import the `LoginComponent` and add it to our root NgModule `declarations`. + +makeTabs( - `router/ts/app/login.component.ts, - router/ts/app/login.routes.ts, - router/ts/app/app.routes.5.ts + `router/ts/app/app.module.ts, + router/ts/app/app.routing.5.ts, + router/ts/app/login.component.1.ts, + router/ts/app/login.routing.ts `, null, - `app/login.component.ts, - app/login.routes.ts, - app/app.routes.ts + `app/app.module.ts, + app/app.routing.ts, + app/login.component.ts, + app/login.routing.ts `) h3#can-deactivate-guard CanDeactivate: handling unsaved changes @@ -1266,41 +1317,111 @@ h3#can-deactivate-guard CanDeactivate: handling unsaved changes by waiting for the user's answer asynchronously. Waiting for the user asynchronously is like waiting for the server asynchronously. :marked - The `DialogService` (injected in the `AppComponent` for app-wide use) does the asking. + The `DialogService` (provided in the root `NgModule` for app-wide use) does the asking. It returns a [promise](http://exploringjs.com/es6/ch_promises.html) that *resolves* when the user eventually decides what to do: either to discard changes and navigate away (`true`) or to preserve the pending changes and stay in the crisis editor (`false`). - We will take the result of that promise and convert it to an `Observable` for our guard to use. - :marked We create a `Guard` that will check for the presence of a `canDeactivate` function in our component, in this case being `CrisisDetailComponent`. We don't need to know the details of how our `CrisisDetailComponent` confirms deactivation. This makes our guard reusable, which is an easy win for us. +makeExample('router/ts/app/can-deactivate-guard.service.ts', '', 'can-deactivate-guard.service.ts') + :marked - Looking at our `CrisisDetailComponent`, we have implemented our confirmation workflow for unsaved changes. + Alternatively, We could make a component-specific `CanDeactivate` guard for our `CrisisDetailComponent`. The `canDeactivate` method provides us + with the current instance of our `component`, the current `ActivatedRoute` and `RouterStateSnapshot` in case we needed to access + some external information. This would be useful if we only wanted to use this guard for this component and needed to ask the component's + properties in or to confirm whether the router should allow navigation away from it. ++makeExample('router/ts/app/can-deactivate-guard.service.1.ts', '', 'can-deactivate-guard.service.ts (component-specific)') + +:marked + Looking back at our `CrisisDetailComponent`, we have implemented our confirmation workflow for unsaved changes. +makeExample('router/ts/app/crisis-center/crisis-detail.component.1.ts', 'cancel-save-only', 'crisis-detail.component.ts (excerpt)') :marked Notice that the `canDeactivate` method *can* return synchronously; it returns `true` immediately if there is no crisis or there are no pending changes. - But it can also return a promise or an `Observable` and the router will wait for that + But it can also return a `Promise` or an `Observable` and the router will wait for that to resolve to truthy (navigate) or falsey (stay put). :marked - We add the `Guard` to our crisis detail route in `crisis-center.routes.ts` using the `canDeactivate` array. -+makeExample('router/ts/app/crisis-center/crisis-center.routes.4.ts', '', 'crisis-center.routes.ts') + We add the `Guard` to our crisis detail route in `crisis-center.routing.ts` using the `canDeactivate` array. ++makeExample('router/ts/app/crisis-center/crisis-center.routing.4.ts', '', 'crisis-center.routing.ts') :marked - We also need to add the `Guard` to our main `appRouterProviders` so the `Router` can inject it during the navigation process. -+makeExample('router/ts/app/app.routes.ts', '', 'app.routes.ts') + We also need to add the `Guard` to our main `appRoutingProviders` so the `Router` can inject it during the navigation process. ++makeExample('router/ts/app/app.routing.5.ts', '', 'app.routing.ts') :marked Now we have given our user a safeguard against unsaved changes. + +h3#resolve-guard Resolve: pre-fetching component data +:marked + In our `Hero Detail` and `Crisis Detail`, we waited until the route was activated to fetch our respective hero or crisis. + + This worked well for us, but we can always do better. + If we were using a real world api, there may be some delay in when the data we want to display gets returned. + We don't want to display a blank component until the data loads in this situation. + + We'd like to pre-fetch data from the server so its ready the moment our route is activated. + We'd also like to handle the situation where our data fails to load or some other error condition occurs. + This would help us in our `Crisis Center` if we navigated to an `id` that doesn't return a record. + We could send the user back to the `Crisis List` where we only show valid crisis centers. + We want to delay rendering of our route component until all necessary data has been fetched or some action + has occurred. + + We need the `Resolve` guard. + + ### Preload route information + + We'll update our `Crisis Detail` route to resolve our Crisis before loading the route, or if the user happens to + navigate to an invalid crisis center `:id`, we'll navigate back to our list of existing crises. + + Like the `CanActivate` and `CanDeactivate` guards, the **`Resolve`** guard is an interface we can implement as a service + to resolve route data synchronously or asynchronously. In our `Crisis Detail` component, we used the `ngOnInit` to retrieve the `Crisis` + information. We also navigated the user away from the route if the `Crisis` was not found. It would be more efficient to perform this + action before the route is ever activated. + + We'll create a `CrisisDetailResolve` service that will handle retrieving the `Crisis` and navigating the user away if the `Crisis` does + not exist. Then we can be assured that when we activate the `CrisisDetailComponent`, the associated Crisis will already be available + for display. + + Let's create our `crisis-detail-resolve.service.ts` file within our `Crisis Center` feature area. + ++makeExample('router/ts/app/crisis-center/crisis-detail-resolve.service.ts', '', 'crisis-detail-resolve.service.ts') + +:marked + We'll take the relevant parts of the `ngOnInit` lifecycle hook in our `CrisisDetailComponent` and moved them into our `CrisisDetailResolve` guard. + We import the `Crisis` model and `CrisisService` and also the `Router` for navigation from our resolve implementation. We want to be explicit about + the data we are resolving, so we implement the `Resolve` interface with a type of `Crisis`. This lets us know that what we will resolve will match our + `Crisis` model. We inject the `CrisisService` and `Router` and implement the `resolve` method that supports a `Promise`, `Observable` or a synchronous + return value. + + We'll use our `CrisisService.getCrisis` method that returns a promise to prevent our route from loading until the data is fetched. If we don't find a valid `Crisis`, + we navigate the user back to the `CrisisList`, canceling the previous in-flight navigation to the crisis details. + + Now that our guard is ready, we'll import it in our `crisis-center.routing.ts` and use the `resolve` object in our route configuration. + ++makeExample('router/ts/app/crisis-center/crisis-center.routing.5.ts', 'crisis-detail-resolve', 'crisis-center.routing.ts (resolve)') + +:marked + We'll add the `CrisisDetailResolve` service to our crisis center module's `providers`, so its available to the `Router` during the navigation process. + ++makeExample('router/ts/app/crisis-center/crisis-center.module.ts', 'crisis-detail-resolve', 'crisis-center.module.ts (crisis detail resolve provider)') + +:marked + Now that we've added our `Resolve` guard to fetch data before the route loads, we no longer need to do this once we get into our `CrisisDetailComponent`. + We'll update the `CrisisDetailComponent` to use the `ActivatedRoute.data`, which is where our `crisis` property from our `Resolve` guard will be provided. + Once activated, all we need to do is set our local `crisis` and `editName` properties from our resolved `Crisis` information. We no longer need to subscribe + and unsubscribe to the `ActivatedRoute` params to fetch the `Crisis` because it is being provided synchronously at the time the route component is activated. + ++makeExample('router/ts/app/crisis-center/crisis-detail.component.ts', 'crisis-detail-resolve', 'crisis-detail.component.ts (ngOnInit v.2)') + +:marked **Two critical points** 1. The router interface is optional. We don't inherit from a base class. We simply implement the interface method or not. @@ -1312,33 +1433,39 @@ h3#can-deactivate-guard CanDeactivate: handling unsaved changes +makeTabs( `router/ts/app/app.component.ts, - router/ts/app/auth-guard.service.2.ts, - router/ts/app/can-deactivate-guard.service.ts, router/ts/app/crisis-center/crisis-center.component.ts, - router/ts/app/crisis-center/crisis-center.routes.ts, + router/ts/app/crisis-center/crisis-center.routing.ts, router/ts/app/crisis-center/crisis-list.component.1.ts, - router/ts/app/crisis-center/crisis-detail.component.1.ts, + router/ts/app/crisis-center/crisis-detail.component.ts, + router/ts/app/crisis-center/crisis-detail-resolve.service.ts, router/ts/app/crisis-center/crisis.service.ts `, null, `app.component.ts, - auth-guard.service.ts, - can-deactivate-guard.service.ts, crisis-center.component.ts, - crisis-center.routes.ts, + crisis-center.routing.ts, crisis-list.component.ts, crisis-detail.component.ts, + crisis-detail-resolve.service.ts, crisis.service.ts `) ++makeTabs( + `router/ts/app/auth-guard.service.2.ts, + router/ts/app/can-deactivate-guard.service.ts + `, + null, + `auth-guard.service.ts, + can-deactivate-guard.service.ts + `) - - + + .l-main-section :marked - ## Milestone #4: Query Parameters + ## Milestone #4: Route Parameters - We use [*route parameters*](#route-parameters) to specify a *required* parameterized value *within* the route URL + We use [*route parameters*](#route-parameters) to specify a *required* parameter value *within* the route URL as we do when navigating to the `HeroDetailComponent` in order to view-and-edit the hero with *id:15*. code-example(format="." language="bash"). localhost:3000/hero/15 @@ -1359,24 +1486,21 @@ figure.image-display These kinds of parameters don't fit easily in a URL *path*. Even if we could define a suitable URL token scheme, doing so greatly complicates the pattern matching required to translate an incoming URL to a named route. - The **URL query string** is the ideal vehicle for conveying arbitrarily complex information during navigation. - The query string isn't involved in pattern matching and affords enormous flexiblity of expression. - Almost anything serializable can appear in a query string. + Optional parameters are the ideal vehicle for conveying arbitrarily complex information during navigation. + Optional parameters aren't involved in pattern matching and affords enormous flexibility of expression. - The Component Router supports navigation with query strings as well as route parameters. - We define _optional_ query string parameters in an *object* after we define our required route parameters. + The Component Router supports navigation with optional parameters as well as required route parameters. + We define _optional_ parameters in an *object* after we define our required route parameters. - - ### Route Parameters or Query Parameters? + ### Route Parameters: Required or Optional? There is no hard-and-fast rule. In general, - *prefer a route parameter when* + *prefer a required route parameter when* * the value is required. * the value is necessary to distinguish one route path from another. - *prefer a query parameter when* - * the value is optional. + *prefer an optional parameter when* * the value is complex and/or multi-variate. @@ -1387,8 +1511,8 @@ figure.image-display +makeExample('router/ts/app/heroes/hero-list.component.1.ts','link-parameters-array')(format=".") :marked The router embedded the `id` value in the navigation URL because we had defined it - as a route parameter with an `:id` placeholder token in the route `path`: -+makeExample('router/ts/app/heroes/heroes.routes.ts','hero-detail-route')(format=".") + as a route parameter with an `:id` placeholder token in the route `path`: ++makeExample('router/ts/app/heroes/heroes.routing.ts','hero-detail-route')(format=".") :marked When the user clicks the back button, the `HeroDetailComponent` constructs another *link parameters array* which it uses to navigate back to the `HeroListComponent`. @@ -1416,10 +1540,10 @@ figure.image-display code-example(format="." language="bash"). localhost:3000/heroes;id=15;foo=foo :marked - The `id` value appears in the query string (`;id=15;foo=foo`), not in the URL path. + The `id` value appears in the URL as (`;id=15;foo=foo`), not in the URL path. The path for the "Heroes" route doesn't have an `:id` token. :marked - The query string parameters are not separated by "?" and "&". + The optional route parameters are not separated by "?" and "&". They are **separated by semicolons (;)** This is *matrix URL* notation — something we may not have seen before. .l-sub-section @@ -1436,7 +1560,7 @@ code-example(format="." language="bash"). as this one can. :marked - ### Query parameters in the *ActivatedRoute* service + ### Route parameters in the *ActivatedRoute* service The list of heroes is unchanged. No hero row is highlighted. @@ -1478,20 +1602,17 @@ code-example(format="." language="bash"). figure.image-display img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected List" ) :marked - The `foo` query string parameter is harmless and continues to be ignored. + The optional `foo` route parameter is harmless and continues to be ignored. - + :marked - ### Global Query parameters and Fragments + ### Query Parameters and Fragments :marked - In our [query parameters](#query-parameters) example, we only dealt with parameters specific to + In our [route parameters](#optional-route-parameters) example, we only dealt with parameters specific to our route, but what if we wanted optional parameters available to all routes? This is where our query parameters come into play and serve a special purpose in our application. - Traditional query string parameters (?name=value) **persist** across route navigations. This means we can pass these query params - around without having to specify them in each navigation method whether it be declaratively or imperatively. - [Fragments](https://en.wikipedia.org/wiki/Fragment_identifier) refer to certain elements on the page identified with an `id` attribute. @@ -1499,16 +1620,25 @@ figure.image-display We'll also provide an arbitrary `anchor` fragment, which we would use to jump to a certain point on our page. - We'll add the extra navigation object to our `router.navigate` method that navigates us to our `/login` route. + We'll add the `NavigationExtras` object to our `router.navigate` method that navigates us to our `/login` route. +makeExample('router/ts/app/auth-guard.service.ts','', 'auth-guard.service.ts (v.3)') + :marked - Since we'll be navigating to our *Crisis Admin* route after logging in, we'll update it to handle our global + We can also **preserve** query parameters and fragments across navigations without having to re-provide them + when navigating. In our `LoginComponent`, we'll add an *object* as the second argument in our `router.navigate` function + and provide the `preserveQueryParams` and `preserveFragment` to pass along the current query parameters + and fragment to the next route. + ++makeExample('router/ts/app/login.component.ts','preserve', 'login.component.ts (preserved)')(format=".") + +:marked + Since we'll be navigating to our *Crisis Admin* route after logging in, we'll update it to handle our query parameters and fragment. +makeExample('router/ts/app/crisis-center/crisis-admin.component.ts','', 'crisis-admin.component.ts (v.2)') :marked - *Query Parameters* and *Fragments* are available through the `routerState` property in our `Router` service. - Just like our *route parameters*, global query parameters and fragments are provided as an `Observable`. + *Query Parameters* and *Fragments* are also available through the `ActivatedRoute` service available to route components. + Just like our *route parameters*, query parameters and fragments are provided as an `Observable`. For our updated *Crisis Admin* component we'll feed the `Observable` directly into our template using the `AsyncPipe`, which will handle _unsubscribing_ from the `Observable` for us when the component is destroyed. @@ -1521,8 +1651,81 @@ figure.image-display Following the steps in this process, we can click on the *Crisis Admin* button, that takes us to the *Login* page with our provided `query params` and `fragment`. After we click the login button, we notice that we have been redirected to the `Crisis Admin` page with our `query params` and `fragment` still intact. We can use - these persistent bits of information for things that need to be provided with every page interaction like + these persistent bits of information for things that need to be provided with across pages interaction like authentication tokens or session ids. + +.l-main-section +:marked + ## Milestone #5: Asynchronous Routing + + As we have completed our milestones, our application has naturally gotten larger. As we continue to build + out feature areas our overall application size will get larger also. At some point we'll reach a tipping + point in where our application takes a significant enough time to load. This is not a viable long term solution. + + So how do we combat this problem? We introduce asynchronous routing into our application and take advantage of loading + feature areas _lazily_. This buys us multiple things: + + We can continue building out feature areas without increasing our initial bundle. + We can load feature areas only when requested by the user. + We can speed up load time for users that only visit certain areas of our application. + + These are all things we want to have in our application, so let's apply this to our current setup. We've already made + great strides by organizing our application into three modules: `AppModule`, `HeroesModule` and `CrisisCenterModule`. + Our `CrisisCenterModule` is the most feature-rich area of our application and also the largest, so we'll take advantage + of asynchronous routing and only load the `Crisis Center` feature area when requested. + +:marked + ### Lazy-Loading route configuration + + We'll start by pulling our `redirect` and `crisis-center` routes out of our `CrisisCenterModule` and including them in our + `app.routing.ts` file. We want to load our `Crisis Center` asynchronously, so we'll use the `loadChildren` property in + our route config where previously we used the `children` property to include our child routes. + + We'll also change our `crisis-center` **path** in our `crisis-center.routing.ts` to an empty path. The `Router` supports + *empty path* routes, which we can use for grouping routes together without adding anything additional paths to the URL. Our + users will still visit `/crisis-center` and our `CrisisCenterComponent` still serves as our *Routing Component* which contains + our child routes. + ++makeTabs( + `router/ts/app/app.routing.ts, + router/ts/app/crisis-center/crisis-center.routing.ts`, + 'lazy-load-crisis-center,lazy-load-crisis-center', + `app.routing.ts (load children), + crisis-center.routing.ts (empty path crisis center) + `) + +:marked + The `loadChildren` property is used by the `Router` to map to our bundle we want to lazy-load, in this case being the `CrisisCenterModule`. + + If we look closer at the `loadChildren` string, we can see that it maps directly to our `crisis-center.module` file where we previously built + out our `Crisis Center` feature area. After the path to the file we use a `#` to denote where our file path ends and to tell the `Router` the name + of our `CrisisCenter` NgModule. If we look in our `crisis-center.module` file, we can see it matches name of our exported NgModule class. + ++makeExample('router/ts/app/crisis-center/crisis-center.module.ts', 'crisis-center-module-export', 'crisis-center.module.ts (export)') + +:marked + The `loadChildren` property is used by the `Router` to map to our bundle we want to lazy-load, in this case being the `CrisisCenterModule`. + The router will take our loadChildren string and dynamically load in our `CrisisCenterModule`, add its routes to our configuration *dynamically* + and then load the requested route. This will only happen when route is **first** requested and the module will be immediately be available + for subsequent requests. + +.l-sub-section + :marked + Angular provides a built-in module loader that supports **`SystemJS`** to load modules asynchronously. If we were + using another bundling tool, such as **Webpack**, we would use the Webpack mechanism for asynchronously loading modules. + +:marked + We've built our feature area, we've updated our route configuration to take advantage of lazy-loading, now we have to do the final step + to break our `CrisisCenterModule` into a completely separate module. In our `app.module.ts`, we'll remove our `CrisisCenterModule` from the + `imports` array since we'll be loading it on-demand an we'll remove the imported `CrisisCenterModule`. + ++makeExample('router/ts/app/app.module.ts', '', 'app.module.ts (final)') + +:marked + If our initial redirect went to `/heroes` instead of going to `/crisis-center`, the `CrisisCenterModule` would not be loaded until the user + visited a `Crisis Center` route. We'll update our redirect in our `app.routing.ts` to make this change. + ++makeExample('router/ts/app/app.routing.ts', 'heroes-redirect', 'app.routing.ts (heroes redirect)') .l-main-section @@ -1549,7 +1752,7 @@ figure.image-display A link parameters array holds the ingredients for router navigation: * the *path* of the route to the destination component - * required route parameters and optional query parameters that go into the route URL + * required and optional route parameters that go into the route URL We can bind the `RouterLink` directive to such an array like this: +makeExample('router/ts/app/app.component.3.ts', 'h-anchor')(format=".") @@ -1557,7 +1760,7 @@ figure.image-display We've written a two element array when specifying a route parameter like this +makeExample('router/ts/app/heroes/hero-list.component.1.ts', 'nav-to-detail')(format=".") :marked - We can provide optional query parameters in an object like this: + We can provide optional route parameters in an object like this: +makeExample('router/ts/app/app.component.3.ts', 'cc-query-params')(format=".") :marked These three examples cover our needs for an app with one level routing. @@ -1656,7 +1859,7 @@ code-example(format=".", language="bash"). 1. `PathLocationStrategy` - the default "HTML 5 pushState" style. 1. `HashLocationStrategy` - the "hash URL" style. - The router's `provideRouter` function sets the `LocationStrategy` to the `PathLocationStrategy`, + The `RouterModule.forRoot` function sets the `LocationStrategy` to the `PathLocationStrategy`, making it the default strategy. We can switch to the `HashLocationStrategy` with an override during the bootstrapping process if we prefer it. .l-sub-section @@ -1714,11 +1917,6 @@ code-example(format=".", language="bash"). :marked ### *HashLocationStrategy* We can go old-school with the `HashLocationStrategy` by - providing it as the router's `LocationStrategy` during application bootstrapping. - - First, import the `provide` symbol for Dependency Injection and the - `Location` and `HashLocationStrategy` symbols from the router. - - Then *override* the default strategy defined in `provideRouter` by - providing the `HashLocationStrategy` later in the `AppComponent` providers array argument: -+makeExample('router/ts/app/main.2.ts','', 'main.ts (hash URL strategy)') + providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot` + in our root NgModule. ++makeExample('router/ts/app/app.module.4.ts','', 'app.module.ts (hash URL strategy)') diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index c254ff9377..fbe656ba37 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/public/docs/ts/latest/guide/server-communication.jade @@ -83,34 +83,22 @@ block demos-list Learn about providers in the [Dependency Injection](dependency-injection.html) chapter. :marked - In this demo, we register providers in the `bootstrap()` method of - app/main.ts. + In this demo, we register providers by importing other NgModules to our root NgModule. -+makeExample('server-communication/ts/app/main.ts', 'v1', 'app/main.ts (v1)')(format='.') ++makeExample('server-communication/ts/app/app.module.1.ts', null, 'app/app.module.ts (v1)')(format='.') block http-providers :marked - We begin by importing the symbols we need, most of them familiar by now. The newcomer is `HTTP_PROVIDERS`, - a collection of service providers from the !{_Angular_http_library}. + We begin by importing the symbols we need, most of them familiar by now. + The newcomers are the `HttpModule` and the `JsonpModule` from the !{_Angular_http_library}. - We register HTTP providers in the bootstrap method by passing them in an array as the second parameter after the root component. - - ### Why register in *bootstrap*? - - We prefer to register application-wide providers in the metadata `providers` array - of the root `AppComponent` like this: - +makeExample('server-communication/ts/app/app.component.ts','http-providers')(format='.') + We add these modules to the application by passing them to the `imports` array in our root NgModule. +.l-sub-section :marked - Here we register the providers in the `bootstrap` method in the `main.ts` file. Why? - - This is a *sample application* that doesn't talk to a real server. - We're going to reconfigure the (typically-hidden) `XhrBackend` service with a fake provider - that fetches and saves sample data from an in-memory data store. - This replacement service is called the [*in-memory web api*](#in-mem-web-api). - - Such sleight-of-hand is something the root application component should *not* know about. - For this reason, and this reason *only*, we hide it *above* the `AppComponent` in `main.ts`. - + We need the HttpModule to make HTTP calls. + We don't need the JsonpModule for plain HTTP. + We will demonstrate JSONP support later in this chapter. + We're loading its module now to save time. .l-main-section#http-client :marked # The Tour of Heroes _HTTP_ Client Demo @@ -507,8 +495,8 @@ block wikipedia-jsonp+ +makeExample('server-communication/ts/app/wiki/wikipedia.service.ts',null,'app/wiki/wikipedia.service.ts') :marked The constructor expects Angular to inject its `jsonp` service. - We register that service with `JSONP_PROVIDERS` in the [component below](#wikicomponent) that calls our `WikipediaService`. - + We made that service available by importing the `JsonpModule` into our root NgModule. + :marked ### Search parameters @@ -543,9 +531,6 @@ block wikipedia-jsonp+ +makeExample('server-communication/ts/app/wiki/wiki.component.ts', null, 'app/wiki/wiki.component.ts') :marked - The `providers` array in the component metadata specifies the Angular `JSONP_PROVIDERS` collection that supports the `Jsonp` service. - We register that collection at the component level to make `Jsonp` injectable in the `WikipediaService`. - The component presents an `` element *search box* to gather search terms from the user. and calls a `search(term)` method after each `keyup` event. @@ -694,9 +679,9 @@ block redirect-to-web-api the in-memory web API service using standard Angular provider registration techniques. We initialize the in-memory web API with *seed data* from the mock hero dataset at the same time. :marked - Here is the revised (and final) version of app/main.ts> demonstrating these steps. + Here is the revised (and final) version of app/app.module.ts> demonstrating these steps. -+makeExcerpt('app/main.ts', 'final') ++makeExcerpt('app/app.module.ts') :marked See the full source code in the . diff --git a/public/docs/ts/latest/guide/structural-directives.jade b/public/docs/ts/latest/guide/structural-directives.jade index cd832d83d1..601367811b 100644 --- a/public/docs/ts/latest/guide/structural-directives.jade +++ b/public/docs/ts/latest/guide/structural-directives.jade @@ -284,7 +284,7 @@ block unless-intro +makeExample('structural-directives/ts/app/unless.directive.ts', null, 'unless.directive.ts') :marked - Now we add it to the `directives`array of the host component and try it. + Now we add it to the `declarations` array of the AppModule and try it. First we add some test HTML to the template: +makeExample('structural-directives/ts/app/structural-directives.component.html', 'myUnless')(format=".") diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index 0feeb5f8f8..e430b64a6d 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -1,5 +1,10 @@ include ../_util-fns +.alert.is-important + :marked + We are still preparing style recommendations for the new NgModules feature + introduced in RC5 and will add it to the style guide soon. + :marked Welcome to the Angular 2 Style Guide @@ -96,6 +101,7 @@ a(id='toc') +makeTabs( `style-guide/ts/01-01/main.ts, + style-guide/ts/01-01/app/app.module.ts, style-guide/ts/01-01/app/app.component.ts, style-guide/ts/01-01/app/heroes/heroes.component.ts, style-guide/ts/01-01/app/heroes/shared/hero.service.ts, @@ -103,6 +109,7 @@ a(id='toc') style-guide/ts/01-01/app/heroes/shared/mock-heroes.ts`, '', `main.ts, + app/app.module.ts, app/app.component.ts, app/heroes/heroes.component.ts, app/heroes/shared/hero.service.ts, diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 3e0fb06ce8..9cf213cb1d 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -858,8 +858,20 @@ block style-property-name-dart-diff header [()] = banana in a box :marked To remember that the parentheses go inside the brackets, visualize a *banana in a box*. + +.callout.is-important + header FormsModule is Required to use ngModel + :marked + Before we can use `ngModel` two-way data binding, we need to import the `FormsModule` + package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list + of external modules used by our application. +
    Learn more about the `FormsModule` and `ngModel` in the + [Forms](../guide/forms.html#ngModel) chapter. + ++makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)') + :marked - Alternatively, we can use the canonical prefix form: + Alternatively to using `[(ngModel)]`, we can use the canonical prefix form: +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".") :marked There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously. diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade index 4859c9551c..7777219c47 100644 --- a/public/docs/ts/latest/guide/testing.jade +++ b/public/docs/ts/latest/guide/testing.jade @@ -1,3 +1,8 @@ +.alert.is-important + :marked + We are still preparing the testing guide with all the new testing features + introduced in RC5 and will update it very soon. + :marked We write **unit tests** to explore and confirm the **behavior** of parts of our application. diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 4d906213c7..85b5a09bd6 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -1,5 +1,10 @@ include ../_util-fns +.alert.is-important + :marked + This guide is still in the process of being updated to RC5 and it's samples + may not work correctly. + :marked Having an existing Angular 1 application doesn't mean that we can't begin enjoying everything Angular 2 has to offer. That's because Angular 2 diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade index 83404e4295..b6dc9da3de 100644 --- a/public/docs/ts/latest/guide/webpack.jade +++ b/public/docs/ts/latest/guide/webpack.jade @@ -417,12 +417,14 @@ code-example(format=""). `webpack/ts/src/app/app.component.ts, webpack/ts/src/app/app.component.html, webpack/ts/src/app/app.component.css, - webpack/ts/src/app/app.component.spec.ts`, + webpack/ts/src/app/app.component.spec.ts, + webpack/ts/src/app/app.module.ts`, null, `src/app/app.component.ts, src/app/app.component.html, src/app/app.component.css, - src/app/app.component.spec.ts` + src/app/app.component.spec.ts, + src/app/app.module.ts` ) diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 5de3efe99c..90ccf172b1 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -37,9 +37,10 @@ figure.image-display - [Step 1](#create-and-configure): Create the app’s project folder and define package dependencies and special project setup - [Step 2](#root-component): Create the app’s Angular root component - - [Step 3](#main): Add main.ts, identifying the root component to Angular - - [Step 4](#index): Add `index.html`, the web page that hosts the application - - [Step 5](#build-and-run): Build and run the app + - [Step 3](#ngmodule): Create an Angular Module + - [Step 4](#main): Add main.ts, identifying the root component to Angular + - [Step 5](#index): Add `index.html`, the web page that hosts the application + - [Step 6](#build-and-run): Build and run the app - [Make some changes to the app](#make-some-changes) - [Wrap up](#wrap-up) @@ -112,7 +113,7 @@ block package-and-config-files li. #[b package.json] lists packages the QuickStart app depends on and defines some useful scripts. - See #[a(href="guide/npm-packages.html") Npm Package Configuration] for details. + See #[a(href="guide/npm-packages") Npm Package Configuration] for details. li. #[b tsconfig.json] is the TypeScript compiler configuration file. See #[a(href="#{_tsconfigUri}") TypeScript Configuration] for details. @@ -177,7 +178,7 @@ block install-packages package manager to install the libraries and packages their apps require. The Angular team recommends the starter-set of packages specified in the `dependencies` and `devDependencies` sections. - See the [npm packages](guide/npm-packages.html) chapter for details. + See the [npm packages](guide/npm-packages) chapter for details. #### Helpful scripts We've included a number of npm scripts in our suggested `package.json` to handle common development tasks: @@ -301,14 +302,47 @@ p. +ifDocsFor('ts') :marked We **export** `AppComponent` so that we can **import** it elsewhere in our application, - as we'll see when we create `main.ts`. + as we'll see when we create `app.module.ts`. .l-main-section -h2#main Step 3: Add #[code #[+adjExPath('main.ts')]] +h2#ngmodule Step 3: Our own #[code #[+adjExPath('app.module.ts')]] + +block create-ngmodule + :marked + We compose Angular apps into closely related blocks of functionality with [Angular Modules](guide/ngmodules.html). + Every app requires at least one module, the _root module_, that we call `AppModule` by convention. + p. + Create the file #[code #[+adjExPath('app/app.module.ts')]] with the following content: + ++makeExample('app/app.module.ts')(format='.') + +.l-verbose-section + :marked + We're passing metadata to the `NgModule` decorator function: + + 1. `imports` - the _other_ modules that export material we need in _this_ module. + Almost every application's _root module_ should import the `BrowserModule`. + + 1. `declarations` - components and directives that belong to _this_ module. + + 1. `bootstrap` - identifies the _root component_ that Angular should _bootstrap_ when it starts the application. + + We import our lone `app.component.ts` and add it to both the `declarations` and `bootstrap` arrays. + + ### Angular Modules import other modules + Notice that we also add the `BrowserModule` from `@angular/platform-browser` to the `imports` array. + This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser. + + Angular itself is split into separate Angular Modules so we only need to import the ones we really use. + + One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`. + +.l-main-section +h2#main Step 4: Add #[code #[+adjExPath('main.ts')]] block create-main p. - Now we need something to tell Angular to load the root component. + Now we need something to tell Angular to load the app module. Create the file #[code #[+adjExPath('app/main.ts')]] with the following content: +makeExample('app/main.ts') @@ -317,41 +351,40 @@ block create-main :marked We import the two things we need to launch the application: - 1. Angular's browser `bootstrap` function - 1. The application root component, `AppComponent`. + 1. Angular's browser `platformBrowserDynamic` function + 1. The application module, `AppModule`. - Then we call `bootstrap` with `AppComponent`. + Then we call `platformBrowserDynamic().bootstrapModule` with `AppComponent`. ### Bootstrapping is platform-specific - Notice that we import the `bootstrap` function from `#{_angular_browser_uri}`, + Notice that we import the `platformBrowserDynamic` function from `#{_angular_browser_uri}`, not `#{_angular_core_uri}`. Bootstrapping isn't core because there isn't a single way to bootstrap the app. True, most applications that run in a browser call the bootstrap function from this library. - But it is possible to load a component in a different environment. + But it is possible to load a module in a different environment. We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/). We might wish to render the first page of our application on the server to improve launch performance or facilitate [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf). These targets require a different kind of bootstrap function that we'd import from a different library. - ### Why create separate *main.ts* and app component files? + ### Why create separate *main.ts*, app module and app component files? - Both main.ts and the app component files are tiny. + Both main.ts, app module and the app component files are tiny. This is just a QuickStart. - We could have merged these two files into one - and spared ourselves some complexity. + We could have merged these three files into one and spared ourselves some complexity. We'd rather demonstrate the proper way to structure an Angular application. - App bootstrapping is a separate concern from presenting a view. + App bootstrapping is a separate concern from creating a module or presenting a view. Mixing concerns creates difficulties down the road. - We might launch the `AppComponent` in multiple environments with different bootstrappers. + We might launch the `AppModule` in multiple environments with different bootstrappers. Testing the component is much easier if it doesn't also try to run the entire application. Let's make the small extra effort to do it *the right way*. .l-main-section -h2#index Step 4: Add #[code index.html] +h2#index Step 5: Add #[code index.html] :marked In the *#{_indexHtmlDir}* folder create an `index.html` file and paste the following lines into it: @@ -465,8 +498,9 @@ h2#index Step 4: Add #[code index.html] a(id="my-app") :marked - When Angular calls the `bootstrap` function in main.ts, it reads the `AppComponent` - metadata, finds the `my-app` selector, locates an element tag named `my-app`, + When Angular calls the `bootstrapModule` function in main.ts, + it reads the `AppModule` metadata, sees that `AppComponent` is the bootstrap component, + finds the `my-app` selector, locates an element tag named `my-app`, and renders our application's view between those tags. :marked @@ -480,7 +514,7 @@ h2#index Step 4: Add #[code index.html] +makeExcerpt('styles.1.css') .l-main-section -h2#build-and-run Step 5: Build and run the app! +h2#build-and-run Step 6: Build and run the app! block run-app :marked Open a terminal window and enter this command: @@ -528,6 +562,7 @@ block project-file-structure .file app .children .file app.component.ts + .file app.module.ts .file main.ts .file node_modules ... .file typings ... @@ -543,6 +578,7 @@ block project-file-structure block project-files +makeTabs(` quickstart/ts/app/app.component.ts, + quickstart/ts/app/app.module.ts, quickstart/ts/app/main.ts, quickstart/ts/index.html, quickstart/ts/package.1.json, @@ -550,8 +586,10 @@ block project-files quickstart/ts/typings.1.json, quickstart/ts/styles.1.css, quickstart/ts/systemjs.config.1.js` - ,null, + , + ',,,,,,,,', `app/app.component.ts, + app/app.module.ts, app/main.ts, index.html, package.json, diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index 9ee468e456..c75a3f81fc 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -7,7 +7,7 @@ include ../_util-fns Run the for this part. - Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps + Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes. include ../_quickstart_repo @@ -20,9 +20,10 @@ include ../_quickstart_repo .file app .children .file app.component.ts + .file app.module.ts .file main.ts .file node_modules ... - .file typings ... + .file typings ... .file index.html .file package.json .file styles.css @@ -141,14 +142,22 @@ code-example(language="bash"). and see those changes wherever we bind to the hero’s name. In short, we want two-way data binding. - Let’s update the template to use the **`ngModel`** built-in directive for two-way binding. + Before we can use two-way data binding for **form inputs**, we need to import the `FormsModule` + package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list + of external modules used by our application. + Now we have included the forms package which includes `ngModel`. + ++makeExample('toh-1/ts/app/app.module.ts', '', 'app.module.ts (FormsModule import)') .l-sub-section :marked - Learn more about `ngModel` in the + Learn more about the `FormsModule` and `ngModel` in the [Forms](../guide/forms.html#ngModel) and [Template Syntax](../guide/template-syntax.html#ngModel) chapters. + :marked + Let’s update the template to use the **`ngModel`** built-in directive for two-way binding. + Replace the `` with the following HTML code-example(language="html"). @@ -163,7 +172,7 @@ code-example(language="html"). ## The Road We’ve Travelled Let’s take stock of what we’ve built. - * Our Tour of Heroes uses the double curly braces of interpolation (a form of one-way data binding) + * Our Tour of Heroes uses the double curly braces of interpolation (a kind of one-way data binding) to display the application title and properties of a `Hero` object. * We wrote a multi-line template using ES2015’s template strings to make our template readable. * We can both display and change the hero’s name after adding a two-way data binding to the `` element @@ -182,5 +191,5 @@ code-example(language="html"). Our Tour of Heroes only displays one hero and we really want to display a list of heroes. We also want to allow the user to select a hero and display their details. We’ll learn more about how to retrieve lists, bind them to the - template, and allow a user to select it in the + template, and allow a user to select a hero in the [next tutorial chapter](./toh-pt2.html). diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade index ce7c919672..75fdf2a293 100644 --- a/public/docs/ts/latest/tutorial/toh-pt2.jade +++ b/public/docs/ts/latest/tutorial/toh-pt2.jade @@ -25,6 +25,7 @@ include ../_util-fns .file app .children .file app.component.ts + .file app.module.ts .file main.ts .file node_modules ... .file typings ... diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade index b45cd4980c..3171fe4c14 100644 --- a/public/docs/ts/latest/tutorial/toh-pt3.jade +++ b/public/docs/ts/latest/tutorial/toh-pt3.jade @@ -17,6 +17,7 @@ include ../_util-fns .file app .children .file app.component.ts + .file app.module.ts .file main.ts .file node_modules ... .file typings ... @@ -149,15 +150,26 @@ code-example(format="."). .l-main-section :marked - ## Refresh the AppComponent - We return to the `AppComponent` and teach it to use the `HeroDetailComponent`. + ## Refresh the AppModule + We return to the `AppModule`, the application's root module, and teach it to use the `HeroDetailComponent`. We begin by importing the `HeroDetailComponent` so we can refer to it. -+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-import') ++makeExample('toh-3/ts/app/app.module.ts', 'hero-detail-import') :marked - Find the location in the template where we removed the *Hero Detail* content + Then we add `HeroDetailComponent` to the `NgModule` decorator's `declarations` array. + This array contains the list of all components, pipes, and directives that we created + and that belong in our application's module. + ++makeExample('toh-3/ts/app/app.module.ts', 'declarations') + +.l-main-section +:marked + ## Refresh the AppComponent +:marked + Now that the application knows about our `HeroDetailComponent`, + find the location in the `AppComponent` template where we removed the *Hero Detail* content and add an element tag that represents the `HeroDetailComponent`. code-example(format="."). <my-hero-detail></my-hero-detail> @@ -177,21 +189,6 @@ code-example(format=".") Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list. The detail should update every time the user picks a new hero. - It's not happening yet! - - We click among the heroes. No details. We look for an error in the console of the browser development tools. No error. - - It is as if Angular were ignoring the new tag. That's because *it is ignoring the new tag*. - - ### The *directives* array - A browser ignores HTML tags and attributes that it doesn't recognize. So does Angular. - - We've imported `HeroDetailComponent`, we've used it in the template, but we haven't told Angular about it. - - We tell Angular about it by listing it in the metadata `directives` array. Let's add that array property to the bottom of the - `@Component` configuration object, immediately after the `template` and `styles` properties. -+makeExample('toh-3/ts/app/app.component.ts', 'directives', 'app/app.component.ts (Directives)') - :marked ### It works! When we view our app in the browser we see the list of heroes. @@ -211,6 +208,7 @@ code-example(format=".") .file app .children .file app.component.ts + .file app.module.ts .file hero.ts .file hero-detail.component.ts .file main.ts @@ -226,12 +224,14 @@ code-example(format=".") +makeTabs(` toh-3/ts/app/hero-detail.component.ts, toh-3/ts/app/app.component.ts, - toh-3/ts/app/hero.ts + toh-3/ts/app/hero.ts, + toh-3/ts/app/app.module.ts, `,'',` app/hero-detail.component.ts, app/app.component.ts, - app/hero.ts - `) + app/hero.ts, + app/app.module.ts + `) .l-main-section :marked @@ -240,8 +240,9 @@ code-example(format=".") * We created a reusable component * We learned how to make a component accept input + * We learned to declare the application directives we need in an Angular module. We + list the directives in the `NgModule` decorator's `declarations` array. * We learned to bind a parent component to a child component. - * We learned to declare the application directives we need in a `directives` array. Run the for this part. diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade index 12660bf643..920be42806 100644 --- a/public/docs/ts/latest/tutorial/toh-pt4.jade +++ b/public/docs/ts/latest/tutorial/toh-pt4.jade @@ -29,6 +29,7 @@ include ../_util-fns .file app .children .file app.component.ts + .file app.module.ts .file hero.ts .file hero-detail.component.ts .file main.ts @@ -308,6 +309,7 @@ a#child-component .file app .children .file app.component.ts + .file app.module.ts .file hero.ts .file hero-detail.component.ts .file hero.service.ts diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 243a92d7e1..60954ae6e1 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -39,6 +39,7 @@ figure.image-display .file app .children .file app.component.ts + .file app.module.ts .file hero.ts .file hero-detail.component.ts .file hero.service.ts @@ -109,23 +110,29 @@ code-example(language="bash"). * create a new file named `app.component.ts`. * define an `AppComponent` class. - * `export` it so we can reference it during bootstrapping in `main.ts`. + * `export` it so we can reference it during bootstrapping in `app.module.ts`. * expose an application `title` property. * add the `@Component` metadata decorator above the class with a `my-app` selector. * add a template with `

    ` tags surrounding a binding to the `title` property. * add the `` tags to the template so we still see the heroes. - * 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 `HeroesComponent` to the root NgModule's `declarations` array so Angular recognizes the `` tags. + * add the `HeroService` to the root NgModule's `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)') ++makeTabs( + `toh-5/ts/app/app.component.1.ts, + toh-5/ts/app/app.module.1.ts`, + ',', + `app/app.component.ts (v1), + app/app.module.ts (v1)`) + :marked .callout.is-critical header Remove HeroService from the HeroesComponent providers :marked Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` array. - We are *promoting* this service from the `HeroesComponent` to the `AppComponent`. + We are *promoting* this service from the `HeroesComponent` to the root `NgModule`. 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. @@ -149,22 +156,22 @@ code-example(language="bash"). :marked See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters. :marked - 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: + The Angular router is a combination of multiple provided services (`RouterModule`), multiple directives (`RouterOutlet, + RouterLink, RouterLinkActive`), and a configuration (`Routes`). We'll configure our routes first: - ### Configure and add the router + ### Configure the routes - 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 + The *Component Router* is an external, optional Angular NgModule called `RouterModule`. + Our application doesn't have any routes yet. + Start by creating a configuration file for the application routes. *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.routes.2.ts', '', 'app/app.routes.ts')(format=".") + Our first route goes to the `HeroesComponent`. ++makeExample('toh-5/ts/app/app.routing.1.ts', 'routing-config', 'app/app.routing.ts (heroes route)')(format=".") :marked - The `RouterConfig` is an array of *route definitions*. + The `Routes` are 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: @@ -174,24 +181,37 @@ code-example(language="bash"). .l-sub-section :marked - Learn more about defining routes with RouterConfig in the [Routing](../guide/router.html) chapter. + Learn more about defining routes with Routes in the [Routing](../guide/router.html) chapter. + +:marked + We'll export the `routing` constant using the **RouterModule.forRoot** method with our array of routes. + This returns a configured router module we'll add to our root NgModule, `AppModule`. + ++makeExample('toh-5/ts/app/app.routing.1.ts', 'routing-export', 'app/app.routing.ts (routing export)')(format=".") +.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. - The *Component Router* is a service. We have to import our `appRouterProviders` 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=".") + We've setup our initial routes in our `app.routing.ts` file. Now we'll add it to our root NgModule. + + We'll import our `routing` constant from our `app.routing.ts` file and add it root NgModule's `imports` array. + + We'll also import our `HeroesComponent` and add it to our `declarations` array. + ++makeExample('toh-5/ts/app/app.module.2.ts', '', 'app/app.module.ts')(format=".") :marked ### Router Outlet If we paste the path, `/heroes`, into the browser address bar, - the router should match it to the `'Heroes'` route and display the `HeroesComponent`. + 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`. + `RouterOutlet` is one of the directives provided by the `RouterModule`. The router displays each component immediately below the `` as we navigate through the application. ### Router Links @@ -201,16 +221,15 @@ code-example(language="bash"). 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. - We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array + Notice the `routerLink` binding in the anchor tag. + We bind the `RouterLink` directive (another of the `RouterModule` directives) to a string 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 ***path* of the route** to follow. + Since our link is not dynamic, we define a *routing instruction* with a **one-time binding** to our route **path**. 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.html#link-parameters-array) chapter. + For more dynamic router links, 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. .l-sub-section @@ -241,12 +260,18 @@ code-example(language="bash"). We’ll come back and make it more useful later. ### Configure the dashboard route - Go back to `app.routes.ts` and teach it to navigate to the dashboard. + Go back to `app.routing.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=".") + Add the following `'Dashboard'` route definition to the `Routes` array of definitions. ++makeExample('toh-5/ts/app/app.routing.2.ts','dashboard-route', 'app/app.routing.ts (Dashboard route)')(format=".") + +:marked + We also need to add the `DashboardComponent` to our root NgModule's `declarations`. + ++makeExample('toh-5/ts/app/app.module.3.ts','dashboard-declaration', 'app/app.module.ts (Dashboard declaration)')(format=".") + .l-sub-section :marked **Redirect** @@ -256,7 +281,7 @@ code-example(language="bash"). 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=".") ++makeExample('toh-5/ts/app/app.routing.2.ts','redirect-route', 'app/app.routing.ts (Redirect route)')(format=".") .l-sub-section :marked @@ -265,7 +290,7 @@ code-example(language="bash"). :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=".") ++makeExample('toh-5/ts/app/app.component.3.ts','template', 'app/app.component.ts (template)')(format=".") .l-sub-section :marked We nestled the two links within `