honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html
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>

7
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
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/';

13
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts Normal file
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)
];

5
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts Normal file
View File

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

6
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
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
]);

1
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
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';

7
public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts Normal file
View File

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

8
public/docs/_examples/cb-dependency-injection/ts/app/main.ts
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

42
public/docs/_examples/router/ts/app/app.component.5.ts
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 {
}

2
public/docs/_examples/router/ts/app/app.routes.1.ts
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 },

2
public/docs/_examples/router/ts/app/app.routes.2.ts
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 }
];

2
public/docs/_examples/style-guide/ts/app/app.routes.ts
View File

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

4
public/docs/_examples/style-guide/ts/app/main.ts
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 },

4
public/docs/_examples/toh-5/ts/app/app.routes.1.ts
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)
];

2
public/docs/_examples/toh-5/ts/app/app.routes.2.ts
View File

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

4
public/docs/_examples/toh-5/ts/app/app.routes.ts
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)
];

4
public/docs/_examples/toh-5/ts/app/main.ts
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
]);

4
public/docs/_examples/toh-6/ts/app/app.routes.ts
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)
];

6
public/docs/_examples/toh-6/ts/app/main.ts
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

218
public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
View File

@ -11,18 +11,18 @@ a(id="top")
## Contents
This chapter covers
* [Template Basics](#template-basics) - binding and local variables
* [Template Directives](#template-directives) - built-in directives `ngIf` and `ngClass`
* [Filters/Pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular&nbsp;2
* [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular&nbsp;2.
* [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular&nbsp;2.
Also covers modules.
* [Style Sheets](#style-sheets) - more options for CSS in Angular&nbsp;2.
* [String date pipe](#string-dates) - a tip for displaying string date values.
.l-main-section
:marked
## Template Basics
@ -33,7 +33,7 @@ a(id="top")
- var top="vertical-align:top"
table(width="100%")
col(width="50%")
col(width="50%")
col(width="50%")
tr
th Angular&nbsp;1
th Angular&nbsp;2
@ -47,7 +47,7 @@ table(width="100%")
In Angular&nbsp;1, an expression in curly braces denotes one-way binding.
This binds the value of the element to a property in the controller
associated with this template.
When using the `controller as` syntax,
the binding is prefixed with the controller alias (`vm`) because we
have to be specific about the source of the binding.
@ -60,7 +60,7 @@ table(width="100%")
This binds the value of the element to a property of the component.
The context of the binding is implied and is always the
associated component, so it needs no reference variable.
For more information see [Template Syntax](../guide/template-syntax.html#interpolation).
tr(style=top)
td
@ -70,7 +70,7 @@ table(width="100%")
&lt;td>{{movie.title | uppercase}}&lt;/td>
:marked
To filter output in our templates in Angular&nbsp;1, we use the pipe character (|) and one or more filters.
In this example, we filter the `title` property to uppercase.
td
:marked
@ -80,7 +80,7 @@ table(width="100%")
In Angular&nbsp;2, we use similar syntax with the pipe (|) character to filter output, but now we call them **pipes**.
Many (but not all) of the built-in filters from Angular&nbsp;1 are
built-in pipes in Angular&nbsp;2.
See the heading [Filters / Pipes](#Pipes) below for more information.
tr(style=top)
td
@ -98,21 +98,21 @@ table(width="100%")
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'local')(format="." )
:marked
In Angular&nbsp;2, we have true template input variables that are explicitly defined using the `let` keyword.
For more information see [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax).
:marked
[Back to top](#top)
.l-main-section
:marked
## Template Directives
Angular&nbsp;1 provides over seventy built-in directives for use in our templates.
Many of them are no longer needed in Angular&nbsp;2 because of its more capable and expressive binding system.
Angular&nbsp;1 provides over seventy built-in directives for use in our templates.
Many of them are no longer needed in Angular&nbsp;2 because of its more capable and expressive binding system.
The following are some of the key Angular&nbsp;1 built-in directives and the equivalent feature in Angular&nbsp;2.
table(width="100%")
col(width="50%")
col(width="50%")
col(width="50%")
tr
th Angular&nbsp;1
th Angular&nbsp;2
@ -121,22 +121,22 @@ table(width="100%")
:marked
### ng-app
code-example.
&lt;body ng-app="movieHunter">
&lt;body ng-app="movieHunter">
:marked
The application startup process is called **bootstrapping**.
Although we can bootstrap an Angular&nbsp;1 app in code,
many applications bootstrap declaratively with the `ng-app` directive,
giving it the name of the application's module (`movieHunter`).
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
and passing it the name of the application's module (`AppComponent`).
For more information see [Quick Start](../quickstart.html).
tr(style=top)
td
@ -144,32 +144,32 @@ table(width="100%")
### ng-class
code-example(format="").
&lt;div ng-class="{active: isActive}">
&lt;div ng-class="{active: isActive,
&lt;div ng-class="{active: isActive,
shazam: isImportant}">
:marked
In Angular&nbsp;1, the `ng-class` directive includes/excludes CSS classes
based on an expression. That expression is often a key-value control object with each
key of the object defined as a CSS class name, and each value defined as a template expression
that evaluates to a Boolean value.
In the first example, the `active` class is applied to the element if `isActive` is true.
We can specify multiple classes as shown in the second example.
td
:marked
### ngClass
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'ngClass')(format="." )
:marked
In Angular&nbsp;2, the `ngClass` directive works similarly.
It includes/excludes CSS classes based on an expression.
In Angular&nbsp;2, the `ngClass` directive works similarly.
It includes/excludes CSS classes based on an expression.
In the first example, the `active` class is applied to the element if `isActive` is true.
We can specify multiple classes as shown in the second example.
Angular&nbsp;2 also has **class binding**, which is a good way to add or remove a single class
Angular&nbsp;2 also has **class binding**, which is a good way to add or remove a single class
as shown in the third example.
For more information see [Template Syntax](../guide/template-syntax.html#other-bindings).
tr(style=top)
@ -181,9 +181,9 @@ table(width="100%")
&lt;button ng-click="vm.toggleImage($event)">
:marked
In Angular&nbsp;1, the `ng-click` directive allows us to specify custom behavior when an element is clicked.
In the first example, when the button is clicked, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
The second example demonstrates passing in the `$event` object, which provides details about the event
to the controller.
td
@ -191,21 +191,21 @@ table(width="100%")
### bind to the `click` event
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'event-binding')(format="." )
:marked
The Angular&nbsp;1 event-based directives do not exist in Angular&nbsp;2.
The Angular&nbsp;1 event-based directives do not exist in Angular&nbsp;2.
Rather, we define one-way binding from the template view to the component using **event binding**.
For event binding, we define the name of the target event within parenthesis and
specify a template statement in quotes to the right of the equals. Angular&nbsp;2 then
sets up an event handler for the target event. When the event is raised, the handler
executes the template statement.
In the first example, when the button is clicked, the `toggleImage()` method in the associated component is executed.
The second example demonstrates passing in the `$event` object, which provides details about the event
to the component.
For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.
For more information see [Template Syntax](../guide/template-syntax.html#event-binding).
tr(style=top)
@ -215,17 +215,17 @@ table(width="100%")
code-example(format="").
&lt;div ng-controller="MovieListCtrl as vm">
:marked
In Angular&nbsp;1, the `ng-controller` directive attaches a controller to the view.
In Angular&nbsp;1, the `ng-controller` directive attaches a controller to the view.
Using the `ng-controller` (or defining the controller as part of the routing) ties the
view to the controller code associated with that view.
view to the controller code associated with that view.
td
:marked
### Component decorator
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'component')(format="." )
:marked
In Angular&nbsp;2, the template no longer specifies its associated controller.
In Angular&nbsp;2, the template no longer specifies its associated controller.
Rather, the component specifies its associated template as part of the component class decorator.
For more information see [Architecture Overview](../guide/architecture.html#component).
tr(style=top)
@ -262,9 +262,9 @@ table(width="100%")
:marked
In Angular&nbsp;2, we use property binding; there is no built-in *href* directive.
We place the element's `href` property in square brackets and set it to a quoted template expression.
For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding).
In Angular&nbsp;2, `href` is no longer used for routing. Routing uses `routerLink` as shown in the third example.
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'router-link')(format="." )
:marked
@ -279,18 +279,18 @@ table(width="100%")
:marked
In Angular&nbsp;1, the `ng-if` directive removes or recreates a portion of the DOM
based on an expression. If the expression is false, the element is removed from the DOM.
In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero.
td
:marked
### *ngIf
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngIf')(format="." )
:marked
The `*ngIf` directive in Angular&nbsp;2 works the same as the `ng-if` directive in Angular&nbsp;1,
The `*ngIf` directive in Angular&nbsp;2 works the same as the `ng-if` directive in Angular&nbsp;1,
it removes or recreates a portion of the DOM based on an expression.
In this example, the `table` element is removed from the DOM unless the `movies` array has a length.
The (*) before `ngIf` is required in this example.
For more information see [Structural Directives](../guide/structural-directives.html).
tr(style=top)
@ -309,9 +309,9 @@ table(width="100%")
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngModel')(format="." )
:marked
In Angular&nbsp;2, **two-way binding** is denoted with [()], descriptively referred to as a "banana in a box".
This syntax is a short-cut for defining both property binding (from the component to the view)
This syntax is a short-cut for defining both property binding (from the component to the view)
and event binding (from the view to the component), thereby giving us two-way binding.
For more information on two-way binding with ngModel see [Template Syntax](../guide/template-syntax.html#ngModel).
tr(style=top)
td
@ -322,23 +322,23 @@ table(width="100%")
:marked
In Angular&nbsp;1, the `ng-repeat` directive repeats the associated DOM element
for each item from the specified collection.
In this example, the table row (`tr`) element is repeated for each movie object in the collection of movies.
td
:marked
### *ngFor
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngFor')(format="." )
:marked
The `*ngFor` directive in Angular&nbsp;2 is similar to the `ng-repeat` directive in Angular&nbsp;1.
The `*ngFor` directive in Angular&nbsp;2 is similar to the `ng-repeat` directive in Angular&nbsp;1.
It repeats the associated DOM element for each item from the specified collection.
More accurately, it turns the defined element (`tr` in this example) and its contents into a template and
uses that template to instantiate a view for each item in the list.
Notice the other syntax differences:
The (*) before `ngFor` is required;
the `let` keyword identifies `movie` as an input variable;
the list preposition is `of`, not `in`.
For more information see [Structural Directives](../guide/structural-directives.html).
tr(style=top)
td
@ -351,7 +351,7 @@ table(width="100%")
:marked
In Angular&nbsp;1, the `ng-show` directive shows or hides the associated DOM element based on
an expression.
In this example, the `div` element is shown if the `favoriteHero` variable is truthy.
td
:marked
@ -360,12 +360,12 @@ table(width="100%")
:marked
In Angular&nbsp;2, we use property binding; there is no built-in *show* directive.
For hiding and showing elements, we bind to the HTML `hidden` property.
To conditionally display an element, place the element's `hidden` property in square brackets and
To conditionally display an element, place the element's `hidden` property in square brackets and
set it to a quoted template expression that evaluates to the *opposite* of *show*.
In this example, the `div` element is hidden if the `favoriteHero` variable is not truthy.
For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding).
tr(style=top)
td
@ -384,7 +384,7 @@ table(width="100%")
:marked
In Angular&nbsp;2, we use property binding; there is no built-in *src* directive.
We place the `src` property in square brackets and set it to a quoted template expression.
For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding).
tr(style=top)
td
@ -397,28 +397,28 @@ table(width="100%")
based on an expression. That expression is often a key-value control object with each
key of the object defined as a CSS style name, and each value defined as an expression
that evaluates to a value appropriate for the style.
In the example, the `color` style is set to the current value of the `colorPreference` variable.
td
:marked
### ngStyle
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'ngStyle')(format="." )
:marked
In Angular&nbsp;2, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
In Angular&nbsp;2, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
In the first example, the `color` style is set to the current value of the `colorPreference` variable.
Angular&nbsp;2 also has **style binding**, which is good way to set a single style. This is shown in the second example.
For more information on style binding see [Template Syntax](../guide/template-syntax.html#style-binding).
For more information on the ngStyle directive see [Template Syntax](../guide/template-syntax.html#ngStyle).
tr(style=top)
td
:marked
### ng-switch
code-example(format="").
&lt;div ng-switch="vm.favoriteHero &&
&lt;div ng-switch="vm.favoriteHero &&
vm.checkMovieHero(vm.favoriteHero)">
&lt;div ng-switch-when="true">
Excellent choice!
@ -433,7 +433,7 @@ table(width="100%")
:marked
In Angular&nbsp;1, the `ng-switch` directive swaps the contents of
an element by selecting one of the templates based on the current value of an expression.
In this example, if `favoriteHero` is not set, the template displays "Please enter ...".
If the `favoriteHero` is set, it checks the movie hero by calling a controller method.
If that method returns `true`, the template displays "Excellent choice!".
@ -443,21 +443,21 @@ table(width="100%")
### ngSwitch
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
:marked
In Angular&nbsp;2, the `ngSwitch` directive works similarly.
In Angular&nbsp;2, the `ngSwitch` directive works similarly.
It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
and we see the `*ngSwitchDefault` paragraph, "Please enter ...".
If the `favoriteHero` is set, it checks the movie hero by calling a component method.
If that method returns `true`, we see "Excellent choice!".
If that methods returns `false`, we see "No movie, sorry!".
The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example.
For more information on the ngSwitch directive see [Template Syntax](../guide/template-syntax.html#ngSwitch).
:marked
[Back to top](#top)
a(id="filters-pipes")
.l-main-section
:marked
@ -468,7 +468,7 @@ a(id="filters-pipes")
table(width="100%")
col(width="50%")
col(width="50%")
col(width="50%")
tr
th Angular&nbsp;1
th Angular&nbsp;2
@ -513,9 +513,9 @@ table(width="100%")
:marked
### none
There is no comparable pipe in Angular&nbsp;2 for performance reasons.
Filtering should be coded in the component.
Consider building a custom pipe if the same filtering code
will be reused in several templates.
Filtering should be coded in the component.
Consider building a custom pipe if the same filtering code
will be reused in several templates.
tr(style=top)
td
@ -546,7 +546,7 @@ table(width="100%")
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'slice')(format=".")
:marked
The `SlicePipe` does the same thing but the *order of the parameters is reversed* in keeping
with the JavaScript `Slice` method.
with the JavaScript `Slice` method.
The first parameter is the starting index; the second is the limit.
As in Angular 1, performance may improve if we code this operation within the component instead.
tr(style=top)
@ -577,9 +577,9 @@ table(width="100%")
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'number')(format=".")
:marked
The Angular&nbsp;2 `number` pipe is similar.
It provides more functionality when defining
It provides more functionality when defining
the decimal places as shown in the second example above.
Angular 2 also has a `percent` pipe which formats a number as a local percentage
as shown in the third example.
tr(style=top)
@ -589,31 +589,31 @@ table(width="100%")
code-example.
&lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
:marked
Orders the collection as specified by the expression.
Orders the collection as specified by the expression.
In this example, the movieList is ordered by the movie title.
td
:marked
### none
There is no comparable pipe in Angular&nbsp;2 for performance reasons.
Ordering/sorting the results should be coded in the component.
Consider building a custom pipe if the same ordering/sorting code
Ordering/sorting the results should be coded in the component.
Consider building a custom pipe if the same ordering/sorting code
will be reused in several templates.
:marked
[Back to top](#top)
a(id="controllers-components")
.l-main-section
:marked
## Controllers / Components
In Angular&nbsp;1, we write the code that provides the model and the methods for the view in a **controller**.
In Angular&nbsp;2, we build a **component**.
Because much of our Angular&nbsp;1 code is in JavaScript, JavaScript code is shown in the Angular&nbsp;1 column.
The Angular&nbsp;2 code is shown using TypeScript.
table(width="100%")
col(width="50%")
col(width="50%")
col(width="50%")
tr
th Angular&nbsp;1
th Angular&nbsp;2
@ -627,13 +627,13 @@ table(width="100%")
}());
:marked
In Angular&nbsp;1, we often defined an immediately invoked function expression (or IIFE) around our controller code.
This kept our controller code out of the global namespace.
This kept our controller code out of the global namespace.
td
:marked
### none
We don't need to worry about this in Angular&nbsp;2 because we use ES 2015 modules
and modules handle the namespacing for us.
For more information on modules see [Architecture Overview](../guide/architecture.html#module).
tr(style=top)
td
@ -652,9 +652,9 @@ table(width="100%")
:marked
Angular&nbsp;2 does not have its own module system. Instead we use ES 2015 modules.
ES 2015 modules are file based, so each code file is its own module.
We `import` what we need from the module files.
For more information on modules see [Architecture Overview](../guide/architecture.html#module).
tr(style=top)
td
@ -668,10 +668,10 @@ table(width="100%")
MovieListCtrl]);
:marked
In Angular&nbsp;1, we have code in each controller that looks up an appropriate Angular module
and registers the controller with that module.
and registers the controller with that module.
The first argument is the controller name. The second argument defines the string names of
all dependencies injected into this controller, and a reference to the controller function.
all dependencies injected into this controller, and a reference to the controller function.
td
:marked
### Component Decorator
@ -680,9 +680,9 @@ table(width="100%")
In Angular&nbsp;2, we add a decorator to the component class to provide any required metadata.
The Component decorator declares that the class is a component and provides metadata about
that component, such as its selector (or tag) and its template.
This is how we associate a template with code, which is defined in the component class.
For more information on components see [Architecture Overview](../guide/architecture.html#component).
tr(style=top)
td
@ -692,17 +692,17 @@ table(width="100%")
function MovieListCtrl(movieService) {
}
:marked
In Angular&nbsp;1, we write the code for the model and methods in a controller function.
In Angular&nbsp;1, we write the code for the model and methods in a controller function.
td
:marked
### Component class
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'class')(format=".")
:marked
In Angular&nbsp;2, we create a component class.
NOTE: If you are using TypeScript with Angular&nbsp;1 then the only difference here is
that the component class must be exported using the `export` keyword.
For more information on components see [Architecture Overview](../guide/architecture.html#component).
tr(style=top)
td
@ -715,8 +715,8 @@ table(width="100%")
:marked
In Angular&nbsp;1, we pass in any dependencies as controller function arguments.
In this example, we inject a `MovieService`.
We also guard against minification problems by telling Angular explicitly
We also guard against minification problems by telling Angular explicitly
that it should inject an instance of the `MovieService` in the first parameter.
td
:marked
@ -724,13 +724,13 @@ table(width="100%")
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'di')(format=".")
:marked
In Angular&nbsp;2, we pass in dependencies as arguments to the component class constructor.
In this example, we inject a `MovieService`.
In this example, we inject a `MovieService`.
The first parameter's TypeScript type tells Angular what to inject even after minification.
For more information on dependency injection see [Architecture Overview](../guide/architecture.html#dependency-injection).
:marked
[Back to top](#top)
a(id="style-sheets")
.l-main-section
:marked
@ -743,7 +743,7 @@ a(id="style-sheets")
also encapculate a style sheet within a specific component.
table(width="100%")
col(width="50%")
col(width="50%")
col(width="50%")
tr
th Angular&nbsp;1
th Angular&nbsp;2
@ -755,7 +755,7 @@ table(width="100%")
&lt;link href="styles.css" rel="stylesheet" />
:marked
In Angular&nbsp;1, we use a `link` tag in the head section of our `index.html` file
to define the styles for our application.
to define the styles for our application.
td
:marked
### Link tag
@ -765,11 +765,11 @@ table(width="100%")
But we can now also encapsulate styles for our components.
:marked
### StyleUrls
In Angular&nbsp;2, we can use the `styles` or `styleUrls` property of the `@Component` metadata to define
In Angular&nbsp;2, we can use the `styles` or `styleUrls` property of the `@Component` metadata to define
a style sheet for a particular component.
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'style-url')(format=".")
:marked
This allows us to set appropriate styles for individual components that won’t leak into
This allows us to set appropriate styles for individual components that won’t leak into
other parts of the application.
:marked
[Back to top](#top)
@ -778,10 +778,10 @@ a(id="string-dates")
.l-main-section
:marked
## Appendix: String dates
Currently the Angular&nbsp;2 `date` pipe does not process string dates such as
"2015-12-19T00:00:00".
As a work around, subclass the Angular `DatePipe` with a version that can convert strings
and substitute that pipe in the HTML:
@ -789,7 +789,7 @@ a(id="string-dates")
:marked
Then import and declare that pipe in the `@Component` metadata `pipes` array:
:marked
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'date-pipe')(format=".")
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'date-pipe')(format=".")
:marked
[Back to top](#top)

28
public/docs/ts/latest/guide/router.jade
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
@ -978,7 +978,7 @@ code-example(format="").
We prefer that the application display the list of crises as it would if the user clicked the "Crisis Center" link or pasted `localhost:3000/crisis-center/` into the address bar.
This is our intended default route.
The preferred solution is to add a `redirect` route that transparently translates from the initial relative URL (`''`)
The preferred solution is to add a `redirect` route that transparently translates from the initial relative URL (`''`)
to the desired default path (`/crisis-center`):
+makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'redirect', 'app/crisis-center/crisis-center.routes.ts (redirect route)' )(format='.')
@ -989,21 +989,21 @@ code-example(format="").
.l-sub-section
:marked
Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
In our example, the redirect is at the top level of the route configuration tree so the *remaining* URL and the *entire* URL
are the same thing.
The other possible `pathMatch` value is `'prefix'` which tells the router
The other possible `pathMatch` value is `'prefix'` which tells the router
to match the redirect route when the *remaining* URL ***begins*** with the redirect route's _prefix_ path.
That's not what we want to do here. If the `pathMatch` value were `'prefix'`,
_every_ URL would match `''`.
We could never navigate to `/crisis-center/1` because the redirect route would match first and
That's not what we want to do here. If the `pathMatch` value were `'prefix'`,
_every_ URL would match `''`.
We could never navigate to `/crisis-center/1` because the redirect route would match first and
send us to the `CrisisListComponent`.
We should redirect to the `CrisisListComponent` _only_ when the _entire (remaining)_ url is `''`.
Learn more in Victor Savkin's blog
Learn more in Victor Savkin's blog
[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
We'll discuss redirects in more detail in a future update to this chapter.
@ -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

2
public/docs/ts/latest/tutorial/toh-pt5.jade
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=".")