Reslove guard added to login example

ng-sample/.vscode/launch.json

@@ -1,85 +1,70 @@
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Launch on iOS Device",
-            "type": "nativescript",
-            "platform": "ios",
-            "request": "launch",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": false
-        },
-        {
-            "name": "Attach on iOS Device",
-            "type": "nativescript",
-            "platform": "ios",
-            "request": "attach",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": false
-        },
-        {
-            "name": "Launch on iOS Emulator",
-            "type": "nativescript",
-            "platform": "ios",
-            "request": "launch",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": true
-        },
-        {
-            "name": "Attach on iOS Emulator",
-            "type": "nativescript",
-            "platform": "ios",
-            "request": "attach",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": true
-        },
-        {
-            "name": "Launch on Android Device",
-            "type": "nativescript",
-            "platform": "android",
-            "request": "launch",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": false
-        },
-        {
-            "name": "Launch on Android Emulator",
-            "type": "nativescript",
-            "platform": "android",
-            "request": "launch",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": true
-        },
-        {
-            "name": "Attach on Android Device",
-            "type": "nativescript",
-            "platform": "android",
-            "request": "attach",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": false
-        },
-        {
-            "name": "Attach on Android Emulator",
-            "type": "nativescript",
-            "platform": "android",
-            "request": "attach",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": true
-        }
-    ]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Sync on iOS",
+      "type": "nativescript",
+      "platform": "ios",
+      "request": "launch",
+      "appRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "diagnosticLogging": false,
+      "emulator": false,
+      "rebuild": false,
+      "syncAllFiles": false
+    },
+    {
+      "name": "Launch on iOS",
+      "type": "nativescript",
+      "platform": "ios",
+      "request": "launch",
+      "appRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "diagnosticLogging": false,
+      "emulator": false,
+      "rebuild": true
+    },
+    {
+      "name": "Attach on iOS",
+      "type": "nativescript",
+      "platform": "ios",
+      "request": "attach",
+      "appRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "diagnosticLogging": false,
+      "emulator": false
+    },
+    {
+      "name": "Sync on Android",
+      "type": "nativescript",
+      "platform": "android",
+      "request": "launch",
+      "appRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "diagnosticLogging": false,
+      "emulator": false,
+      "rebuild": false
+    },
+    {
+      "name": "Launch on Android",
+      "type": "nativescript",
+      "platform": "android",
+      "request": "launch",
+      "appRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "diagnosticLogging": false,
+      "emulator": false,
+      "rebuild": true
+    },
+    {
+      "name": "Attach on Android",
+      "type": "nativescript",
+      "platform": "android",
+      "request": "attach",
+      "appRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "diagnosticLogging": false,
+      "emulator": false
+    }
+  ]
 }

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

@@ -1,9 +1,10 @@
 import { Component, OnInit, OnDestroy, Injectable } from "@angular/core";
-import { Router, CanActivate} from '@angular/router';
+import { Router, CanActivate, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, Params } from '@angular/router';
 import { Observable } from "rxjs";
-import { RouterExtensions } from "nativescript-angular/router";
+import { RouterExtensions, PageRoute } from "nativescript-angular/router";
 import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
-import { BehaviorSubject} from "rxjs";
+import { BehaviorSubject } from "rxjs";
+import { Page } from "ui/page";
 import * as appSettings from "application-settings"
 
 const USER_KEY = "user";
@@ -67,21 +68,64 @@ class LoginComponent {
     }
 }
 
