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

closes #1834

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html

@@ -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>

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/';

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)
+];

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);

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
+]);

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';

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)
+];

public/docs/_examples/cb-dependency-injection/ts/app/main.ts

@@ -1,7 +1,7 @@
 // #docregion
-import { bootstrap }        from '@angular/platform-browser-dynamic';
+import { bootstrap }            from '@angular/platform-browser-dynamic';
-import { XHRBackend }       from '@angular/http';
+import { XHRBackend }           from '@angular/http';
-import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
+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

public/docs/_examples/router/ts/app/app.component.5.ts

@@ -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 {
-}

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 },

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 }
 ];

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)
 ];

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 },

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)
 ];

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)
 ];

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)
 ];

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
 ]);

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)
 ];

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

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. 
+  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. 
+  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. 
+        In Angular 2, the `ngClass` directive works similarly.
-        It includes/excludes CSS classes based on an expression. 
+        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. 
+        Filtering should be coded in the component.
-        Consider building a custom pipe if the same filtering code 
+        Consider building a custom pipe if the same filtering code
-        will be reused in several templates.      
+        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. 
+        Ordering/sorting the results should be coded in the component.
-        Consider building a custom pipe if the same ordering/sorting code 
+        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)

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 <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'`, 
+    That's not what we want to do here. If the `pathMatch` value were `'prefix'`,
-    _every_ URL would match `''`. 
+    _every_ URL would match `''`.
-    We could never navigate to `/crisis-center/1` because the redirect route would match first and 
+    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

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=".")