nested routers example

Author: NickIliev

app/app.routes.ts

@@ -229,5 +229,10 @@ export const routes = [
         path: "platform",
         loadChildren: "./platform/platform-examples.module#PlatformExamplesModule",
         data: { title: "Platform Module" }
+    },
+    {
+        path: "routing",
+        loadChildren: "./routing/routing-examples.module#RoutingExamplesModule",
+        data: { title: "Angular routing" }
     }
 ];

app/examples-list.component.ts

@@ -45,7 +45,8 @@ let mainMenuLinks = [
     new Link("DataEntry (extended examples)", "/dataentry"),
     new Link("User Profile (extended examples)", "/userprofile"),
     new Link("Content Screens", "/content-screens"),
-    new Link("Camera", "/camera")
+    new Link("Camera", "/camera"),
+    new Link("Angular routing", "/routing")
 ];
 
 @Component({

app/routing/nested-routers/article.md

@@ -0,0 +1,23 @@
+Common scenario is to use nested router outlets. In NativeScript + Angular-2 you can
+nest `router-outlet` within other `router-outlet` or within `page-router-outlet`.
+
+Module
+```
+    export const routerConfig = [
+        {
+            path: "",
+            component: RoutingExamplesComponent
+        },
+        {
+            path: "nested-routers",
+            component: NestedRoutersComponent,
+            children: [
+                { path: "first", component: SubRouteOneComponent },
+                { path: "second", component: SubRouteTwoComponent }
+            ]
+        }
+    ];
+```
+
+HTML
+<snippet id='nested-router-html'/>

app/routing/nested-routers/nested-routers.component.html

@@ -0,0 +1,9 @@
+<!-- >> nested-router-html -->
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+    <GridLayout rows="80" columns="*, *">
+        <Button text="First" [nsRouterLink]="['first']" class="btn btn-primary btn-active" col="0"></Button>
+        <Button text="Second" [nsRouterLink]="['second']" class="btn btn-primary btn-active" col="1"></Button>
+    </GridLayout>
+    <router-outlet></router-outlet>
+</StackLayout>
+<!-- << nested-router-html -->

app/routing/nested-routers/nested-routers.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./nested-routers.component.html"
+})
+export class NestedRoutersComponent {
+    constructor() { }
+}

app/routing/nested-routers/sub-route-one.component.html

@@ -0,0 +1,4 @@
+<GridLayout rows="auto, *">
+    <Label row="0" text="Loaded inside the nested router" textWrap="true" class="m-16 text-center"></Label>
+    <Button row="1" text="This is FIRST. Load SECOND" [nsRouterLink]="['/routing/nested-routers/second']" class="btn btn-primary btn-active"></Button>
+</GridLayout>

app/routing/nested-routers/sub-route-one.component.ts

@@ -0,0 +1,11 @@
+// >> 
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./sub-route-one.component.html"
+})
+export class SubRouteOneComponent {
+    constructor() { }
+}
+// << 

app/routing/nested-routers/sub-route-two.component.html

@@ -0,0 +1,4 @@
+<GridLayout rows="auto, *">
+    <Label row="0" text="Loaded inside the nested router" textWrap="true" class="m-16 text-center"></Label>
+    <Button row="1" text="This is SECOND. Load FIRST" [nsRouterLink]="['/routing/nested-routers/first']" class="btn btn-primary btn-active"></Button>
+</GridLayout>

app/routing/nested-routers/sub-route-two.component.ts

@@ -0,0 +1,11 @@
+// >> 
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./sub-route-two.component.html"
+})
+export class SubRouteTwoComponent {
+    constructor() { }
+}
+// << 

app/routing/overview.md

@@ -0,0 +1 @@
+Angular 2 routing techniques