Skip to content

Commit f077224

Browse files
author
Vasil Chimev
authored
Merge pull request #2 from NativeScript/update-to-router-3
migrate to router v3
2 parents 1a5dcb1 + cdbbff4 commit f077224

12 files changed

+82
-126
lines changed

‎app/action-bar/action-bar-first.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {Component} from '@angular/core';
2-
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router-deprecated/ns-router-deprecated";
2+
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
33

44
@Component({
55
selector: "first-action-bar",
66
directives: [NS_ROUTER_DIRECTIVES],
77
template: `
88
<ActionBar title="Title 1" automationText="title">
9-
<ActionItem *ngIf="show" text="action" (tap)="onTap()" [nsRouterLink]="['Second']"
9+
<ActionItem *ngIf="show" text="action" (tap)="onTap()" [nsRouterLink]="['../second']"
1010
automationText="action"></ActionItem>
1111
<ActionItem (tap)="onShare()" ios.systemIcon="9" ios.position="left"
1212
android.systemIcon="ic_menu_share_holo_light" android.position="actionBar"

‎app/action-bar/action-bar-nested.component.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import {Component} from '@angular/core';
2-
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router-deprecated/ns-router-deprecated";
32

43
@Component({
54
selector: "nested-component",
6-
directives: [NS_ROUTER_DIRECTIVES],
75
template: `
86
<ActionBarExtension>
97
<ActionItem *ngIf="show" (tap)="onTap()">

‎app/action-bar/action-bar-second.component.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import {Component} from '@angular/core';
22
import {NestedComponent} from "./action-bar-nested.component";
3-
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router-deprecated/ns-router-deprecated";
43

54
@Component({
65
selector: "second-action-bar",
7-
directives: [NS_ROUTER_DIRECTIVES, NestedComponent],
6+
directives: [NestedComponent],
87
template: `
98
<ActionBar title="Title 2" automationText="title">
109
<NavigationButton text="First" android.systemIcon="ic_menu_back" automationText="back"></NavigationButton>

‎app/action-bar/action-bar-test.ts

-20
This file was deleted.

‎app/components/first.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {Component} from "@angular/core";
2-
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router-deprecated/ns-router-deprecated";
2+
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
33

44
@Component({
55
selector: "first",
66
directives: [NS_ROUTER_DIRECTIVES],
77
template: `
88
<StackLayout>
99
<Label text="First component" class="title"></Label>
10-
<Button text="GO TO SECOND" [nsRouterLink]="['Second']" class="link"></Button>
10+
<Button text="GO TO SECOND" [nsRouterLink]="['../second']" class="link"></Button>
1111
</StackLayout>`
1212
})
1313
export class FirstComponent {}

‎app/components/second.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {Component} from "@angular/core";
2-
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router-deprecated/ns-router-deprecated";
2+
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
33

44
@Component({
55
selector: "second",
66
directives: [NS_ROUTER_DIRECTIVES],
77
template: `
88
<StackLayout>
99
<Label text="Second component" class="title"></Label>
10-
<Button text="GO TO FIRST" [nsRouterLink]="['First']" class="link"></Button>
10+
<Button text="GO TO FIRST" [nsRouterLink]="['../first']" class="link"></Button>
1111
</StackLayout>`
1212
})
1313
export class SecondComponent {}

‎app/listView/listViewMainPage/list-view-main-page.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Component } from "@angular/core";
2-
import { NS_ROUTER_DIRECTIVES } from "nativescript-angular/router-deprecated";
2+
import { NS_ROUTER_DIRECTIVES } from "nativescript-angular/router";
33

44
@Component({
55
selector: "main",
66
directives: [NS_ROUTER_DIRECTIVES],
77
template: `
88
<StackLayout>
9-
<Button text="ListView" [nsRouterLink]="['ListView']"></Button>
10-
<Button text="ListViewCustomTemplate" [nsRouterLink]="['ListViewCustomTemplate']"></Button>
11-
<Button text="ListViewAsyncPipe" [nsRouterLink]="['ListViewAsyncPipe']"></Button>
9+
<Button text="ListView" [nsRouterLink]="['./commonTemplate']"></Button>
10+
<Button text="ListViewCustomTemplate" [nsRouterLink]="['./customTemplate']"></Button>
11+
<Button text="ListViewAsyncPipe" [nsRouterLink]="['./asyncPipeTemplate']"></Button>
1212
</StackLayout>
1313
`,
1414
})

‎app/main.ts

+2-21
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,6 @@
11
// this import should be first in order to load some required settings (like globals and reflect-metadata)
22
import {nativeScriptBootstrap} from "nativescript-angular/application";
3-
import {NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated";
4-
import {ActionBarTest} from "./action-bar/action-bar-test"
5-
import {AppComponent} from "./template/app.component";
6-
import {NavigationTestRouter} from "./router/router-outlet"
7-
import {NavigationTestPageRouter} from "./router/page-router-outlet"
8-
import {NavigationMainPageRouter} from "./main/main-page-router-outlet"
9-
10-
// action-bar
11-
// nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS]);
12-
// nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: true });
13-
14-
// tns-template-hello-world-ng
15-
// nativeScriptBootstrap(AppComponent);
16-
// nativeScriptBootstrap(AppComponent, null, {"cssFile": "./template/app.component.css"});
17-
18-
// router-outlet
19-
// nativeScriptBootstrap(NavigationTestRouter, [NS_ROUTER_PROVIDERS], {"cssFile": "./router/router-outlet.css"});
20-
21-
// page-router-outlet
22-
// nativeScriptBootstrap(NavigationTestPageRouter, [NS_ROUTER_PROVIDERS]);
3+
import {NavigationMainPageRouter, MainRouterProviders} from "./main/main-page-router-outlet"
234

245
// main-page-router-outlet
25-
nativeScriptBootstrap(NavigationMainPageRouter, [NS_ROUTER_PROVIDERS]);
6+
nativeScriptBootstrap(NavigationMainPageRouter, [MainRouterProviders]);

‎app/main/main-page-router-outlet.ts

+50-35
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import { Component } from "@angular/core";
2-
import { RouteConfig } from '@angular/router-deprecated';
3-
import { NS_ROUTER_DIRECTIVES } from "nativescript-angular/router-deprecated";
4-
import { ActionBarTest } from "../action-bar/action-bar-test";
2+
import { RouterConfig } from '@angular/router';
3+
import { NS_ROUTER_DIRECTIVES, nsProvideRouter } from "nativescript-angular/router";
4+
55
import { FirstComponentActionBar } from "../action-bar/action-bar-first.component";
66
import { SecondComponentActionBar } from "../action-bar/action-bar-second.component";
7+
78
import { AppComponent } from "../template/app.component";
9+
810
import { FirstComponent } from "../components/first.component";
911
import { SecondComponent } from "../components/second.component";
10-
import { NavigationTestRouter } from "../router/router-outlet";
12+
import { NavigationTestRouter, NavigationSubRoutes } from "../router/router-outlet";
13+
1114
import { BindingComponent } from "../binding/binding-page";
15+
1216
import { ListViewComponent } from "../listView/commonTemplate/list-view-page";
1317
import { ListViewControlComponent } from "../listView/customTemplate/list-view-item-template";
1418
import { ListViewAsyncPipeComponent } from "../listView/asyncPipeTemplate/async-pipe-template"
1519
import { ListViewMainPageComponent } from "../listView/listViewMainPage/list-view-main-page"
20+
1621
import { ModalTest, ModalTestWithPushStrategy } from "../modal/modal-dialog.component";
1722

1823
@Component({
@@ -21,24 +26,29 @@ import { ModalTest, ModalTestWithPushStrategy } from "../modal/modal-dialog.comp
2126
template: `
2227
<StackLayout>
2328
<Label text="Main Component" class="title"></Label>
29+
2430
<StackLayout orientation="horizontal" horizontalAlignment="center">
25-
<Button text="Template" [nsRouterLink]="['Template']"></Button>
26-
<Button text="Router" [nsRouterLink]="['Router']"></Button>
31+
<Button text="Template" [nsRouterLink]="['template']"></Button>
32+
<Button text="Router" [nsRouterLink]="['router']"></Button>
2733
</StackLayout>
34+
2835
<StackLayout orientation="horizontal" horizontalAlignment="center">
29-
<Button text="First" [nsRouterLink]="['First']"></Button>
30-
<Button text="Second" [nsRouterLink]="['Second']"></Button>
36+
<Button text="First" [nsRouterLink]="['first']"></Button>
37+
<Button text="Second" [nsRouterLink]="['second']"></Button>
3138
</StackLayout>
32-
<!--<Button text="ActionBar" [nsRouterLink]="['ActionBar']"></Button>-->
39+
3340
<StackLayout orientation="horizontal" horizontalAlignment="center">
34-
<Button text="ActionBar1" [nsRouterLink]="['FirstActionBar']"></Button>
35-
<Button text="ActionBar2" [nsRouterLink]="['SecondActionBar']"></Button>
41+
<Button text="ActionBar1" [nsRouterLink]="['first-action-bar']"></Button>
42+
<Button text="ActionBar2" [nsRouterLink]="['second-action-bar']"></Button>
3643
</StackLayout>
37-
<Button text="Binding" [nsRouterLink]="['Binding']"></Button>
38-
<Button text="ListViewExamples" [nsRouterLink]="['ListViewMainPage']"></Button>
39-
<StackLayout orientation="horizontal" horizontalAlignment="center">
40-
<Button text="modal" [nsRouterLink]="['Modal']"></Button>
41-
<Button text="modal(onPush)" [nsRouterLink]="['ModalWithPushStrategy']"></Button>
44+
45+
<Button text="Binding" [nsRouterLink]="['binding']"></Button>
46+
47+
<Button text="ListViewExamples" [nsRouterLink]="['listView']"></Button>
48+
49+
<StackLayout orientation="horizontal" horizontalAlignment="center">
50+
<Button text="modal" [nsRouterLink]="['modal']"></Button>
51+
<Button text="modal(onPush)" [nsRouterLink]="['modal-on-push']"></Button>
4252
</StackLayout>
4353
</StackLayout>
4454
`,
@@ -50,22 +60,27 @@ class MainComponent { }
5060
directives: [NS_ROUTER_DIRECTIVES],
5161
template: `<page-router-outlet></page-router-outlet>`
5262
})
53-
@RouteConfig([
54-
{ path: '/main', component: MainComponent, name: 'Main', useAsDefault: true },
55-
{ path: '/template', component: AppComponent, name: 'Template' },
56-
{ path: '/first', component: FirstComponent, name: 'First' },
57-
{ path: '/second', component: SecondComponent, name: 'Second' },
58-
{ path: '/router/...', component: NavigationTestRouter, name: 'Router' },
59-
// { path: '/action-bar-test/...', component: ActionBarTest, name: 'ActionBar' },
60-
{ path: '/first-action-bar', component: FirstComponentActionBar, name: 'FirstActionBar' },
61-
{ path: '/second-action-bar', component: SecondComponentActionBar, name: 'SecondActionBar' },
62-
{ path: '/binding', component: BindingComponent, name: 'Binding' },
63-
{ path: '/listView/commonTemplate', component: ListViewComponent, name: 'ListView' },
64-
{ path: '/listView/listViewMainPage', component: ListViewMainPageComponent, name: 'ListViewMainPage' },
65-
{ path: '/listView/customTemplate', component: ListViewControlComponent, name: 'ListViewCustomTemplate' },
66-
{ path: '/listView/asyncPipeTemplate', component: ListViewAsyncPipeComponent, name: 'ListViewAsyncPipe' },
67-
{ path: '/modal', component: ModalTest, name: 'Modal' },
68-
{ path: '/modal-on-push', component: ModalTestWithPushStrategy, name: 'ModalWithPushStrategy' },
69-
70-
])
71-
export class NavigationMainPageRouter { }
63+
export class NavigationMainPageRouter { }
64+
65+
66+
var routes: RouterConfig = [
67+
{ path: '', component: MainComponent },
68+
{ path: 'template', component: AppComponent },
69+
{ path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes },
70+
{ path: 'first', component: FirstComponent },
71+
{ path: 'second', component: SecondComponent },
72+
73+
{ path: 'first-action-bar', component: FirstComponentActionBar },
74+
{ path: 'second-action-bar', component: SecondComponentActionBar },
75+
{ path: 'binding', component: BindingComponent },
76+
77+
{ path: 'listView', component: ListViewMainPageComponent },
78+
{ path: 'listView/commonTemplate', component: ListViewComponent },
79+
{ path: 'listView/customTemplate', component: ListViewControlComponent },
80+
{ path: 'listView/asyncPipeTemplate', component: ListViewAsyncPipeComponent },
81+
82+
{ path: 'modal', component: ModalTest },
83+
{ path: 'modal-on-push', component: ModalTestWithPushStrategy },
84+
];
85+
86+
export var MainRouterProviders = nsProvideRouter(routes, { enableTracing: true });

‎app/router/page-router-outlet.ts

-18
This file was deleted.

‎app/router/router-outlet.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component} from "@angular/core";
2-
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
3-
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router-deprecated";
2+
import {RouterConfig, ROUTER_DIRECTIVES} from '@angular/router';
3+
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
44
import {FirstComponent} from "../components/first.component";
55
import {SecondComponent} from "../components/second.component";
66

@@ -12,19 +12,19 @@ import {SecondComponent} from "../components/second.component";
1212
<StackLayout>
1313
<StackLayout class="nav">
1414
<Button text="First"
15-
[nsRouterLink]="['./First']"></Button>
15+
[nsRouterLink]="['/router','first']"></Button>
1616
<Button text="Second"
17-
[nsRouterLink]="['./Second']"></Button>
17+
[nsRouterLink]="['/router','second']"></Button>
1818
</StackLayout>
1919
2020
<router-outlet></router-outlet>
2121
</StackLayout>
2222
`
2323
})
24-
@RouteConfig([
25-
{ path: '/first', component: FirstComponent, name: 'First', useAsDefault: true },
26-
{ path: '/second', component: SecondComponent, name: 'Second' },
27-
])
2824
export class NavigationTestRouter { }
2925

30-
// nativeScriptBootstrap(NavigationTestRouter, [NS_ROUTER_PROVIDERS]);
26+
export var NavigationSubRoutes: RouterConfig = [
27+
{ path: '', redirectTo: 'first' },
28+
{ path: 'first', component: FirstComponent },
29+
{ path: 'second', component: SecondComponent },
30+
];

‎package.json

+10-9
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,22 @@
66
"nativescript": {
77
"id": "org.nativescript.testsappng",
88
"tns-ios": {
9-
"version": "2.1.0"
9+
"version": "2.0.1"
1010
},
1111
"tns-android": {
1212
"version": "2.1.0"
1313
}
1414
},
1515
"dependencies": {
16-
"@angular/common": "2.0.0-rc.1",
17-
"@angular/compiler": "2.0.0-rc.1",
18-
"@angular/core": "2.0.0-rc.1",
19-
"@angular/platform-browser": "2.0.0-rc.1",
20-
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
21-
"@angular/platform-server": "2.0.0-rc.1",
22-
"@angular/router-deprecated": "2.0.0-rc.1",
23-
"nativescript-angular": "^0.1.6",
16+
"@angular/common": "2.0.0-rc.3",
17+
"@angular/compiler": "2.0.0-rc.3",
18+
"@angular/core": "2.0.0-rc.3",
19+
"@angular/platform-browser": "2.0.0-rc.3",
20+
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
21+
"@angular/platform-server": "2.0.0-rc.3",
22+
"@angular/router-deprecated": "2.0.0-rc.2",
23+
"@angular/router": "3.0.0-alpha.7",
24+
"nativescript-angular": "^0.1.8",
2425
"tns-core-modules": "^2.0.0 || 2.0.0-angular-7"
2526
},
2627
"devDependencies": {

0 commit comments

Comments
 (0)