Skip to content

Commit f202846

Browse files
vakrilovvakrilov
committed
Page router outlet and router directives
1 parent 1f16b62 commit f202846

File tree

8 files changed

+584
-2
lines changed

8 files changed

+584
-2
lines changed

‎ng-sample/app/app.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,23 @@
77

88
// this import should be first in order to load some required settings (like globals and reflect-metadata)
99
import { nativeScriptBootstrap } from "./nativescript-angular/application";
10+
import { NS_ROUTER_PROVIDERS, routerTraceCategory } from "./nativescript-angular/router/ns-router";
11+
12+
import trace = require("trace");
13+
trace.setCategories(routerTraceCategory);
14+
trace.enable();
1015

1116
//import {RendererTest} from './examples/renderer-test';
1217
//import {Benchmark} from './performance/benchmark';
1318
//import {ListTest} from './examples/list/list-test';
14-
import {ListTestAsync} from "./examples/list/list-test-async";
19+
// import {ListTestAsync} from "./examples/list/list-test-async";
1520
// import {ImageTest} from "./examples/image/image-test";
21+
import {NavigationTest} from "./examples/navigation/navigation-test";
22+
1623

1724
//nativeScriptBootstrap(RendererTest);
1825
//nativeScriptBootstrap(Benchmark);
1926
//nativeScriptBootstrap(ListTest);
20-
nativeScriptBootstrap(ListTestAsync);
27+
// nativeScriptBootstrap(ListTestAsync);
2128
// nativeScriptBootstrap(ImageTest);
29+
nativeScriptBootstrap(NavigationTest, [NS_ROUTER_PROVIDERS]);

‎ng-sample/app/examples/navigation/nav-component.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {Component} from 'angular2/core';
2+
import {OnActivate, OnDeactivate, LocationStrategy, RouteParams, ComponentInstruction } from 'angular2/router';
3+
import {topmost} from "ui/frame";
4+
import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router";
5+
6+
7+
@Component({
8+
selector: 'example-group',
9+
directives: [NS_ROUTER_DIRECTIVES],
10+
template: `
11+
<GridLayout rows="auto, auto, auto" columns="*, *" margin="10">
12+
<Label [text]="'Componenet ID: ' + compId" colSpan="2" row="0"
13+
style="font-size: 30; horizontal-align: center; margin: 10"></Label>
14+
15+
<Label [text]="'Depth: ' + depth" colSpan="2" row="1"
16+
style="font-size: 30; horizontal-align: center; margin: 10"></Label>
17+
18+
<Button text="BACK" row="2" col="0" width="150"
19+
(tap)="goBack()"></Button>
20+
21+
<Button text="FORWARD" row="2" col="1" width="150"
22+
[nsRouterLink]="['/Nav', { depth: depth + 1 }]"></Button>
23+
</GridLayout>
24+
`
25+
})
26+
export class NavComponent implements OnActivate, OnDeactivate {
27+
static counter: number = 0;
28+
29+
public compId: number;
30+
public depth: number;
31+
32+
constructor(params: RouteParams, private location: LocationStrategy) {
33+
NavComponent.counter++;
34+
35+
this.compId = NavComponent.counter;
36+
this.depth = parseInt(params.get("depth"));
37+
38+
console.log("NavComponent.constructor() componenetID: " + this.compId)
39+
}
40+
41+
public goBack() {
42+
// this.location.back();
43+
topmost().goBack();
44+
}
45+
46+
routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
47+
console.log("NavComponent.routerOnActivate() componenetID: " + this.compId)
48+
}
49+
50+
routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
51+
console.log("NavComponent.routerOnDeactivate() componenetID: " + this.compId)
52+
}
53+
}

