Imporve navigation example

vakrilov · vakrilov · commit c433502cd7a3 · 2016-03-11T16:42:38.000+02:00
diff --git a/ng-sample/app/examples/navigation/nav-component.ts b/ng-sample/app/examples/navigation/nav-component.ts
@@ -2,11 +2,12 @@ import {Component} from 'angular2/core';
 import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
 LocationStrategy, RouteParams, ComponentInstruction, RouteConfig, Location } from 'angular2/router';
 import {topmost} from "ui/frame";
+import {Page} from "ui/page";
 import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router";
 
 
 @Component({
-    selector: 'main',
+    selector: 'master',
     template: `
     <StackLayout>
         <Label text="Master View" style="font-size: 20; horizontal-align: center; margin: 10"></Label>
@@ -15,22 +16,23 @@ import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router"
     </StackLayout>
     `
 })
-class MainComp {
+class MasterComponent {
     public details: Array<number> = [1, 2, 3];
 
     constructor(private _router: Router) {
+        console.log("MasterComponent.constructor()");
     }
 
     onSelect(val: number) {
         this._router.navigate(['../Detail', { id: val }]);
     }
 
     routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
-        console.log("MainComp.routerOnActivate()")
+        console.log("MasterComponent.routerOnActivate()")
     }
 
     routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
-        console.log("MainComp.routerOnDeactivate()")
+        console.log("MasterComponent.routerOnDeactivate()")
     }
 }
 
