docs(router): Removed refs to deprecated router; lowerCamelCase constants
closes #1834
This commit is contained in:
parent
761f857f13
commit
5104470558
|
@ -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>
|
||||
|
|
|
@ -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/';
|
||||
|
|
|
@ -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)
|
||||
];
|
|
@ -0,0 +1,5 @@
|
|||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
|
@ -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
|
||||
]);
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
import { provideRouter, RouterConfig } from '@angular/router';
|
||||
|
||||
const routes: RouterConfig = [];
|
||||
|
||||
export const appRouterProviders = [
|
||||
provideRouter(routes)
|
||||
];
|
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
}
|
|
@ -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 },
|
||||
|
|
|
@ -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 }
|
||||
];
|
||||
|
|
|
@ -56,6 +56,6 @@ const routes: RouterConfig = [
|
|||
{ path: '09-01', component: S0901 },
|
||||
];
|
||||
|
||||
export const APP_ROUTER_PROVIDERS = [
|
||||
export const appRouterProviders = [
|
||||
provideRouter(routes)
|
||||
];
|
||||
|
|
|
@ -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 },
|
||||
|
|
|
@ -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)
|
||||
];
|
||||
|
|
|
@ -9,6 +9,6 @@ const routes: RouterConfig = [
|
|||
}
|
||||
];
|
||||
|
||||
export const APP_ROUTER_PROVIDERS = [
|
||||
export const appRouterProviders = [
|
||||
provideRouter(routes)
|
||||
];
|
||||
|
|
|
@ -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)
|
||||
];
|
||||
|
|
|
@ -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
|
||||
]);
|
||||
|
|
|
@ -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)
|
||||
];
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 2 does not have a bootstrap directive.
|
||||
We always launch the app in code by explicitly calling a bootstrap function
|
||||
|
|
|
@ -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` —
|
||||
We could add *additional* service providers to `appRouterProviders` —
|
||||
providers that are specific to our routing configuration.
|
||||
We don't have any yet. We will have some later in this chapter.
|
||||
|
||||
|
@ -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
|
||||
|
|
|
@ -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=".")
|
||||
|
|
Loading…
Reference in New Issue