‎ng-sample/app/examples/navigation/navigation-test.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Component} from 'angular2/core';
2+
import {RouteConfig, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';
3+
4+
import {NavComponent} from "./nav-component";
5+
import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router";
6+
7+
@Component({
8+
selector:"start-nav-test",
9+
directives: [NS_ROUTER_DIRECTIVES],
10+
template:`<Button horizontalAlignment="center" verticalAlignment="center" text="start" [nsRouterLink]="['/Nav', { depth: 1 }]"></Button>`
11+
})
12+
class StartComponent {
13+
14+
}
15+
16+
17+
@Component({
18+
selector: 'navigation-test',
19+
directives: [NS_ROUTER_DIRECTIVES],
20+
template: "<GridLayout><page-router-outlet></page-router-outlet></GridLayout>"
21+
})
22+
@RouteConfig([
23+
{ path: '/', component: StartComponent, as: 'Start' },
24+
{ path: '/nav/:depth', component: NavComponent, as: 'Nav' },
25+
])
26+
export class NavigationTest {
27+
28+
}
29+

‎src/nativescript-angular/router/common.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import trace = require("trace");
2+
3+
export const CATEGORY = "ns-router";
4+
5+
export function log(message: string) {
6+
trace.write(message, CATEGORY);
7+
}

‎src/nativescript-angular/router/ns-location-strategy.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import application = require("application");
2+
import { LocationStrategy } from 'angular2/router';
3+
import { NgZone, ApplicationRef, Inject, forwardRef } from 'angular2/core';
4+
import { log } from "./common";
5+
6+
interface LocationState
7+
{
8+
state: any,
9+
title: string,
10+
url: string,
11+
queryParams: string
12+
}
13+
14+
export class NSLocationStrategy extends LocationStrategy {
15+
private states = new Array<LocationState>();
16+
private popStateCallbacks = new Array<(_: any) => any>();
17+
private ngZone: NgZone;
18+
constructor(@Inject(forwardRef(() => NgZone)) zone: NgZone){
19+
super();
20+
21+
this.ngZone = zone;
22+
//if(application.android){
23+
//application.android.on("activityBackPressed", (args: application.AndroidActivityBackPressedEventData) => {
24+
//this.ngZone.run( () => {
25+
//if(this.states.length > 1){
26+
//this.back();
27+
//args.cancel = true;
28+
//}
29+
//});
30+
//})
31+
//}
32+
}
33+
34+
path(): string {
35+
log("NSLocationStrategy.path()");
36+
if(this.states.length > 0){
37+
return this.states[this.states.length - 1].url;
38+
}
39+
return "/";
40+
}
41+
prepareExternalUrl(internal: string): string {
42+
log("NSLocationStrategy.prepareExternalUrl() internal: " + internal);
43+
return internal;
44+
}
45+
pushState(state: any, title: string, url: string, queryParams: string): void {
46+
log(`NSLocationStrategy.pushState state: ${state}, title: ${title}, url: ${url}, queryParams: ${queryParams}`);
47+
48+
this.states.push({
49+
state: state,
50+
title: title,
51+
url: url,
52+
queryParams: queryParams });
53+
54+
}
55+
replaceState(state: any, title: string, url: string, queryParams: string): void {
56+
log(`NSLocationStrategy.replaceState state: ${state}, title: ${title}, url: ${url}, queryParams: ${queryParams}`);
57+
58+
this.states.pop()
59+
this.states.push({
60+
state: state,
61+
title: title,
62+
url: url,
63+
queryParams: queryParams });
64+
}
65+
forward(): void {
66+
log("NSLocationStrategy.forward");
67+
throw new Error("Not implemented");
68+
}
69+
back(): void {
70+
log("NSLocationStrategy.back");
71+
72+
var state = this.states.pop();
73+
this.callPopState(state, true);
74+
}
75+
onPopState(fn: (_: any) => any): void {
76+
log("NSLocationStrategy.onPopState");
77+
this.popStateCallbacks.push(fn);
78+
}
79+
getBaseHref(): string {
80+
log("NSLocationStrategy.getBaseHref()");
81+
return "";
82+
}
83+
84+
private callPopState(state:LocationState, pop: boolean = true){
85+
var change = { url: state.url, pop: pop};
86+
for(var fn of this.popStateCallbacks){
87+
fn(change);
88+
}
89+
}
90+
}

‎src/nativescript-angular/router/ns-router-link.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {Directive, Input} from 'angular2/core';
2+
import {isString} from 'angular2/src/facade/lang';
3+
import {Router, Location, Instruction} from 'angular2/router';
4+
import { log } from "./common";
5+
6+
/**
7+
* The NSRouterLink directive lets you link to specific parts of your app.
8+
*
9+
* Consider the following route configuration:
10+
* ```
11+
* @RouteConfig([
12+
* { path: '/user', component: UserCmp, as: 'User' }
13+
* ]);
14+
* class MyComp {}
15+
* ```
16+
*
17+
* When linking to this `User` route, you can write:
18+
*
19+
* ```
20+
* <a [nsRouterLink]="['./User']">link to user component</a>
21+
* ```
22+
*
23+
* RouterLink expects the value to be an array of route names, followed by the params
24+
* for that level of routing. For instance `['/Team', {teamId: 1}, 'User', {userId: 2}]`
25+
* means that we want to generate a link for the `Team` route with params `{teamId: 1}`,
26+
* and with a child route `User` with params `{userId: 2}`.
27+
*
28+
* The first route name should be prepended with `/`, `./`, or `../`.
29+
* If the route begins with `/`, the router will look up the route from the root of the app.
30+
* If the route begins with `./`, the router will instead look in the current component's
31+
* children for the route. And if the route begins with `../`, the router will look at the
32+
* current component's parent.
33+
*/
34+
@Directive({
35+
selector: '[nsRouterLink]',
36+
inputs: ['params: nsRouterLink'],
37+
host: {
38+
'(tap)': 'onTap()'
39+
}
40+
})
41+
export class NSRouterLink {
42+
private _routeParams: any[];
43+
44+
// the instruction passed to the router to navigate
45+
private _navigationInstruction: Instruction;
46+
47+
constructor(private _router: Router, private _location: Location) { }
48+
49+
// get isRouteActive(): boolean { return this._router.isRouteActive(this._navigationInstruction); }
50+
51+
set params(changes: any[]) {
52+
this._routeParams = changes;
53+
this._navigationInstruction = this._router.generate(this._routeParams);
54+
}
55+
56+
onTap(): void {
57+
log("NSRouterLink onTap() instruction: " + JSON.stringify(this._navigationInstruction))
58+
this._router.navigateByInstruction(this._navigationInstruction);
59+
}
60+
}

‎src/nativescript-angular/router/ns-router.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Type} from 'angular2/src/facade/lang';
2+
import {NSRouterLink} from './ns-router-link';
3+
import {PageRouterOutlet} from './page-router-outlet';
4+
import {NSLocationStrategy} from './ns-location-strategy';
5+
import {ROUTER_PROVIDERS, LocationStrategy} from 'angular2/router';
6+
import {provide} from 'angular2/core';
7+
import { CATEGORY } from "./common";
8+
9+
export const NS_ROUTER_PROVIDERS: any[] = [
10+
ROUTER_PROVIDERS,
11+
provide(LocationStrategy, {useClass: NSLocationStrategy})
12+
];
13+
14+
export const NS_ROUTER_DIRECTIVES: Type[] = [
15+
NSRouterLink,
16+
PageRouterOutlet
17+
];
18+
19+
export const routerTraceCategory = CATEGORY;

0 commit comments

Comments
 (0)