From 849fc75d8e0f2172477cd52104fef0392a05902d Mon Sep 17 00:00:00 2001 From: vakrilov Date: Thu, 3 Nov 2016 11:38:05 +0200 Subject: [PATCH] Reslove guard added to login example --- ng-sample/.vscode/launch.json | 151 ++++++++---------- ng-sample/app/examples/router/login-test.ts | 71 +++++++- tests/app/snippets/navigation/route-params.ts | 24 +++ 3 files changed, 156 insertions(+), 90 deletions(-) create mode 100644 tests/app/snippets/navigation/route-params.ts diff --git a/ng-sample/.vscode/launch.json b/ng-sample/.vscode/launch.json index d2ea7615d..d36693af8 100644 --- a/ng-sample/.vscode/launch.json +++ b/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 + } + ] } \ No newline at end of file diff --git a/ng-sample/app/examples/router/login-test.ts b/ng-sample/app/examples/router/login-test.ts index 58efbec1b..075e6d831 100644 --- a/ng-sample/app/examples/router/login-test.ts +++ b/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,6 +68,11 @@ class LoginComponent { } } + +export interface ResolvedData { + id: number +} + @Component({ selector: 'main', styleUrls: ["examples/router/styles.css"], @@ -74,14 +80,52 @@ class LoginComponent { + + ` }) class MainComponent { + private data$: Observable; + 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: ` + + + + + + ` +}) +class InnerComponent { constructor(private nav: RouterExtensions, private loginService: LoginService) { } + back() { + this.nav.backToPreviousPage(); + } logout() { this.loginService.logout().then((result) => { if (result) { @@ -100,17 +144,27 @@ 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 { + static counter = 0; + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | ResolvedData { + const result: ResolvedData = { id: ResolveGuard.counter++ } + console.log(`ResolveGuard: Fteching new data. Result: ${JSON.stringify(result)} `); + return result; + } +} + @Component({ selector: 'navigation-test', template: `` @@ -118,17 +172,20 @@ class AuthGuard implements CanActivate { 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, ] } diff --git a/tests/app/snippets/navigation/route-params.ts b/tests/app/snippets/navigation/route-params.ts new file mode 100644 index 000000000..9a04e56a7 --- /dev/null +++ b/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 \ No newline at end of file