docs(router): Added transition aliases for route animations

Author: brandonroberts

public/docs/_examples/router/e2e-spec.ts

@@ -114,7 +114,7 @@ describe('Router', function () {
       return page.loginButton.click();
     }).then(function() {
       expect(page.adminPreloadList.count()).toBe(1, 'should be 1 preloaded module');
-      expect(page.adminPreloadList.first().getText()).toBe('Crisis Center', 'first preload should be crisis center');
+      expect(page.adminPreloadList.first().getText()).toBe('crisis-center', 'first preload should be crisis center');
     });
   });
 

public/docs/_examples/router/ts/app/app-routing.module.ts

@@ -25,7 +25,6 @@ import { PreloadSelectedModules } from './selective-preload-strategy';
         path: 'crisis-center',
         loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
         data: {
-          moduleName: 'Crisis Center',
           preload: true
         }
       }

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -35,14 +35,14 @@ import { DialogService }          from '../dialog.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

@@ -34,14 +34,14 @@ import { DialogService }  from '../dialog.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'

public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts

@@ -34,14 +34,14 @@ import { Hero, HeroService }  from './hero.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'

public/docs/_examples/router/ts/app/selective-preload-strategy.ts

@@ -10,8 +10,11 @@ export class PreloadSelectedModules implements PreloadingStrategy {
 
   preload(route: Route, load: Function): Observable<any> {
     if (route.data && route.data['preload']) {
-      // add the "moduleName" to our preloaded module array
-      this.preloadedModules.push(route.data['moduleName']);
+      // add the route path to our preloaded module array
+      this.preloadedModules.push(route.path);
+
+      // log the route path to the console
+      console.log('Preloaded: ' + route.path);
 
       return load();
     } else {

public/docs/ts/latest/guide/router.jade

@@ -1142,8 +1142,8 @@ h3#route-animation Adding animations to the route component
 :marked
   Next, we'll use a **host binding** for route animations named *@routeAnimation*. There is nothing special
   about the choice of the binding name, but since we are controlling route animation, we'll go with `routeAnimation`.
-  The binding value is set to `true` because we only care about the `*` and `void` states which are
-  [entering and leaving](../guide/animations.html#example-entering-and-leaving) animation states.
+  The binding value is set to `true` because we only care about the `:enter` and `:leave` states which are
+  [entering and leaving](../api/core/index/transition-function.html#transition-aliases-enter-and-leave-) transition aliases.
 
   We'll also add some display and positioning bindings for styling.
 
@@ -1152,8 +1152,8 @@ h3#route-animation Adding animations to the route component
 :marked
   Now we can build our animation trigger, which we'll call *routeAnimation* to match the binding we previously
   setup. We'll use the **wildcard state** that matches any animation state our route component is in, along with
-  two *transitions*. One transition animates the component as it enters the application view (`void => *`), while the other
-  animates the component as it leaves the application view (`* => void`).
+  two *transitions*. One transition animates the component as it enters the application view (`:enter`), while the other
+  animates the component as it leaves the application view (`:leave`).
 
   We could add different transitions to different route components depending on our needs. We'll just animate our `HeroDetailComponent` for this milestone.
 
@@ -1905,7 +1905,7 @@ h3#resolve-guard <i>Resolve</i>: pre-fetching component data
 
   We need the `Resolve` guard.
 
-  ### Preload route information
+  ### Fetch data before navigating
 
   We'll update our `Crisis Detail` route to resolve our Crisis before loading the route, or if the user happens to
   navigate to an invalid crisis center `:id`, we'll navigate back to our list of existing crises.
@@ -2199,7 +2199,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
 
 <a id="custom-preloading"></a>
 :marked
-  ### Custom Pre-Loading
+  ### Custom Pre-Loading Strategy
 
   Pre-loading all modules works well in some situations, but in some cases we need more control over what gets loaded eagerly. This becomes more clear
   as we load our application on a mobile device, or a low bandwidth connection. We may only want to preload certain feature modules based on user metrics
@@ -2210,8 +2210,9 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
   Since we want to take advantage of this, we'll add a custom strategy that _only_ preloads the modules we select. We'll enable the preloading by using the *Route Data*,
   which we learned is an object to store arbitrary route data and and [resolve data](#resolve-guard).
 
-  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we've added an arbitrary
-  `moduleName` property to our route data also that will be added to the `preloadedModules` array in our custom strategy service.
+  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add to
+  the `route.path` to the `preloadedModules` array in our custom strategy service. We'll also log a message
+  to the console for the preloaded module.
 
 +makeExcerpt('app/app-routing.module.ts (route data preload)', 'preload-v2')
 
@@ -2236,9 +2237,8 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
 +makeExcerpt('app/admin/admin-dashboard.component.ts (preloaded modules)', '')
 
 :marked
-  Once our application is loaded to our inital route, the *CrisisCenterModule* is loaded eagerly. We can verify this by logging in to the `Admin` feature area and
-  noting that our `Crisis Center` is listed in the `Preloaded Modules.`
-
+  Once our application is loaded to our initial route, the *CrisisCenterModule* is loaded eagerly. We can verify this by logging in to the `Admin` feature area and
+  noting that the `crisis-center` is listed in the `Preloaded Modules` and logged to the console. We can continue to add feature modules to be selectively loaded eagerly.
 
 
 <a id="final-app"></a>