docs(router): heavy copy edits (#3021)

This commit is contained in:
Ward Bell 2016-12-21 12:08:39 -08:00 committed by GitHub
parent cf65d9624d
commit bc91b35bd9
57 changed files with 1421 additions and 1606 deletions

View File

@ -28,13 +28,13 @@ describe('Router', function () {
adminHref: hrefEles.get(2),
adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
loginHref: hrefEles.get(3),
loginButton: element.all(by.css('my-app > ng-component > p > button')),
contactHref: hrefEles.get(4),
contactCancelButton: element.all(by.buttonText('Cancel')),
outletComponents: element.all(by.css('my-app > ng-component'))
};
}

View File

@ -2,7 +2,8 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { PreloadSelectedModules } from '../selective-preload-strategy';
import { SelectivePreloadingStrategy } from '../selective-preloading-strategy';
import 'rxjs/add/operator/map';
@ -27,7 +28,7 @@ export class AdminDashboardComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private preloadStrategy: PreloadSelectedModules
private preloadStrategy: SelectivePreloadingStrategy
) {
this.modules = preloadStrategy.preloadedModules;
}

View File

@ -8,7 +8,6 @@ import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route
import { AuthGuard } from '../auth-guard.service';
const adminRoutes: Routes = [

View File

@ -1,4 +1,3 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@ -22,7 +21,4 @@ import { AdminRoutingModule } from './admin-routing.module';
ManageHeroesComponent
]
})
// #docregion admin-module-export
export class AdminModule {}
// #enddocregion admin-module-export
// #enddocregion

View File

@ -0,0 +1,26 @@
// #docregion
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
]);

View File

@ -1,17 +1,19 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { PageNotFoundComponent }from './not-found.component';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';
// #docregion appRoutes
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent },
{ path: 'heroes', component: HeroListComponent },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
// #enddocregion appRoutes
@NgModule({
imports: [

View File

@ -1,13 +1,15 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// #docregion v2
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { PageNotFoundComponent }from './not-found.component';
import { CrisisListComponent } from './crisis-list.component';
import { PageNotFoundComponent } from './not-found.component';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

View File

@ -1,17 +1,23 @@
// #docplaster
// #docregion , v3
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComposeMessageComponent } from './compose-message.component';
import { PageNotFoundComponent } from './not-found.component';
const appRoutes: Routes = [
// #enddocregion v3
// #docregion compose
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'modal'
}
outlet: 'popup'
},
// #enddocregion compose
// #docregion v3
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({

View File

@ -1,17 +1,19 @@
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent }from './not-found.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComposeMessageComponent } from './compose-message.component';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { ComposeMessageComponent } from './compose-message.component';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { PageNotFoundComponent } from './not-found.component';
const appRoutes: Routes = [
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'modal'
}
outlet: 'popup'
},
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({

View File

@ -6,26 +6,28 @@ import { RouterModule, Routes } from '@angular/router';
// #enddocregion import-router
import { ComposeMessageComponent } from './compose-message.component';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
// #docregion can-load-guard
import { AuthGuard } from './auth-guard.service';
// #enddocregion can-load-guard
import { PageNotFoundComponent } from './not-found.component';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { AuthGuard } from './auth-guard.service';
// #docregion lazy-load-admin, can-load-guard
const appRoutes: Routes = [
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'modal'
outlet: 'popup'
},
// #docregion admin, admin-1
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
// #enddocregion lazy-load-admin
// #enddocregion admin-1
canLoad: [AuthGuard]
// #docregion lazy-load-admin
// #docregion admin-1
},
// #enddocregion admin, admin-1
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

View File

@ -9,6 +9,8 @@ import {
} from '@angular/router';
import { ComposeMessageComponent } from './compose-message.component';
import { PageNotFoundComponent } from './not-found.component';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { AuthGuard } from './auth-guard.service';
@ -16,33 +18,31 @@ const appRoutes: Routes = [
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'modal'
outlet: 'popup'
},
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
},
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
// #docregion forRoot
RouterModule.forRoot(
appRoutes
// #enddocregion preload-v1
, { preloadingStrategy: PreloadAllModules }
// #docregion preload-v1
)
// #enddocregion forRoot
],
exports: [
RouterModule

View File

@ -4,42 +4,39 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComposeMessageComponent } from './compose-message.component';
import { PageNotFoundComponent } from './not-found.component';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { AuthGuard } from './auth-guard.service';
import { PreloadSelectedModules } from './selective-preload-strategy';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
const appRoutes: Routes = [
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'modal'
outlet: 'popup'
},
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
// #docregion preload-v2
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
data: {
preload: true
}
}
data: { preload: true }
},
// #enddocregion preload-v2
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ preloadingStrategy: PreloadSelectedModules }
{ preloadingStrategy: SelectivePreloadingStrategy }
)
],
exports: [
@ -47,7 +44,7 @@ const appRoutes: Routes = [
],
providers: [
CanDeactivateGuard,
PreloadSelectedModules
SelectivePreloadingStrategy
]
})
export class AppRoutingModule {}

