docs(rc5): update docs and plunkers for rc5

This commit is contained in:
Peter Bacon Darwin 2016-08-09 17:38:25 +01:00 committed by Naomi Black
parent 2fb503dabf
commit d79adb2422
374 changed files with 4612 additions and 2294 deletions

View File

@ -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() {

View File

@ -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",

View File

@ -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 { }

View File

@ -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 {

View File

@ -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);

View File

@ -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: `
<hero-list></hero-list>
<sales-tax></sales-tax>
`,
directives: [HeroListComponent, SalesTaxComponent]
<hero-list></hero-list>
<sales-tax></sales-tax>
`
})
// #docregion export
export class AppComponent { }

View File

@ -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

View File

@ -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;

View File

@ -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

View File

@ -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);

View File

@ -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);

View File

@ -14,7 +14,7 @@ import { TaxRateService } from './tax-rate.service';
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
</div>
`,
providers: [SalesTaxService, TaxRateService]
providers: [SalesTaxService, TaxRateService]
})
export class SalesTaxComponent {
constructor(private salesTaxService: SalesTaxService) { }

View File

@ -1,9 +1,7 @@
<!DOCTYPE html>
<!-- #docregion -->
<html>
<head>
<base href="/">
<title>Router Sample v.3</title>
<title>Architecture of Angular 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
@ -17,15 +15,12 @@
<script src="systemjs.config.js"></script>
<script>
System.import('app/main.3') // <----- ONLY CHANGE
.catch(function(err){ console.error(err); });
System.import('app/mini-app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<h1>Milestone 3</h1>
<my-app>loading...</my-app>
<my-app>Loading...</my-app>
</body>
</html>
<!-- #enddocregion -->

View File

@ -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

View File

@ -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 { }

View File

@ -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);

View File

@ -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 {

View File

@ -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 { }

View File

@ -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 { }

View File

@ -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)
];

View File

@ -1,5 +0,0 @@
// #docregion
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

View File

@ -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);

View File

@ -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

View File

@ -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 { }

View File

@ -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 { }

View File

@ -19,7 +19,6 @@ import { CountdownTimerComponent } from './countdown-timer.component';
<div class="seconds">{{timer.seconds}}</div>
<countdown-timer #timer></countdown-timer>
`,
directives: [CountdownTimerComponent],
styleUrls: ['demo.css']
})
export class CountdownLocalVarParentComponent { }
@ -36,7 +35,6 @@ export class CountdownLocalVarParentComponent { }
<div class="seconds">{{ seconds() }}</div>
<countdown-timer></countdown-timer>
`,
directives: [CountdownTimerComponent],
styleUrls: ['demo.css']
})
export class CountdownViewChildParentComponent implements AfterViewInit {

View File

@ -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">
</hero-child>
`,
directives: [HeroChildComponent]
`
})
export class HeroParentComponent {
heroes = HEROES;

View File

@ -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);

View File

@ -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';
<li *ngFor="let event of history">{{event}}</li>
</ul>
`,
directives: [AstronautComponent],
providers: [MissionService]
})
export class MissionControlComponent {

View File

@ -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';
<name-child *ngFor="let name of names"
[name]="name">
</name-child>
`,
directives: [NameChildComponent]
`
})
export class NameParentComponent {
// Displays 'Mr. IQ', '<no name set>', 'Bombasto'

View File

@ -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';
<button (click)="newMinor()">New minor version</button>
<button (click)="newMajor()">New major version</button>
<version-child [major]="major" [minor]="minor"></version-child>
`,
directives: [VersionChildComponent]
`
})
export class VersionParentComponent {
major: number = 1;

View File

@ -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)">
</my-voter>
`,
directives: [VoterComponent]
`
})
export class VoteTakerComponent {
agreed = 0;

View File

@ -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 { }

View File

@ -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);

View File

@ -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

View File

@ -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

View File

@ -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';
<hero-bio [heroId]="1"></hero-bio>
<hero-bio [heroId]="2"></hero-bio>
<hero-bio [heroId]="3"></hero-bio>`,
directives: [HeroBioComponent],
providers: [HeroService]
})
export class HeroBiosComponent {
@ -39,7 +36,6 @@ export class HeroBiosComponent {
<hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio>
<hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`,
// #enddocregion template
directives: [HeroBioComponent, HeroContactComponent],
// #docregion class-provider
providers: [HeroService]
// #enddocregion class-provider

View File

@ -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);

View File

@ -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
<bob></bob>
<carol></carol>
</div> `,
directives: [ B_DIRECTIVES, C_DIRECTIVES ],
// #docregion alice-providers
providers: [ provideParent(AliceComponent) ]
// #enddocregion alice-providers
@ -224,7 +210,6 @@ export class CathyComponent {
template: `
<h2>Parent Finder</h2>
<alex></alex>
<alice></alice>`,
directives: [ AlexComponent, AliceComponent ]
<alice></alice>`
})
export class ParentFinderComponent { }

View File

@ -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, []);

View File

@ -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';
<dynamic-form [questions]="questions"></dynamic-form>
</div>
`,
directives: [DynamicFormComponent],
providers: [QuestionService]
})
export class AppComponent {

View File

@ -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() {
}
}

View File

@ -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<any>;

View File

@ -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 {

View File

@ -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);

View File

@ -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 { }

View File

@ -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);

