added step 53

Author: ziaukhan

step53_animations_page_transitions/.gitignore

@@ -0,0 +1 @@
+node_modules

step53_animations_page_transitions/app/app.component.js

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+
+
+@Component({
+ selector: 'my-app',
+ template: `<h1>{{title}}</h1>
+ <a [routerLink]="['/page1']">Page One</a>
+ <a [routerLink]="['/page2']">Page Two</a>
+ <router-outlet></router-outlet>`,
+ directives: [ROUTER_DIRECTIVES]
+})
+export class AppComponent { 
+ title: string;
+
+ constructor(){
+ this.title = "My first test of the new router with page transitions";
+ }
+}

step53_animations_page_transitions/app/app.component.js.map

@@ -0,0 +1,24 @@
+import { provideRouter, RouterConfig } from '@angular/router';
+import { Page1Component } from './page1.component';
+import { Page2Component } from './page2.component';
+
+export const routes: RouterConfig = [
+ {
+ path: 'page1',
+ component: Page1Component
+ },
+ {
+ path: 'page2',
+ component: Page2Component
+ },
+ { path: '', 
+ component: Page1Component 
+ }
+];
+
+export const APP_ROUTER_PROVIDERS = [
+ provideRouter(routes)
+];
+
+
+

step53_animations_page_transitions/app/app.component.ts

@@ -0,0 +1,9 @@
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { AppComponent } from './app.component';
+import { APP_ROUTER_PROVIDERS } from './app.routes';
+
+bootstrap(AppComponent, [
+ APP_ROUTER_PROVIDERS
+]).catch(err => console.error(err));;
+
+