Merge pull request #373 from NativeScript/nav-extensions-snippets

Navigation Extensions snippets

Author: Alexander Vakrilov

ng-sample/app/examples/router/router-outlet-test.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
 import { RouterConfig, ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';
-import { NS_ROUTER_DIRECTIVES, nsProvideRouter} from "nativescript-angular/router"
+import { NS_ROUTER_DIRECTIVES, nsProvideRouter} from "nativescript-angular/router";
 
 @Component({
     selector: "first",

tests/app/snippets/navigation/navigation-common.ts

@@ -23,23 +23,4 @@ export class FirstComponent { }
     </StackLayout>`
 })
 export class SecondComponent { }
-// << router-content-components
-
-
-// >> router-location-back
-import {Location} from '@angular/common';
-
-@Component({ 
-    // ...
-    // >> (hide)
-    template: '', selector:"go-back"
-    // << (hide)
-})
-export class MyComponent {
-    constructor(private location: Location) { }
-
-    public goBack() {
-        this.location.back();
-    }
-}
-// << router-location-back
+// << router-content-components

tests/app/snippets/navigation/router-extensions.html

@@ -0,0 +1,28 @@
+<StackLayout>
+    <Label text="Second component" class="title"></Label>
+    <!-- >> router-clear-history-link -->
+    <Button text="login" [nsRouterLink]="['/main']" clearHistory="true"></Button>
+    <!-- << router-clear-history-link -->
+
+    <!-- >> router-page-transition-link -->
+    <Button text="flip to next" [nsRouterLink]="['/main']" pageTransition="flip"></Button>
+    <Button text="no transition" [nsRouterLink]="['/main']" pageTransition="none"></Button>
+    <!-- << router-page-transition-link -->
+
+
+    <!-- >> router-clear-history-code-->
+    <Button text="login" (tap)="login()"></Button>
+    <!-- << router-clear-history-code -->
+
+    <!-- >> router-back -->
+    <Button text="< BACK" (tap)="goBack()"></Button>
+    <!-- << router-back -->
+
+    <!-- >> router-page-back -->
+    <Button text="<< BACK" (tap)="goBackPage()"></Button>
+    <!-- << router-page-back -->
+
+    <!-- >> router-page-transition-code -->
+    <Button text="flip to next" (tap)="flipToNextPage()"></Button>
+    <!-- << router-page-transition-code -->
+</StackLayout>

tests/app/snippets/navigation/router-extensions.ts

@@ -0,0 +1,80 @@
+import {Component} from "@angular/core";
+import {nativeScriptBootstrap} from 'nativescript-angular/application';
+import {NS_ROUTER_DIRECTIVES } from 'nativescript-angular/router';
+import {nsProvideRouter} from 'nativescript-angular/router';
+import {RouterConfig} from '@angular/router';
+
+
+import { RouterExtensions } from 'nativescript-angular/router';
+
+@Component({
+    // ...
+    // >> (hide)
+    selector: "router-extensions-import",
+    directives: [NS_ROUTER_DIRECTIVES],
+    templateUrl: 'snippets/navigation/router-extensions.html'
+    // << (hide)
+})
+export class MyComponent {
+    constructor(private routerExtensions: RouterExtensions) { }
+
+    // >> router-clear-history-code
+    login() {
+        // app logic here ...
+        this.routerExtensions.navigate(["/main"], { clearHistory: true });
+    }
+    // << router-clear-history-code
+
+    // >> router-back
+    public goBack() {
+        this.routerExtensions.back();
+    }
+    // << router-back
+
+    // >> router-page-back
+    public goBackPage() {
+        this.routerExtensions.backToPreviousPage();
+    }
+    // << router-page-back
+
+    // >> router-page-transition-code
+    flipToNextPage() {
+        this.routerExtensions.navigate(["/main"], {
+            transition: {
+                name: "flip",
+                duration: 2000,
+                curve: "linear"
+            }
+        });
+    }
+    // << router-page-transition-code
+}
+
+// >> router-extensions-import
+@Component({
+    // ...
+    // >> (hide)
+    selector: 'component',
+    template: `<StackLayout><Label text="Main Page"></Label></StackLayout>`
+    // << (hide)
+})
+export class MainComponent {
+    constructor(private routerExtensions: RouterExtensions) {
+        // ...
+    }
+}
+// << router-extensions-import
+
+@Component({
+    selector: 'application',
+    directives: [NS_ROUTER_DIRECTIVES],
+    template: "<page-router-outlet></page-router-outlet>"
+})
+export class App { }
+
+const routes: RouterConfig = [
+    { path: "", component: MyComponent },
+    { path: "main", component: MainComponent },
+];
+
+export const providers = nsProvideRouter(routes, {});