docs(router): Removed refs to deprecated router; lowerCamelCase constants

closes #1834
This commit is contained in:
Brandon Roberts 2016-07-05 21:20:33 -05:00 committed by Ward Bell
parent 761f857f13
commit 5104470558
22 changed files with 177 additions and 196 deletions

View File

@ -4,7 +4,7 @@
<h3>Routed Movies</h3>
<nav>
<!-- #docregion router-link -->
<a [routerLink]="['Movies']">Movies</a>
<a [routerLink]="['/movies']">Movies</a>
<!-- #enddocregion router-link -->
</nav>
<router-outlet></router-outlet>

View File

@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { MovieListComponent } from './movie-list.component';
import { MovieService } from './movie.service';
@ -12,11 +12,8 @@ import { StringSafeDatePipe } from './date.pipe';
styleUrls: ['app/app.component.css'],
directives: [MovieListComponent, ROUTER_DIRECTIVES],
pipes: [StringSafeDatePipe],
providers: [MovieService, ROUTER_PROVIDERS]
providers: [MovieService]
})
@RouteConfig([
{path: '/movies', name: 'Movies', component: MovieListComponent, useAsDefault: true}
])
export class AppComponent {
angularDocsUrl = 'https://angular.io/';

View File

@ -0,0 +1,13 @@
// #docregion
import { provideRouter, RouterConfig } from '@angular/router';
import { MovieListComponent } from './movie-list.component';
const routes: RouterConfig = [
{ path: '', redirectTo: '/movies', pathMatch: 'full' },
{ path: 'movies', component: MovieListComponent }
];
export const appRouterProviders = [
provideRouter(routes)
];

View File

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

View File

@ -1,6 +1,8 @@
// #docregion
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { appRouterProviders } from './app.routes';
bootstrap(AppComponent);
bootstrap(AppComponent, [
appRouterProviders
]);

View File

@ -2,7 +2,6 @@
// #docplaster
// #docregion import
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
// #enddocregion import
import { MovieService } from './movie.service';
import { IMovie } from './movie';

View File

@ -0,0 +1,7 @@
import { provideRouter, RouterConfig } from '@angular/router';
const routes: RouterConfig = [];
export const appRouterProviders = [
provideRouter(routes)
];

View File

@ -1,7 +1,7 @@
// #docregion
import { bootstrap } from '@angular/platform-browser-dynamic';
import { XHRBackend } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { XHRBackend } from '@angular/http';
import { appRouterProviders } from './app.routes';
import { LocationStrategy,
HashLocationStrategy } from '@angular/common';
@ -13,7 +13,7 @@ import { AppComponent } from './app.component';
// #docregion bootstrap
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
appRouterProviders,
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server

View File

@ -1,42 +0,0 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
import { provideRouter, ROUTER_DIRECTIVES } from '@angular/router';
import { routes } from './app.routes';
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from './interfaces';
// #enddocregion can-deactivate-guard
import { DialogService } from './dialog.service';
import { HeroService } from './heroes/hero.service';
// Add these symbols to override the `LocationStrategy`
import { LocationStrategy,
HashLocationStrategy } from '@angular/common';
@Component({
selector: 'my-app',
// #docregion template
template: `
<h1 class="title">Component Router</h1>
<nav>
<a [routerLink]="['/crisis-center']">Crisis Center</a>
<a [routerLink]="['/heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
// #enddocregion template
providers: [
HeroService,
DialogService,
provideRouter(routes),
CanDeactivateGuard,
{ provide: LocationStrategy,
useClass: HashLocationStrategy } // .../#/crisis-center/
],
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}

View File

@ -14,7 +14,7 @@ import { HeroDetailComponent } from './heroes/hero-detail.component';
// #docregion
// #docregion route-config
export const routes: RouterConfig = [
const routes: RouterConfig = [
// #docregion route-defs
{ path: 'crisis-center', component: CrisisCenterComponent },
{ path: 'heroes', component: HeroListComponent },

View File

@ -8,7 +8,7 @@ import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
// #docregion route-config
export const routes: RouterConfig = [
const routes: RouterConfig = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
];

View File

@ -56,6 +56,6 @@ const routes: RouterConfig = [
{ path: '09-01', component: S0901 },
];
export const APP_ROUTER_PROVIDERS = [
export const appRouterProviders = [
provideRouter(routes)
];

View File

@ -4,12 +4,12 @@ import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import 'rxjs/add/operator/map';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { appRouterProviders } from './app.routes';
import { HeroData } from './hero-data';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS,
appRouterProviders,
HTTP_PROVIDERS,
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: XHRBackend, useClass: InMemoryBackendService },

View File

@ -6,7 +6,7 @@ import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
export const routes: RouterConfig = [
const routes: RouterConfig = [
// #docregion redirect-route
{
path: '',
@ -32,6 +32,6 @@ export const routes: RouterConfig = [
}
];
export const APP_ROUTER_PROVIDERS = [
export const appRouterProviders = [
provideRouter(routes)
];

View File

@ -9,6 +9,6 @@ const routes: RouterConfig = [
}
];
export const APP_ROUTER_PROVIDERS = [
export const appRouterProviders = [
provideRouter(routes)
];

View File

@ -7,7 +7,7 @@ import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
export const routes: RouterConfig = [
const routes: RouterConfig = [
{
path: '',
redirectTo: '/dashboard',
@ -27,6 +27,6 @@ export const routes: RouterConfig = [
}
];
export const APP_ROUTER_PROVIDERS = [
export const appRouterProviders = [
provideRouter(routes)
];

View File

@ -2,8 +2,8 @@
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { appRouterProviders } from './app.routes';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
appRouterProviders
]);

View File

@ -5,7 +5,7 @@ import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
export const routes: RouterConfig = [
const routes: RouterConfig = [
{
path: '',
redirectTo: '/dashboard',
@ -25,6 +25,6 @@ export const routes: RouterConfig = [
}
];
export const APP_ROUTER_PROVIDERS = [
export const appRouterProviders = [
provideRouter(routes)
];

View File

@ -12,20 +12,20 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { appRouterProviders } from './app.routes';
// #enddocregion v1, final
/*
// #docregion v1
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS,
appRouterProviders,
HTTP_PROVIDERS
]);
// #enddocregion v1
*/
// #docregion final
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS,
appRouterProviders,
HTTP_PROVIDERS,
{ provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
{ provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data

View File

@ -131,7 +131,7 @@ table(width="100%")
td
:marked
### Bootstrapping
+makeExample('cb-a1-a2-quick-reference/ts/app/main.ts')(format="." )
+makeExample('cb-a1-a2-quick-reference/ts/app/main.1.ts')(format="." )
:marked
Angular&nbsp;2 does not have a bootstrap directive.
We always launch the app in code by explicitly calling a bootstrap function

View File

@ -111,7 +111,7 @@ include ../_util-fns
We pass the configuration array to the `provideRouter()` function which returns
(among other things) a configured *Router* [service provider](dependency-injection.html#!#injector-providers).
Finally, we export this provider in the `APP_ROUTER_PROVIDERS` array
Finally, we export this provider in the `appRouterProviders` array
so we can simplify registration of router dependencies later in `main.ts`.
We don't have any other providers to register right now. But we will.
:marked
@ -382,9 +382,9 @@ h4#provideRouter Call <i>provideRouter</i>
`Router` service provider ... and some other, unseen providers that the routing library requires.
:marked
We add the `provideRouter` array to an `APP_ROUTER_PROVIDERS` array and export it.
We add the `provideRouter` array to an `appRouterProviders` array and export it.
We could add *additional* service providers to `APP_ROUTER_PROVIDERS` &mdash;
We could add *additional* service providers to `appRouterProviders` &mdash;
providers that are specific to our routing configuration.
We don't have any yet. We will have some later in this chapter.
@ -397,7 +397,7 @@ h4#register-providers Register routing in bootstrap
Our app launches from the `main.ts` file in the `/app` folder.
It's short and not much different from the default `main.ts`.
The important difference: we import the `APP_ROUTER_PROVIDERS` array
The important difference: we import the `appRouterProviders` array
and pass it as the second parameter of the `bootstrap` function.
+makeExample('router/ts/app/main.1.ts','all', 'main.ts')(format=".")
:marked
@ -1228,7 +1228,7 @@ h3#can-deactivate-guard <i>CanDeactivate</i>: handling unsaved changes
+makeExample('router/ts/app/crisis-center/crisis-center.routes.4.ts', '', 'crisis-center.routes.ts')
:marked
We also need to add the `Guard` to our main `APP_ROUTER_PROVIDERS` so the `Router` can inject it during the navigation process.
We also need to add the `Guard` to our main `appRouterProviders` so the `Router` can inject it during the navigation process.
+makeExample('router/ts/app/app.routes.ts', '', 'app.routes.ts')
:marked

View File

@ -178,7 +178,7 @@ code-example(language="bash").
:marked
### Make the router available.
The *Component Router* is a service. We have to import our `APP_ROUTER_PROVIDERS` which
The *Component Router* is a service. We have to import our `appRouterProviders` which
contains our configured router and make it available to the application by adding it to
the `bootstrap` array.
+makeExample('toh-5/ts/app/main.ts', '', 'app/main.ts')(format=".")