View File

@ -36,12 +36,22 @@
selector: 'hero-di-inject-additional',
template: '<hero-title title="Tour of Heroes">' +
'<span #okMsg class="ok-msg"></span>' +
'</hero-title>',
directives: [TitleComponent]
'</hero-title>'
}).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 || {});

View File

@ -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 || {});

View File

@ -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 || {});

View File

@ -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 || {});

View File

@ -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

View File

@ -42,8 +42,7 @@
'(cancel)="onCancel()">' +
'</my-confirm>' +
'<span *ngIf="okClicked">OK clicked</span>' +
'<span *ngIf="cancelClicked">Cancel clicked</span>',
directives: [ConfirmComponent]
'<span *ngIf="cancelClicked">Cancel clicked</span>'
})
];
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 || {});

View File

@ -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 || {});

View File

@ -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;

View File

@ -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 || {});

View File

@ -7,7 +7,7 @@
'Active' +
'</span>'
}).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 @@
'</a-hero>' +
'<button (click)="activate()">' +
'Activate' +
'</button>',
directives: [
HeroComponent,
ActiveLabelComponent
],
'</button>',
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 || {});

View File

@ -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

View File

@ -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 {
<ng-content></ng-content>
`
})
export class TitleComponent {
class TitleComponent {
constructor(
@Inject('titlePrefix')
@Optional()
@ -40,9 +42,16 @@ export class TitleComponent {
selector: 'hero-di-inject-additional',
template: `<hero-title title="Tour of Heroes">
<span #okMsg class="ok-msg"></span>
</hero-title>`,
directives: [TitleComponent]
</hero-title>`
})
export class AppComponent {
class AppComponent { }
}
@NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
TitleComponent
],
bootstrap: [ AppComponent ]
})
export class HeroesDIInjectAdditionalModule { }

View File

@ -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: `<h1>Hero: {{name}}</h1>`
})
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 { }

View File

@ -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: `<h1>Hero: {{name}}</h1>`
})
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 { }

View File

@ -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';
</button>
`
})
export class ConfirmComponent {
class ConfirmComponent {
@Input() okMsg: string;
@Input('cancelMsg') notOkMsg: string;
@Output() ok =
@ -40,10 +47,9 @@ export class ConfirmComponent {
</my-confirm>
<span *ngIf="okClicked">OK clicked</span>
<span *ngIf="cancelClicked">Cancel clicked</span>
`,
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 { }

View File

@ -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: `<h1>Hero: {{name}}</h1>`
})
// #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 { }

View File

@ -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 { }

View File

@ -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: `<h1 [class.active]="active">
Tour ofHeroes
Tour of Heroes
</h1>`
})
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 { }

View File

@ -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 {
<button (click)="activate()">
Activate
</button>
`,
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 { }

View File

@ -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);

View File

@ -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 { }

View File

@ -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';
<hero-details [hero]=hero [class.active]=hero.active>
<hero-controls [hero]=hero></hero-controls>
</hero-details>
`,
directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
`
})
export class HeroAppMainComponent {
@Input() hero: Hero;

View File

@ -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: `
<h1>Tour of Heroes</h1>
<hero-app-main [hero]=hero></hero-app-main>`,
styles: ['h1 { font-weight: normal; }'],
directives: [HeroAppMainComponent]
styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
// #enddocregion

View File

@ -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';
<hero-team [hero]=hero></hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css'],
directives: [HeroTeamComponent]
styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
// #enddocregion styleurls

View File

@ -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);

View File

@ -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: `
<h1>{{title}}</h1>
<my-car></my-car>
<my-heroes></my-heroes>
`,
directives: [CarComponent, HeroesComponent]
`
})
export class AppComponent {

View File

@ -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';
<h1>{{title}}</h1>
<my-car></my-car>
<my-heroes></my-heroes>
`,
directives: [CarComponent, HeroesComponent],
providers: [
Logger,
// #docregion providers
{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
// #enddocregion providers
]
`
})
export class AppComponent {
title: string;

View File

@ -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';
<my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
<my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
`,
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;

View File

@ -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

View File

@ -18,7 +18,7 @@ import { HeroService } from './hero.service';
<div *ngFor="let hero of heroes">
{{hero.id}} - {{hero.name}}
</div>
`,
`
})
export class HeroListComponent {
heroes: Hero[];

View File

@ -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: `
<h2>Heroes</h2>
<hero-list></hero-list>
`,
// #enddocregion v1
providers: [HeroService],
// #docregion v1
directives: [HeroListComponent]
`
})
export class HeroesComponent { }

