-
-
- `,
-// #enddocregion template
- providers: [
- HeroService,
- DialogService,
- provideRouter(routes),
- CanDeactivateGuard,
- { provide: LocationStrategy,
- useClass: HashLocationStrategy } // .../#/crisis-center/
- ],
- directives: [ROUTER_DIRECTIVES]
-})
-export class AppComponent {
-}
diff --git a/public/docs/_examples/router/ts/app/app.routes.1.ts b/public/docs/_examples/router/ts/app/app.routes.1.ts
index f22d480744..14a0ebe946 100644
--- a/public/docs/_examples/router/ts/app/app.routes.1.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.1.ts
@@ -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 },
diff --git a/public/docs/_examples/router/ts/app/app.routes.2.ts b/public/docs/_examples/router/ts/app/app.routes.2.ts
index c79e8ad17c..e2e3d1f9fc 100644
--- a/public/docs/_examples/router/ts/app/app.routes.2.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.2.ts
@@ -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 }
];
diff --git a/public/docs/_examples/style-guide/ts/app/app.routes.ts b/public/docs/_examples/style-guide/ts/app/app.routes.ts
index 9254169331..d3799a9390 100644
--- a/public/docs/_examples/style-guide/ts/app/app.routes.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts
@@ -56,6 +56,6 @@ const routes: RouterConfig = [
{ path: '09-01', component: S0901 },
];
-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
provideRouter(routes)
];
diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts
index b58fbb68dd..759f9e261b 100644
--- a/public/docs/_examples/style-guide/ts/app/main.ts
+++ b/public/docs/_examples/style-guide/ts/app/main.ts
@@ -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 },
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
index 8b4d582680..0c34add29c 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
@@ -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)
];
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
index 47311fcd8d..075cc37496 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
@@ -9,6 +9,6 @@ const routes: RouterConfig = [
}
];
-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
provideRouter(routes)
];
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routes.ts
index 33097804eb..c6074c3607 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.ts
@@ -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)
];
diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts
index da35003df1..f04d528627 100644
--- a/public/docs/_examples/toh-5/ts/app/main.ts
+++ b/public/docs/_examples/toh-5/ts/app/main.ts
@@ -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
]);
diff --git a/public/docs/_examples/toh-6/ts/app/app.routes.ts b/public/docs/_examples/toh-6/ts/app/app.routes.ts
index 1d9adf33fd..e143b2a3bf 100644
--- a/public/docs/_examples/toh-6/ts/app/app.routes.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.routes.ts
@@ -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)
];
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
index 948e2ca5ba..bda66d0377 100644
--- a/public/docs/_examples/toh-6/ts/app/main.ts
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -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
diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
index 1e03e145d2..980e4ecb84 100644
--- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
+++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
@@ -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 2
-
- * [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular 2.
+
+ * [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular 2.
Also covers modules.
-
+
* [Style Sheets](#style-sheets) - more options for CSS in Angular 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 1
th Angular 2
@@ -47,7 +47,7 @@ table(width="100%")
In Angular 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%")
<td>{{movie.title | uppercase}}</td>
:marked
To filter output in our templates in Angular 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 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 1 are
built-in pipes in Angular 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 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 1 provides over seventy built-in directives for use in our templates.
- Many of them are no longer needed in Angular 2 because of its more capable and expressive binding system.
+ Angular 1 provides over seventy built-in directives for use in our templates.
+ Many of them are no longer needed in Angular 2 because of its more capable and expressive binding system.
The following are some of the key Angular 1 built-in directives and the equivalent feature in Angular 2.
table(width="100%")
col(width="50%")
- col(width="50%")
+ col(width="50%")
tr
th Angular 1
th Angular 2
@@ -121,22 +121,22 @@ table(width="100%")
:marked
### ng-app
code-example.
- <body ng-app="movieHunter">
+ <body ng-app="movieHunter">
:marked
The application startup process is called **bootstrapping**.
-
+
Although we can bootstrap an Angular 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 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="").
<div ng-class="{active: isActive}">
- <div ng-class="{active: isActive,
+ <div ng-class="{active: isActive,
shazam: isImportant}">
:marked
In Angular 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 2, the `ngClass` directive works similarly.
- It includes/excludes CSS classes based on an expression.
-
+ In Angular 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 2 also has **class binding**, which is a good way to add or remove a single class
+
+ Angular 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%")
<button ng-click="vm.toggleImage($event)">
:marked
In Angular 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 1 event-based directives do not exist in Angular 2.
+ The Angular 1 event-based directives do not exist in Angular 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 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="").
<div ng-controller="MovieListCtrl as vm">
:marked
- In Angular 1, the `ng-controller` directive attaches a controller to the view.
+ In Angular 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 2, the template no longer specifies its associated controller.
+ In Angular 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 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 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 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 2 works the same as the `ng-if` directive in Angular 1,
+ The `*ngIf` directive in Angular 2 works the same as the `ng-if` directive in Angular 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 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 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 2 is similar to the `ng-repeat` directive in Angular 1.
+ The `*ngFor` directive in Angular 2 is similar to the `ng-repeat` directive in Angular 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 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 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 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 2, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
-
+ In Angular 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 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="").
- <div ng-switch="vm.favoriteHero &&
+ <div ng-switch="vm.favoriteHero &&
vm.checkMovieHero(vm.favoriteHero)">
<div ng-switch-when="true">
Excellent choice!
@@ -433,7 +433,7 @@ table(width="100%")
:marked
In Angular 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 2, the `ngSwitch` directive works similarly.
+ In Angular 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 1
th Angular 2
@@ -513,9 +513,9 @@ table(width="100%")
:marked
### none
There is no comparable pipe in Angular 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 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.
<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 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 1, we write the code that provides the model and the methods for the view in a **controller**.
In Angular 2, we build a **component**.
-
+
Because much of our Angular 1 code is in JavaScript, JavaScript code is shown in the Angular 1 column.
The Angular 2 code is shown using TypeScript.
table(width="100%")
col(width="50%")
- col(width="50%")
+ col(width="50%")
tr
th Angular 1
th Angular 2
@@ -627,13 +627,13 @@ table(width="100%")
}());
:marked
In Angular 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 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 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 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 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 1, we write the code for the model and methods in a controller function.
+ In Angular 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 2, we create a component class.
-
+
NOTE: If you are using TypeScript with Angular 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 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 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 1
th Angular 2
@@ -755,7 +755,7 @@ table(width="100%")
<link href="styles.css" rel="stylesheet" />
:marked
In Angular 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 2, we can use the `styles` or `styleUrls` property of the `@Component` metadata to define
+ In Angular 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 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)
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 0f4ed85a2a..3d67dc1622 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -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 provideRouter
`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
@@ -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 CanDeactivate: 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
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index d576064f2c..9f17e0811a 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -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=".")