+
+export interface ResolvedData {
+    id: number
+}
+
 @Component({
     selector: 'main',
     styleUrls: ["examples/router/styles.css"],
     template: `
     <StackLayout>
       <Label text="Main Page" class="title"></Label>
       <Label [text]="'Hello, ' + loginService.username" class="subtitle"></Label>
+      <Label [text]="'data.id: ' + (data$ | async).id" class="subtitle"></Label>
+      <Button text="go deeper" nsRouterLink="/inner" class="stretch"></Button>
       <Button text='logout' (tap)="logout()" class="stretch"></Button>
     </StackLayout>
     `
 })
 class MainComponent {
+    private data$: Observable<ResolvedData>;
+    constructor(private nav: RouterExtensions, private loginService: LoginService, private pageRoute: PageRoute) {
+        this.data$ = this.pageRoute.activatedRoute
+            .switchMap(activatedRoute => activatedRoute.data)
+            .map(data => data[0]);
+    }
+
+    logout() {
+        this.loginService.logout().then((result) => {
+            if (result) {
+                this.nav.navigate(["/login"], { clearHistory: true });
+            }
+        });
+    }
+
+    onReslove(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        console.log("MainComponent.onReslove()")
+        return true;
+    }
+}
+
+@Component({
+    selector: 'inner',
+    styleUrls: ["examples/router/styles.css"],
+    template: `
+    <StackLayout>
+      <Label text="Inner Page" class="title"></Label>
+      <Button text='go back' (tap)="back()" class="stretch"></Button>
+      <Button text='logout' (tap)="logout()" class="stretch"></Button>
+    </StackLayout>
+    `
+})
+class InnerComponent {
     constructor(private nav: RouterExtensions, private loginService: LoginService) {
     }
 
+    back() {
+        this.nav.backToPreviousPage();
+    }
     logout() {
         this.loginService.logout().then((result) => {
             if (result) {
@@ -100,35 +144,48 @@ class AuthGuard implements CanActivate {
 
     canActivate() {
         if (this.loginService.isLogged) {
-            console.log("GUARD: authenticated");
+            console.log("AuthGuard: authenticated");
             return true;
         }
         else {
-            console.log("GUARD: redirecting to login");
+            console.log("AuthGuard: redirecting to login");
             this.nav.navigate(["/login"]);
             return false;
         }
     }
 }
 
+@Injectable()
+class ResolveGuard implements Resolve<ResolvedData> {
+    static counter = 0;
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ResolvedData> | Promise<ResolvedData> | ResolvedData {
+        const result: ResolvedData = { id: ResolveGuard.counter++ }
+        console.log(`ResolveGuard: Fteching new data. Result: ${JSON.stringify(result)} `);
+        return result;
+    }
+}
+
 @Component({
     selector: 'navigation-test',
     template: `<page-router-outlet></page-router-outlet>`
 })
 export class LoginAppComponent {
     static routes = [
         { path: "", redirectTo: "/main", terminal: true, pathMatch: "full" },
-        { path: "main", component: MainComponent, canActivate: [AuthGuard] },
+        { path: "main", component: MainComponent, canActivate: [AuthGuard], resolve: [ResolveGuard] },
+        { path: "inner", component: InnerComponent, canActivate: [AuthGuard] },
         { path: "login", component: LoginComponent },
     ]
 
     static entries = [
+        LoginComponent,
         MainComponent,
-        LoginComponent
+        InnerComponent
     ]
 
     static providers = [
         AuthGuard,
+        ResolveGuard,
         LoginService,
     ]
 }

tests/app/snippets/navigation/route-params.ts

@@ -0,0 +1,24 @@
+// >> router-params-activated-route
+import { ActivatedRoute } from '@angular/router';
+class MyComponent {
+  id: number;
+  constructor(private route: ActivatedRoute) {
+    this.route.params
+      .forEach((params) => { this.id = +params['id']; });
+  }
+}
+// << router-params-activated-route
+
+
+// >> router-params-page-route
+import { PageRoute } from "nativescript-angular/router";
+class MyPageComponent {
+  id: number;
+  constructor(private pageRoute: PageRoute) {
+    // use switchMap to get the latest activatedRoute instance
+    this.pageRoute.activatedRoute
+      .switchMap(activatedRoute => activatedRoute.params)
+      .forEach((params) => { this.id = +params['id']; });
+  }
+}
+// << router-params-page-route