View File

@ -15,5 +15,4 @@ import { Component } from '@angular/core';
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
export class AppComponent { }

View File

@ -46,5 +46,4 @@ import { Router } from '@angular/router';
`
// #enddocregion template
})
export class AppComponent {
}
export class AppComponent { }

View File

@ -9,14 +9,15 @@ import { Component } from '@angular/core';
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
// #docregion contact-link
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
// #enddocregion contact-link
</nav>
// #docregion outlets
<router-outlet></router-outlet>
// #enddocregion template
<router-outlet name="modal"></router-outlet>
// #enddocregion template
`
<router-outlet name="popup"></router-outlet>
// #enddocregion outlets
`
// #enddocregion template
})
export class AppComponent {
}
export class AppComponent { }

View File

@ -0,0 +1,20 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
// #docregion template
template: `
<h1 class="title">Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
`
// #enddocregion template
})
export class AppComponent { }

View File

@ -12,10 +12,10 @@ import { Component } from '@angular/core';
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
<a [routerLink]="[{ outlets: { modal: ['compose'] } }]">Contact</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
<router-outlet name="popup"></router-outlet>
`
// #enddocregion template
})

View File

@ -1,53 +1,41 @@
// NEVER USED. For docs only. Should compile though
// #docplaster
// #docregion
// #docregion router-basics
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroListComponent } from './hero-list.component';
import { CrisisListComponent } from './crisis-list.component';
import { PageNotFoundComponent } from './not-found.component';
import { PageNotFoundComponent as HeroDetailComponent } from './not-found.component';
import { PageNotFoundComponent as HomeComponent } from './not-found.component';
// #docregion route-config
// #docregion
const appRoutes: Routes = [
// #docregion route-defs
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent },
// #enddocregion hero-detail-route
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: {
title: 'Heroes List'
}
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '', component: HomeComponent },
// #enddocregion route-defs
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes)
// other imports here
],
declarations: [
AppComponent,
HeroListComponent,
HeroDetailComponent,
CrisisListComponent,
PageNotFoundComponent
],
bootstrap: [ AppComponent ]
})
// #enddocregion router-basics
export class AppModule {
}
// #enddocregion
/*
// #docregion
...
})
export class AppModule { }
// #enddocregion
*/
})
export class AppModule0 { }

View File

