From 079747aaa587cf1ded6b04bc1b262a6e0025e354 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Tue, 5 Jul 2016 21:20:33 -0500 Subject: [PATCH] docs(router): Removed references to deprecated router --- .../ts/app/app.component.html | 2 +- .../ts/app/app.component.ts | 7 +- .../ts/app/app.routes.ts | 13 ++ .../cb-a1-a2-quick-reference/ts/app/main.1.ts | 5 + .../cb-a1-a2-quick-reference/ts/app/main.ts | 6 +- .../ts/app/movie-list.component.ts | 1 - .../ts/app/app.routes.ts | 7 + .../cb-dependency-injection/ts/app/main.ts | 8 +- .../router/ts/app/app.component.5.ts | 42 ---- .../_examples/router/ts/app/app.routes.1.ts | 2 +- .../_examples/router/ts/app/app.routes.2.ts | 2 +- .../style-guide/ts/app/app.routes.ts | 2 +- .../docs/_examples/style-guide/ts/app/main.ts | 4 +- .../_examples/toh-5/ts/app/app.routes.1.ts | 4 +- .../_examples/toh-5/ts/app/app.routes.2.ts | 2 +- .../docs/_examples/toh-5/ts/app/app.routes.ts | 4 +- public/docs/_examples/toh-5/ts/app/main.ts | 4 +- .../docs/_examples/toh-6/ts/app/app.routes.ts | 4 +- public/docs/_examples/toh-6/ts/app/main.ts | 6 +- .../cookbook/a1-a2-quick-reference.jade | 218 +++++++++--------- public/docs/ts/latest/guide/router.jade | 28 +-- public/docs/ts/latest/tutorial/toh-pt5.jade | 2 +- 22 files changed, 177 insertions(+), 196 deletions(-) create mode 100644 public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts create mode 100644 public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts create mode 100644 public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts delete mode 100644 public/docs/_examples/router/ts/app/app.component.5.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html index 9626afd5cb..72fd3de86f 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html @@ -4,7 +4,7 @@

{{title}}

Routed Movies

diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts index f2ca099297..cdb9d9fd81 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts @@ -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/'; diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts new file mode 100644 index 0000000000..1fd2627996 --- /dev/null +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts @@ -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) +]; diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts new file mode 100644 index 0000000000..67de525937 --- /dev/null +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts @@ -0,0 +1,5 @@ +// #docregion +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { AppComponent } from './app.component'; + +bootstrap(AppComponent); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts index 52b47899ef..7a1d58fad8 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts @@ -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 +]); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts index 4157d8aa3a..67b0c2873d 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts @@ -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'; diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts new file mode 100644 index 0000000000..c8eb6ee683 --- /dev/null +++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts @@ -0,0 +1,7 @@ +import { provideRouter, RouterConfig } from '@angular/router'; + +const routes: RouterConfig = []; + +export const appRouterProviders = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts index fd4646a055..c83f329e91 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts @@ -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 diff --git a/public/docs/_examples/router/ts/app/app.component.5.ts b/public/docs/_examples/router/ts/app/app.component.5.ts deleted file mode 100644 index 7ffb615027..0000000000 --- a/public/docs/_examples/router/ts/app/app.component.5.ts +++ /dev/null @@ -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: ` -

Component Router

- - - `, -// #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=".")