Merge pull request #4 from NativeScript/clear-history

Navigation otpions pages

Author: SvetoslavTsenov

Diff for: .gitignore

@@ -1,6 +1,7 @@
 hooks
 node_modules
 platforms
+lib
 
 app/**/*.js
 app/**/*.map

Diff for: app/main/main-page-router-outlet.ts

@@ -15,11 +15,15 @@ import { BindingComponent } from "../binding/binding-page";
 
 import { ListViewComponent } from "../listView/commonTemplate/list-view-page";
 import { ListViewControlComponent } from "../listView/customTemplate/list-view-item-template";
-import { ListViewAsyncPipeComponent } from "../listView/asyncPipeTemplate/async-pipe-template"
-import { ListViewMainPageComponent } from "../listView/listViewMainPage/list-view-main-page"
+import { ListViewAsyncPipeComponent } from "../listView/asyncPipeTemplate/async-pipe-template";
+import { ListViewMainPageComponent } from "../listView/listViewMainPage/list-view-main-page";
 
 import { ModalTest, ModalTestWithPushStrategy } from "../modal/modal-dialog.component";
 
+import { NavigationOptionsComponent } from "../navigation-options/navigation-options.component";
+import { NavigationInfoComponent } from "../navigation-options/navigation-info.component";
+
+
 @Component({
     selector: "main",
     directives: [NS_ROUTER_DIRECTIVES],
@@ -49,7 +53,9 @@ import { ModalTest, ModalTestWithPushStrategy } from "../modal/modal-dialog.comp
         <StackLayout orientation="horizontal" horizontalAlignment="center">
             <Button text="modal" [nsRouterLink]="['/modal']"></Button>
             <Button text="modal(onPush)" [nsRouterLink]="['/modal-on-push']"></Button> 
-        </StackLayout>  
+        </StackLayout> 
+
+        <Button text="nav-options" [nsRouterLink]="['/nav-options']"></Button>
     </StackLayout>
     `,
 })
@@ -63,7 +69,7 @@ class MainComponent { }
 export class NavigationMainPageRouter { }
 
 
-var routes: RouterConfig = [
+const routes: RouterConfig = [
     { path: '', component: MainComponent },
     { path: 'template', component: AppComponent },
     { path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes },
@@ -81,6 +87,9 @@ var routes: RouterConfig = [
 
     { path: 'modal', component: ModalTest },
     { path: 'modal-on-push', component: ModalTestWithPushStrategy },
+
+    { path: 'nav-options', component: NavigationOptionsComponent },
+    { path: 'nav-info', component: NavigationInfoComponent }
 ];
 
 export var MainRouterProviders = nsProvideRouter(routes, { enableTracing: false });

Diff for: app/navigation-options/navigation-info.component.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {NS_ROUTER_DIRECTIVES, RouterExtensions} from "nativescript-angular/router";
+import {NSLocationStrategy} from "nativescript-angular/router/ns-location-strategy";
+import {Frame} from "ui/frame";
+
+
+@Component({
+    selector: 'nav-info',
+    directives: [NS_ROUTER_DIRECTIVES],
+    template: `
+    <StackLayout>
+        <Label [text]="'frameStack: ' + frameStack" ></Label>
+        <Label [text]="'locationStack: ' + locationStack" ></Label>
+
+        <Button text="update" (tap)="update()"></Button>
+        <Button text="back to main" [nsRouterLink]="['/']" [clearHistory]="true"></Button>
+    </StackLayout>
+  `
+})
+export class NavigationInfoComponent {
+    private frameStack: number = -1;
+    private locationStack: number = -1;
+
+    constructor(private frame: Frame, private strategy: NSLocationStrategy) { }
+
+    update() {
+        // If history is cleared: frameStack = 0, locationStack = 1
+        this.frameStack = this.frame.backStack.length;
+        this.locationStack = this.strategy._getSatates().length;
+    }
+}

Diff for: app/navigation-options/navigation-options.component.ts

@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {NS_ROUTER_DIRECTIVES, RouterExtensions} from "nativescript-angular/router";
+
+@Component({
+    selector: 'nav-options',
+    directives: [NS_ROUTER_DIRECTIVES],
+    template: `
+    <StackLayout>
+        <Button text="clear-history" [nsRouterLink]="['/nav-info']" [clearHistory]="true"></Button>
+        <Button text="page-trasnitions" (tap)="flipToNextPage()"></Button> 
+    </StackLayout>
+  `
+})
+export class NavigationOptionsComponent {
+
+    constructor(private routerExtensions: RouterExtensions) { }
+
+    flipToNextPage() {
+        this.routerExtensions.navigate(["/nav-info"], {
+            transition: {
+                name: "flip",
+                duration: 5000,
+                curve: "linear"
+            }
+        });
+    }
+}

Diff for: package.json

@@ -6,7 +6,7 @@
 	"nativescript": {
 		"id": "org.nativescript.testsappng",
 		"tns-ios": {
-			"version": "2.0.1"
+			"version": "2.1.1"
 		},
 		"tns-android": {
 			"version": "2.1.1"
@@ -21,8 +21,8 @@
 		"@angular/platform-server": "2.0.0-rc.3",
 		"@angular/router-deprecated": "2.0.0-rc.2",
 		"@angular/router": "3.0.0-alpha.7",
-		"nativescript-angular": "^0.2.0",
-		"tns-core-modules": "^2.0.0 || 2.0.0-angular-7"
+		"nativescript-angular": "next",
+		"tns-core-modules": "next"
 	},
 	"devDependencies": {
 		"babel-traverse": "6.8.0",