@ -8,20 +8,26 @@ import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
// #enddocregion import-router
import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
// #enddocregion first-config
import { PageNotFoundComponent }from './not-found.component';
import { PageNotFoundComponent } from './not-found.component';
// #docregion first-config
// #docregion appRoutes
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent },
// #enddocregion first-config
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
// #docregion wildcard
{ path: '**', component: PageNotFoundComponent }
// #enddocregion wildcard
// #docregion first-config
];
// #enddocregion appRoutes
@NgModule({
imports: [
@ -39,6 +45,5 @@ const appRoutes: Routes = [
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
export class AppModule { }
// #enddocregion

View File

@ -8,9 +8,9 @@ import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { PageNotFoundComponent }from './not-found.component';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';
@NgModule({
imports: [
@ -27,6 +27,5 @@ import { PageNotFoundComponent }from './not-found.component';
bootstrap: [ AppComponent ]
})
// #enddocregion hero-import
export class AppModule {
}
export class AppModule { }
// #enddocregion

View File

@ -1,17 +1,14 @@
// #docplaster
// #docregion
// #docregion hero-import
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
import { HeroesModule } from './heroes/heroes.module';
import { CrisisListComponent } from './crisis-list.component';
import { PageNotFoundComponent } from './not-found.component';
import { CrisisListComponent } from './crisis-list.component';
import { PageNotFoundComponent } from './not-found.component';
@NgModule({
imports: [
@ -27,7 +24,4 @@ import { PageNotFoundComponent } from './not-found.component';
],
bootstrap: [ AppComponent ]
})
// #enddocregion hero-import
export class AppModule {
}
// #enddocregion
export class AppModule { }

View File

@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './not-found.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
// #docregion crisis-center-module
@ -34,14 +35,14 @@ import { DialogService } from './dialog.service';
declarations: [
AppComponent,
// #enddocregion admin-module, crisis-center-module
ComposeMessageComponent
ComposeMessageComponent,
// #docregion admin-module, crisis-center-module
PageNotFoundComponent
],
providers: [
DialogService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
export class AppModule { }
// #enddocregion

View File

@ -9,7 +9,9 @@ import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
import { ComposeMessageComponent } from './compose-message.component';
import { PageNotFoundComponent } from './not-found.component';
import { AdminModule } from './admin/admin.module';
import { DialogService } from './dialog.service';
@ -25,13 +27,12 @@ import { DialogService } from './dialog.service';
],
declarations: [
AppComponent,
ComposeMessageComponent
ComposeMessageComponent,
PageNotFoundComponent
],
providers: [
DialogService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion
export class AppModule { }

View File

@ -4,7 +4,8 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './not-found.component';
const routes: Routes = [
@ -17,12 +18,12 @@ const routes: Routes = [
RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
],
declarations: [
AppComponent
AppComponent,
PageNotFoundComponent
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
export class AppModule { }

View File

@ -4,15 +4,14 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PageNotFoundComponent }from './not-found.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
import { ComposeMessageComponent } from './compose-message.component';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { PageNotFoundComponent } from './not-found.component';
import { DialogService } from './dialog.service';
@ -28,12 +27,12 @@ import { DialogService } from './dialog.service';
declarations: [
AppComponent,
ComposeMessageComponent,
LoginComponent
LoginComponent,
PageNotFoundComponent
],
providers: [
DialogService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
export class AppModule { }

View File

@ -3,16 +3,16 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './not-found.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
import { ComposeMessageComponent } from './compose-message.component';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { HeroesModule } from './heroes/heroes.module';
import { ComposeMessageComponent } from './compose-message.component';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { PageNotFoundComponent } from './not-found.component';
import { DialogService } from './dialog.service';
import { DialogService } from './dialog.service';
@NgModule({
imports: [
@ -25,13 +25,12 @@ import { DialogService } from './dialog.service';
declarations: [
AppComponent,
ComposeMessageComponent,
LoginComponent
LoginComponent,
PageNotFoundComponent
],
providers: [
DialogService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion
export class AppModule { }

View File

@ -1,5 +1,4 @@
// #docplaster
// #docregion, admin-can-load
import { Injectable } from '@angular/core';
import {
CanActivate, Router,
@ -25,12 +24,13 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
return this.canActivate(route, state);
}
// #docregion, canLoad
canLoad(route: Route): boolean {
let url = `/${route.path}`;
return this.checkLogin(url);
}
// #enddocregion admin-can-load
// #enddocregion canLoad
checkLogin(url: string): boolean {
if (this.authService.isLoggedIn) { return true; }

View File

@ -1,108 +0,0 @@
// #docplaster
// #docregion
// #docregion v1
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
import { Component, HostBinding,
trigger, transition,
animate, style, state } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Component({
template: `
<h3>Contact Crisis Center</h3>
<div *ngIf="details">
{{ details }}
</div>
<div>
<div>
<label>Message: </label>
</div>
<div>
<textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
</div>
</div>
<p *ngIf="!sending">
<button (click)="send()">Send</button>
// #enddocregion v1
<button (click)="cancel()">Cancel</button>
// #docregion v1
</p>
`,
styles: [
`
:host {
position: relative;
bottom: 10%;
}
`
],
animations: [
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateY(100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
])
]
})
export class ComposeMessageComponent {
@HostBinding('@routeAnimation') get routeAnimation() {
return true;
}
@HostBinding('style.display') get display() {
return 'block';
}
@HostBinding('style.position') get position() {
return 'absolute';
}
details: string;
sending: boolean = false;
constructor(private router: Router) {}
send() {
this.sending = true;
this.details = 'Sending Message...';
Observable.of(true)
.delay(1000)
.do(() => {
this.sending = false;
// #enddocregion v1
this.closeModal();
// #docregion v1
}).subscribe();
}
// #enddocregion v1
closeModal() {
this.router.navigate(['/', { outlets: { modal: null }}]);
}
cancel() {
this.closeModal();
}
}
// #enddocregion

View File

@ -0,0 +1,17 @@
<!-- #docregion -->
<h3>Contact Crisis Center</h3>
<div *ngIf="details">
{{ details }}
</div>
<div>
<div>
<label>Message: </label>
</div>
<div>
<textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
</div>
</div>
<p *ngIf="!sending">
<button (click)="send()">Send</button>
<button (click)="cancel()">Cancel</button>
</p>

View File

@ -1,77 +1,19 @@
// #docregion
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
import { Component, HostBinding,
trigger, transition,
animate, style, state } from '@angular/core';
import { Router } from '@angular/router';
import { Component, HostBinding } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { slideInDownAnimation } from './animations';
@Component({
template: `
<h3>Contact Crisis Center</h3>
<div *ngIf="details">
{{ details }}
</div>
<div>
<div>
<label>Message: </label>
</div>
<div>
<textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
</div>
</div>
<p *ngIf="!sending">
<button (click)="send()">Send</button>
<button (click)="cancel()">Cancel</button>
</p>
`,
styles: [
`
:host {
position: relative;
bottom: 10%;
}
`
],
animations: [
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateY(100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
])
]
moduleId: module.id,
templateUrl: 'compose-message.component.html',
styles: [ ':host { position: relative; bottom: 10%; }' ],
animations: [ slideInDownAnimation ]
})
export class ComposeMessageComponent {
@HostBinding('@routeAnimation') get routeAnimation() {
return true;
}
@HostBinding('style.display') get display() {
return 'block';
}
@HostBinding('style.position') get position() {
return 'absolute';
}
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
details: string;
sending: boolean = false;
@ -82,24 +24,21 @@ export class ComposeMessageComponent {
this.sending = true;
this.details = 'Sending Message...';
Observable.of(true)
.delay(1000)
.do(() => {
this.sending = false;
// Close the modal
this.closeModal();
}).subscribe();
}
closeModal() {
// Providing a `null` value to the named outlet
// clears the contents of the named outlet
this.router.navigate([{ outlets: { modal: null }}]);
setTimeout(() => {
this.sending = false;
this.closePopup();
}, 1000);
}
cancel() {
// Close the modal
this.closeModal();
this.closePopup();
}
// #docregion closePopup
closePopup() {
// Providing a `null` value to the named outlet
// clears the contents of the named outlet
this.router.navigate([{ outlets: { popup: null }}]);
}
// #enddocregion closePopup
}

View File

@ -12,10 +12,10 @@ import { CrisisDetailComponent } from './crisis-detail.component';
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
// #docregion crisis-detail-resolver
import { CrisisDetailResolver } from './crisis-detail-resolver.service';
// #enddocregion crisis-detail-resolve
// #enddocregion crisis-detail-resolver
// #docregion routes
const crisisCenterRoutes: Routes = [
@ -43,11 +43,11 @@ const crisisCenterRoutes: Routes = [
// #docregion can-deactivate-guard
canDeactivate: [CanDeactivateGuard],
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
// #docregion crisis-detail-resolver
resolve: {
crisis: CrisisDetailResolve
crisis: CrisisDetailResolver
}
// #enddocregion crisis-detail-resolve
// #enddocregion crisis-detail-resolver
// #docregion routes
},
{

View File

@ -8,11 +8,12 @@ import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
// #docregion crisis-detail-resolver
import { CrisisDetailResolver } from './crisis-detail-resolver.service';
// #enddocregion crisis-detail-resolver
const crisisCenterRoutes: Routes = [
// #docregion redirect
{
@ -34,7 +35,7 @@ const crisisCenterRoutes: Routes = [
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
crisis: CrisisDetailResolver
}
},
{
@ -47,6 +48,7 @@ const crisisCenterRoutes: Routes = [
}
];
// #docregion crisis-detail-resolver
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
@ -55,8 +57,9 @@ const crisisCenterRoutes: Routes = [
RouterModule
],
providers: [
CrisisDetailResolve
CrisisDetailResolver
]
})
export class CrisisCenterRoutingModule { }
// #enddocregion crisis-detail-resolver
// #enddocregion

View File

@ -8,10 +8,8 @@ import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
import { CrisisDetailResolver } from './crisis-detail-resolver.service';
const crisisCenterRoutes: Routes = [
{
@ -27,7 +25,7 @@ const crisisCenterRoutes: Routes = [
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
crisis: CrisisDetailResolver
}
},
{
@ -48,7 +46,7 @@ const crisisCenterRoutes: Routes = [
RouterModule
],
providers: [
CrisisDetailResolve
CrisisDetailResolver
]
})
export class CrisisCenterRoutingModule { }

View File

@ -28,7 +28,7 @@ import { CrisisCenterRoutingModule } from './crisis-center-routing.module';
providers: [
CrisisService
]
// #enddocregion crisis-detail-resolve
// #enddocregion crisis-detail-resolver
})
// #docregion crisis-center-module-export
export class CrisisCenterModule {}

View File

@ -6,7 +6,7 @@ import { Router, Resolve, RouterStateSnapshot,
import { Crisis, CrisisService } from './crisis.service';
@Injectable()
export class CrisisDetailResolve implements Resolve<Crisis> {
export class CrisisDetailResolver implements Resolve<Crisis> {
constructor(private cs: CrisisService, private router: Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {

View File

@ -1,16 +1,14 @@
// #docplaster
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit,
HostBinding, trigger, transition,
animate, style, state } from '@angular/core';
import { Component, OnInit, HostBinding } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { slideInDownAnimation } from '../animations';
import { Crisis, CrisisService } from './crisis.service';
import { DialogService } from '../dialog.service';
@Component({
// #docregion template
template: `
<div *ngIf="crisis">
<h3>"{{ editName }}"</h3>
@ -26,50 +24,17 @@ import { DialogService } from '../dialog.service';
</p>
</div>
`,
// #enddocregion template
styles: ['input {width: 20em}'],
animations: [
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
])
]
animations: [ slideInDownAnimation ]
})
// #docregion cancel-save
export class CrisisDetailComponent implements OnInit {
@HostBinding('@routeAnimation') get routeAnimation() {
return true;
}
@HostBinding('style.display') get display() {
return 'block';
}
@HostBinding('style.position') get position() {
return 'absolute';
}
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
crisis: Crisis;
editName: string;
// #enddocregion cancel-save
constructor(
private service: CrisisService,
private router: Router,
@ -92,7 +57,6 @@ export class CrisisDetailComponent implements OnInit {
}
// #enddocregion ngOnInit
// #docregion cancel-save
cancel() {
this.gotoCrises();
}
@ -101,9 +65,7 @@ export class CrisisDetailComponent implements OnInit {
this.crisis.name = this.editName;
this.gotoCrises();
}
// #enddocregion cancel-save
// #docregion cancel-save-only
canDeactivate(): Promise<boolean> | boolean {
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
if (!this.crisis || this.crisis.name === this.editName) {
@ -113,9 +75,7 @@ export class CrisisDetailComponent implements OnInit {
// promise which resolves to true or false when the user decides
return this.dialogService.confirm('Discard changes?');
}
// #enddocregion cancel-save-only
// #docregion gotoCrises, relative-navigation
gotoCrises() {
let crisisId = this.crisis ? this.crisis.id : null;
// Pass along the crisis id if available
@ -124,8 +84,4 @@ export class CrisisDetailComponent implements OnInit {
// Relative navigation back to the crises
this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
}
// #enddocregion gotoCrises, relative-navigation
// #docregion cancel-save
}
// #enddocregion cancel-save
// #enddocregion

View File

@ -1,10 +1,9 @@
// #docplaster
// #docregion
import { Component, OnInit, HostBinding,
trigger, transition,
animate, style, state } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Component, OnInit, HostBinding } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { slideInDownAnimation } from '../animations';
import { Crisis } from './crisis.service';
import { DialogService } from '../dialog.service';
@ -25,43 +24,12 @@ import { DialogService } from '../dialog.service';
</div>
`,
styles: ['input {width: 20em}'],
// #enddocregion template
animations: [
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
])
]
animations: [ slideInDownAnimation ]
})
export class CrisisDetailComponent implements OnInit {
@HostBinding('@routeAnimation') get routeAnimation() {
return true;
}
@HostBinding('style.display') get display() {
return 'block';
}
@HostBinding('style.position') get position() {
return 'absolute';
}
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
crisis: Crisis;
editName: string;
@ -72,7 +40,7 @@ export class CrisisDetailComponent implements OnInit {
public dialogService: DialogService
) {}
// #docregion crisis-detail-resolve
// #docregion ngOnInit
ngOnInit() {
this.route.data
.subscribe((data: { crisis: Crisis }) => {
@ -80,8 +48,9 @@ export class CrisisDetailComponent implements OnInit {
this.crisis = data.crisis;
});
}
// #enddocregion crisis-detail-resolve
// #enddocregion ngOnInit
// #docregion cancel-save
cancel() {
this.gotoCrises();
}
@ -90,7 +59,9 @@ export class CrisisDetailComponent implements OnInit {
this.crisis.name = this.editName;
this.gotoCrises();
}
// #enddocregion cancel-save
// #docregion canDeactivate
canDeactivate(): Promise<boolean> | boolean {
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
if (!this.crisis || this.crisis.name === this.editName) {
@ -100,17 +71,16 @@ export class CrisisDetailComponent implements OnInit {
// promise which resolves to true or false when the user decides
return this.dialogService.confirm('Discard changes?');
}
// #enddocregion canDeactivate
// #docregion gotoCrises
gotoCrises() {
let crisisId = this.crisis ? this.crisis.id : null;
// Pass along the crisis id if available
// so that the CrisisListComponent can select that crisis.
// Add a totally useless `foo` parameter for kicks.
// #docregion gotoCrises-navigate
// #docregion gotoCrises-navigate
// Relative navigation back to the crises
this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
// #enddocregion gotoCrises-navigate
// #enddocregion gotoCrises-navigate
}
// #enddocregion gotoCrises
}

View File

@ -1,5 +1,3 @@
// #docplaster
// #docregion
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
@ -9,28 +7,28 @@ import { Crisis, CrisisService } from './crisis.service';
import { Observable } from 'rxjs/Observable';
@Component({
// #docregion template
// #docregion relative-navigation-router-link
template: `
<ul class="items">
<li *ngFor="let crisis of crises | async"
(click)="onSelect(crisis)">
<span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
<li *ngFor="let crisis of crises | async">
<a [routerLink]="[crisis.id]"
[class.selected]="isSelected(crisis)">
<span class="badge">{{ crisis.id }}</span>
{{ crisis.name }}
</a>
</li>
</ul>
`,
// #enddocregion template
</ul>`
// #enddocregion relative-navigation-router-link
})
export class CrisisListComponent implements OnInit {
crises: Observable<Crisis[]>;
selectedId: number;
// #docregion relative-navigation-ctor
constructor(
private service: CrisisService,
private route: ActivatedRoute,
private router: Router
) {}
// #enddocregion relative-navigation-ctor
ngOnInit() {
this.crises = this.route.params
@ -40,17 +38,7 @@ export class CrisisListComponent implements OnInit {
});
}
// #docregion select
onSelect(crisis: Crisis) {
// Absolute link
this.router.navigate([crisis.id]);
isSelected(crisis: Crisis) {
return crisis.id === this.selectedId;
}
// #enddocregion select
}
// #enddocregion
/*
// #docregion relative-navigation-router-link
<a [routerLink]="[crisis.id]">{{ crisis.name }}</a>
// #enddocregion relative-navigation-router-link
*/

View File

@ -1,4 +1,3 @@
// #docplaster
// #docregion
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
@ -12,9 +11,10 @@ import { Crisis, CrisisService } from './crisis.service';
template: `
<ul class="items">
<li *ngFor="let crisis of crises | async"
[class.selected]="isSelected(crisis)"
(click)="onSelect(crisis)">
<span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
(click)="onSelect(crisis)"
[class.selected]="isSelected(crisis)">
<span class="badge">{{ crisis.id }}</span>
{{ crisis.name }}
</li>
</ul>
@ -25,11 +25,13 @@ export class CrisisListComponent implements OnInit {
crises: Observable<Crisis[]>;
selectedId: number;
// #docregion ctor
constructor(
private service: CrisisService,
private route: ActivatedRoute,
private router: Router
) {}
// #enddocregion ctor
isSelected(crisis: Crisis) {
return crisis.id === this.selectedId;
@ -43,12 +45,12 @@ export class CrisisListComponent implements OnInit {
});
}
// #docregion relative-navigation
// #docregion onSelect
onSelect(crisis: Crisis) {
this.selectedId = crisis.id;
// Navigate with relative link
this.router.navigate([crisis.id], { relativeTo: this.route });
}
// #enddocregion relative-navigation
// #enddocregion onSelect
}

View File

@ -7,7 +7,7 @@ import { Component } from '@angular/core';
<h2>HEROES</h2>
<p>Get your heroes here</p>
<button routerLink="/sidekicks">Go To Sidekicks</button>
<button routerLink="/sidekicks">Go to sidekicks</button>
`
})
export class HeroListComponent { }

View File

@ -2,17 +2,14 @@
// #docregion
// #docregion rxjs-operator-import
import 'rxjs/add/operator/switchMap';
// #docregion rxjs-operator-import
// #docregion route-animation-imports
import { Component, OnInit, HostBinding,
trigger, transition, animate,
style, state } from '@angular/core';
// #enddocregion route-animation-imports
// #enddocregion rxjs-operator-import
import { Component, OnInit, HostBinding } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { slideInDownAnimation } from '../animations';
import { Hero, HeroService } from './hero.service';
// #docregion route-animation
@Component({
template: `
<h2>HEROES</h2>
@ -29,44 +26,14 @@ import { Hero, HeroService } from './hero.service';
</p>
</div>
`,
animations: [
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'translateX(0)'
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition(':leave', [
animate('0.5s ease-out', style({
opacity: 0,
transform: 'translateY(100%)'
}))
])
])
]
animations: [ slideInDownAnimation ]
})
// #docregion route-animation-host-binding
export class HeroDetailComponent implements OnInit {
// #enddocregion route-animation
@HostBinding('@routeAnimation') get routeAnimation() {
return true;
}
@HostBinding('style.display') get display() {
return 'block';
}
@HostBinding('style.position') get position() {
return 'absolute';
}
// #docregion host-bindings
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
// #enddocregion host-bindings
hero: Hero;
@ -87,14 +54,13 @@ export class HeroDetailComponent implements OnInit {
}
// #enddocregion ngOnInit
// #docregion gotoHeroes-navigate
// #docregion gotoHeroes
gotoHeroes() {
let heroId = this.hero ? this.hero.id : null;
// Pass along the hero id if available
// so that the HeroList component can select that hero.
// Include a junk 'foo' property for fun.
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}
// #enddocregion gotoHeroes-navigate
// #docregion route-animation-host-binding
// #enddocregion gotoHeroes
}
// #enddocregion route-animation-host-binding

View File

@ -17,7 +17,7 @@ import { Hero, HeroService } from './hero.service';
</li>
</ul>
<button routerLink="/sidekicks">Go To Sidekicks</button>
<button routerLink="/sidekicks">Go to sidekicks</button>
`
// #enddocregion template
})

View File

@ -24,7 +24,7 @@ import { Hero, HeroService } from './hero.service';
</li>
</ul>
<button routerLink="/sidekicks">Go To Sidekicks</button>
<button routerLink="/sidekicks">Go to sidekicks</button>
`
// #enddocregion template
})

View File

@ -2,8 +2,6 @@
import { Component } from '@angular/core';
@Component({
template: `
<h2>Page Not Found</h2>
`
template: '<h2>Page not found</h2>'
})
export class PageNotFoundComponent {}

View File

@ -5,10 +5,10 @@ import { PreloadingStrategy, Route } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class PreloadSelectedModules implements PreloadingStrategy {
export class SelectivePreloadingStrategy implements PreloadingStrategy {
preloadedModules: string[] = [];
preload(route: Route, load: Function): Observable<any> {
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
// add the route path to our preloaded module array
this.preloadedModules.push(route.path);

View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<!-- #docregion -->
<html>
<head>
<!-- #docregion base-href -->
<base href="/">
<!-- #enddocregion base-href -->
<title>Router Sample v.1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfills for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app/main.1') // <----- ONLY CHANGE
.catch(function(err){ console.error(err); });
</script>
</head>
<body>
<h1>Milestone 1</h1>
<my-app>loading...</my-app>
</body>
</html>
<!-- #enddocregion -->

View File

@ -3,7 +3,9 @@
<html>
<head>
<!-- Set the base href -->
<!-- #docregion base-href -->
<base href="/">
<!-- #enddocregion base-href -->
<title>Router Sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

View File

@ -5,9 +5,7 @@
"!**/*.js",
"!**/*.[0-9].*",
"!app/crisis-list.component.ts",
"!app/hero-list.component.ts",
"!app/crisis-center/add-crisis.component.ts",
"!app/not-found.component.ts"
"!app/hero-list.component.ts"
],
"tags": ["router"]
}

View File

@ -5,6 +5,10 @@ block includes
The Angular documentation is a living document with continuous improvements.
This log calls attention to recent significant changes.
## Router: more detail (2016-12-21)
Added more information to the [Router](router.html) guide
including sections named outlets, wildcard routes, and preload strategies.
## Http: how to set default request headers (and other request options) (2016-12-14)
Added section on how to set default request headers (and other request options) to
[Http](server-communication.html#override-default-request-options) guide.

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 228 KiB