@@ -45,9 +47,10 @@ class MainComp {
     </StackLayout>
     `
 })
-class DetailComp {
+class DetailComponent {
     public id: number;
     constructor(params: RouteParams, private _router: Router) {
+        console.log("DetailComponent.constructor()");
         this.id = parseInt(params.get("id"));
     }
 
@@ -56,11 +59,11 @@ class DetailComp {
     }
 
     routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
-        console.log("DetailComp.routerOnActivate() id: " + this.id)
+        console.log("DetailComponent.routerOnActivate() id: " + this.id)
     }
 
     routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
-        console.log("DetailComp.routerOnDeactivate() id: " + this.id)
+        console.log("DetailComponent.routerOnDeactivate() id: " + this.id)
     }
 }
 
@@ -89,8 +92,8 @@ class DetailComp {
 `
 })
 @RouteConfig([
-    { path: '/', name: 'Main', component: MainComp, useAsDefault: true },
-    { path: '/:id', name: 'Detail', component: DetailComp }
+    { path: '/', name: 'Main', component: MasterComponent, useAsDefault: true },
+    { path: '/:id', name: 'Detail', component: DetailComponent }
 ])
 export class NavComponent implements OnActivate, OnDeactivate {
     static counter: number = 0;
@@ -99,6 +102,7 @@ export class NavComponent implements OnActivate, OnDeactivate {
     public depth: number;
 
     constructor(params: RouteParams, private location: Location) {
+        console.log("NavComponent.constructor()");
         NavComponent.counter++;
 
         this.compId = NavComponent.counter;
diff --git a/ng-sample/app/examples/navigation/navigation-test.ts b/ng-sample/app/examples/navigation/navigation-test.ts
@@ -1,5 +1,5 @@
 import {Component} from 'angular2/core';
-import {RouteConfig, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';
+import {RouteConfig, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, ComponentInstruction} from 'angular2/router';
 
 import {NavComponent} from "./nav-component";
 import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "../../nativescript-angular/router/ns-router";
@@ -15,7 +15,17 @@ import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "../../nativescript-angu
     `
 })
 class StartComponent {
+    constructor() {
+        console.log("StartComponent.constructor()")
+    }
 
+    routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
+        console.log("StartComponent.routerOnActivate()")
+    }
+
+    routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
+        console.log("StartComponent.routerOnDeactivate()")
+    }
 }
 
 @Component({

Original file line number	Diff line number	Diff line change
`@@ -2,11 +2,12 @@ import {Component} from 'angular2/core';`
`2`	`2`	`import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,`
`3`	`3`	`LocationStrategy, RouteParams, ComponentInstruction, RouteConfig, Location } from 'angular2/router';`
`4`	`4`	`import {topmost} from "ui/frame";`
	`5`	`+import {Page} from "ui/page";`
`5`	`6`	`import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router";`
`6`	`7`
`7`	`8`
`8`	`9`	`@Component({`
`9`		`- selector: 'main',`
	`10`	`+ selector: 'master',`
`10`	`11`	template: `
`11`	`12`	`<StackLayout>`
`12`	`13`	`<Label text="Master View" style="font-size: 20; horizontal-align: center; margin: 10"></Label>`
`@@ -15,22 +16,23 @@ import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router"`
`15`	`16`	`</StackLayout>`
`16`	`17`	`
`17`	`18`	`})`
`18`		`-class MainComp {`
	`19`	`+class MasterComponent {`
`19`	`20`	`public details: Array<number> = [1, 2, 3];`
`20`	`21`
`21`	`22`	`constructor(private _router: Router) {`
	`23`	`+ console.log("MasterComponent.constructor()");`
`22`	`24`	`}`
`23`	`25`
`24`	`26`	`onSelect(val: number) {`
`25`	`27`	`this._router.navigate(['../Detail', { id: val }]);`
`26`	`28`	`}`
`27`	`29`
`28`	`30`	`routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {`
`29`		`- console.log("MainComp.routerOnActivate()")`
	`31`	`+ console.log("MasterComponent.routerOnActivate()")`
`30`	`32`	`}`
`31`	`33`
`32`	`34`	`routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {`
`33`		`- console.log("MainComp.routerOnDeactivate()")`
	`35`	`+ console.log("MasterComponent.routerOnDeactivate()")`
`34`	`36`	`}`
`35`	`37`	`}`
`36`	`38`
`@@ -45,9 +47,10 @@ class MainComp {`
`45`	`47`	`</StackLayout>`
`46`	`48`	`
`47`	`49`	`})`
`48`		`-class DetailComp {`
	`50`	`+class DetailComponent {`
`49`	`51`	`public id: number;`
`50`	`52`	`constructor(params: RouteParams, private _router: Router) {`
	`53`	`+ console.log("DetailComponent.constructor()");`
`51`	`54`	`this.id = parseInt(params.get("id"));`
`52`	`55`	`}`
`53`	`56`
`@@ -56,11 +59,11 @@ class DetailComp {`
`56`	`59`	`}`
`57`	`60`
`58`	`61`	`routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {`
`59`		`- console.log("DetailComp.routerOnActivate() id: " + this.id)`
	`62`	`+ console.log("DetailComponent.routerOnActivate() id: " + this.id)`
`60`	`63`	`}`
`61`	`64`
`62`	`65`	`routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {`
`63`		`- console.log("DetailComp.routerOnDeactivate() id: " + this.id)`
	`66`	`+ console.log("DetailComponent.routerOnDeactivate() id: " + this.id)`
`64`	`67`	`}`
`65`	`68`	`}`
`66`	`69`
`@@ -89,8 +92,8 @@ class DetailComp {`
`89`	`92`	`
`90`	`93`	`})`
`91`	`94`	`@RouteConfig([`
`92`		`- { path: '/', name: 'Main', component: MainComp, useAsDefault: true },`
`93`		`- { path: '/:id', name: 'Detail', component: DetailComp }`
	`95`	`+ { path: '/', name: 'Main', component: MasterComponent, useAsDefault: true },`
	`96`	`+ { path: '/:id', name: 'Detail', component: DetailComponent }`
`94`	`97`	`])`
`95`	`98`	`export class NavComponent implements OnActivate, OnDeactivate {`
`96`	`99`	`static counter: number = 0;`
`@@ -99,6 +102,7 @@ export class NavComponent implements OnActivate, OnDeactivate {`
`99`	`102`	`public depth: number;`
`100`	`103`
`101`	`104`	`constructor(params: RouteParams, private location: Location) {`
	`105`	`+ console.log("NavComponent.constructor()");`
`102`	`106`	`NavComponent.counter++;`
`103`	`107`
`104`	`108`	`this.compId = NavComponent.counter;`