View File

@ -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';
<h2>Heroes</h2>
<hero-list></hero-list>
`,
providers: [heroServiceProvider],
directives: [HeroListComponent]
providers: [heroServiceProvider]
})
export class HeroesComponent { }

View File

@ -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
}

View File

@ -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);

View File

@ -1,5 +1,6 @@
// #docregion
import { Component } from '@angular/core';
// #docregion import
import { Hero } from './hero';
// #enddocregion import

View File

@ -1,6 +1,7 @@
// #docplaster
// #docregion final
import { Component } from '@angular/core';
import { Hero } from './hero';
@Component({

View File

@ -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 { }

View File

@ -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);

View File

@ -3,8 +3,7 @@
app.AppComponent = ng.core
.Component({
selector: 'my-app',
template: '<hero-form></hero-form>',
directives: [app.HeroFormComponent]
template: '<hero-form></hero-form>'
})
.Class({
constructor: function() {}

View File

@ -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 = {}));

View File

@ -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;
},

View File

@ -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 = {}));

View File

@ -35,6 +35,7 @@
<!-- #enddocregion scripts-hero-form -->
<!-- #docregion scripts, scripts-hero, scripts-hero-form -->
<script src='app/app.component.js'></script>
<script src='app/app.module.js'></script>
<script src='app/main.js'></script>
<!-- #enddocregion scripts, scripts-hero, scripts-hero-form -->
</head>

View File

@ -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: '<hero-form></hero-form>',
directives: [HeroFormComponent]
template: '<hero-form></hero-form>'
})
export class AppComponent { }

View File

@ -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 { }

View File

@ -11,11 +11,13 @@
<div class="form-group">
<!-- #docregion name-with-error-msg -->
<label for="name">Name</label>
<input type="text" class="form-control" required
[(ngModel)]="model.name"
name="name" #name="ngModel" >
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel" >
<!-- #docregion hidden-error-msg -->
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
<!-- #enddocregion hidden-error-msg -->
Name is required
</div>
@ -24,16 +26,16 @@
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control"
[(ngModel)]="model.alterEgo"
name="alterEgo" >
<input type="text" class="form-control" id="alterEgo"
[(ngModel)]="model.alterEgo" name="alterEgo" >
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" required
[(ngModel)]="model.power"
name="power" #power="ngModel" >
<select class="form-control" id="power"
required
[(ngModel)]="model.power" name="power"
#power="ngModel" >
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
<div [hidden]="power.valid || power.pristine" class="alert alert-danger">
@ -111,19 +113,19 @@
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" required>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control">
<input type="text" class="form-control" id="alterEgo">
</div>
<!-- #enddocregion start -->
<!-- #docregion powers -->
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" required>
<select class="form-control" id="power" required>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
</div>
@ -147,20 +149,22 @@
{{diagnostic}}
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" required
[(ngModel)]="model.name" name="name">
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name">
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control"
[(ngModel)]="model.alterEgo" name="alterEgo">
<input type="text" class="form-control" id="alterEgo"
[(ngModel)]="model.alterEgo" name="alterEgo">
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" required
[(ngModel)]="model.power" name="power">
<select class="form-control" id="power"
required
[(ngModel)]="model.power" name="power">
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
</div>
@ -175,15 +179,17 @@
<!-- EXTRA MATERIAL FOR DOCUMENTATION -->
<hr>
<!-- #docregion ngModel-1-->
<input type="text" class="form-control" required
[(ngModel)]="model.name" name="name">
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name">
TODO: remove this: {{model.name}}
<!-- #enddocregion ngModel-1-->
<hr>
<!-- #docregion ngModel-3-->
<input type="text" class="form-control" required
[ngModel]="model.name"
(ngModelChange)="model.name = $event" >
<input type="text" class="form-control" id="name"
required
[ngModel]="model.name" name="name"
(ngModelChange)="model.name = $event" >
TODO: remove this: {{model.name}}
<!-- #enddocregion ngModel-3-->
<hr>
@ -192,15 +198,16 @@
<!-- #enddocregion form-active -->
<!-- #docregion ngModelName-1 -->
<input type="text" class="form-control" required
[(ngModel)]="model.name"
name="name" >
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name" >
<!-- #enddocregion ngModelName-1 -->
<hr>
<!-- #docregion ngModelName-2 -->
<input type="text" class="form-control" required
[(ngModel)]="model.name"
name="name" #spy >
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#spy >
<br>TODO: remove this: {{spy.className}}
<!-- #enddocregion ngModelName-2 -->
</form>

View File

@ -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

View File

@ -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);

View File

@ -7,7 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- #docregion bootstrap -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- #enddocregion bootstrap -->
<!-- #docregion styles -->
<link rel="stylesheet" href="styles.css">

View File

@ -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
*/

Some files were not shown because too many files have changed in this diff Show More