Merge pull request #3 from SergioZhydecky/develop

2.0 release

app/app-routing.module.ts

@@ -1,31 +1,33 @@
 import { NgModule } from "@angular/core";
 import { Routes } from "@angular/router";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-
-import { FeaturedComponent } from "./featured.component";
-import { ItemComponent } from "./item.component";
-import { BrowseComponent } from "./browse.component";
-import { CategoryComponent } from "./category.component";
-import { SearchComponent } from "./search.component";
+import { BrowseComponent } from '~/browse.component';
+import { CategoryComponent } from '~/category.component';
+import { SearchComponent } from '~/search.component';
+import { MainComponent } from '~/main.component';
+import { AppComponent } from '~/app.component';
 
 const routes: Routes = [
-    { path: "", redirectTo: "/(featured:featured//browse:browse//search:search)", pathMatch: "full" },
-
-    { path: "featured", component: FeaturedComponent, outlet: "featured" },
-    { path: "featured/fitem", component: ItemComponent, outlet: "featured" },
+  // { path: "", redirectTo: "/(featured:featured//browse:browse//search:search)", pathMatch: "full" },
+  //
+  // { path: "featured", loadChildren: './featured.module#FeaturedModule', outlet: "featured" },
+  // { path: "featured/item", loadChildren: './item.module#ItemModule', outlet: "featured" },
+  //
+  // { path: "browse", component: BrowseComponent, outlet: "browse" },
+  // { path: "browse/category", component: CategoryComponent, outlet: "browse" },
+  // { path: "browse/category/item",  loadChildren: './item.module#ItemModule', outlet: "browse" },
+  //
+  // { path: "search", component: SearchComponent, outlet: "search" },
+  {path: '', loadChildren: './item.module#ItemModule'},
+  {path: 'main', loadChildren: './main.module#MainModule'}
 
-    { path: "browse", component: BrowseComponent, outlet: "browse" },
-    { path: "browse/category", component: CategoryComponent, outlet: "browse" },
-    { path: "browse/category/item", component: ItemComponent, outlet: "browse" },
-
-    { path: "search", component: SearchComponent, outlet: "search" },
 ];
 
 @NgModule({
-    imports: [NativeScriptRouterModule.forRoot(routes, {
-      // enableTracing:true,
-
-    })],
-    exports: [NativeScriptRouterModule]
+  imports: [NativeScriptRouterModule.forRoot(routes, {
+    // enableTracing:true
+  })],
+  exports: [NativeScriptRouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

app/app.component.html

@@ -1,21 +1,39 @@
+<!--<StackLayout>-->
+<!--<GridLayout class="grid-tab-view" columns="*,*,*" ios:rows="*, 50, 0"-->
+<!--android:rows="*, 200, 50">-->
+<!--<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 0 ? 0 : 3}}" col="0" colspan="3">-->
+<!--<page-router-outlet name="featured"></page-router-outlet>-->
+<!--</GridLayout>-->
+<!--<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 1 ? 0 : 3}}" col="0" colspan="3">-->
+<!--<page-router-outlet name="browse"></page-router-outlet>-->
+<!--</GridLayout>-->
+<!--<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 2 ? 0 : 3}}" col="0" colspan="3">-->
+<!--<page-router-outlet name="search"></page-router-outlet>-->
+<!--</GridLayout>-->
+
+<!--<label row="1" col="0" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)"-->
+<!--[ngClass]="{'selected': tabSelectedIndex === 0}"></label>-->
+<!--<label row="1" col="1" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)"-->
+<!--[ngClass]="{'selected': tabSelectedIndex === 1}"></label>-->
+<!--<label row="1" col="2" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)"-->
+<!--[ngClass]="{'selected': tabSelectedIndex === 2}"></label>-->
+<!--</GridLayout>-->
+<!--</StackLayout>-->
+
+
+<!--<page-router-outlet></page-router-outlet>-->
 <StackLayout>
-	<GridLayout class="grid-tab-view" columns="*,*,*" ios:rows="*, 50, 0"
+	<GridLayout class="grid-tab-view" columns="*,*,*" ios:rows="50, *, 0"
 	            android:rows="*, 200, 50">
-		<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 0 ? 0 : 3}}" col="0" colspan="3">
-			<page-router-outlet name="featured"></page-router-outlet>
-		</GridLayout>
-		<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 1 ? 0 : 3}}" col="0" colspan="3">
-			<page-router-outlet name="browse"></page-router-outlet>
-		</GridLayout>
-		<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 2 ? 0 : 3}}" col="0" colspan="3">
-			<page-router-outlet name="search"></page-router-outlet>
-		</GridLayout>
 
-		<label row="1" col="0" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)"
-		       [ngClass]="{'selected': tabSelectedIndex === 0}"></label>
-		<label row="1" col="1" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)"
-		       [ngClass]="{'selected': tabSelectedIndex === 1}"></label>
-		<label row="1" col="2" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)"
-		       [ngClass]="{'selected': tabSelectedIndex===2}"></label>
+
+		<label row="0" col="0" class="tab-button" text="Open tabs page" [nsRouterLink]="['main/fakeid']"></label>
+		<!--<label row="0" col="0" class="tab-button" text="Tab1" (tap)="test()"></label>-->
+		<!--<label row="0" col="0" class="tab-button" text="Tab1" [nsRouterLink]="['main', { outlets: { primary: ['featured'], browse: ['browse'], search: ['search'] }}]"></label>-->
+		<!--<label row="0" col="0" class="tab-button" text="Tab1" [nsRouterLink]="[{ outlets: { primary: ['main'], featured: ['featured'] } }]"></label>-->
+
+		<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 0 ? 1 : 3}}" col="0" colspan="3">
+			<page-router-outlet></page-router-outlet>
+		</GridLayout>
 	</GridLayout>
 </StackLayout>

app/app.component.ts

@@ -15,8 +15,8 @@ export class AppComponent implements OnInit {
               private activatedRoute: ActivatedRoute) {
     this.router.router.events.pipe(
       filter(e => e instanceof NavigationEnd),
-      tap(() => {
-        console.log(this.activatedRoute.root.children);
+      tap((e:any) => {
+        console.log(e.urlAfterRedirects);
       })
     ).subscribe(d => {
       console.log('nav end')
@@ -42,8 +42,13 @@ export class AppComponent implements OnInit {
     });
   }
 
-  switchTabByIndex(index: number) {
-    this.tabSelectedIndex = index;
+  test() {
+    this.router.navigate(['main', {outlets: { featured:'featured/item', browse: 'browse', search: 'search'}}],
+      {relativeTo: this.activatedRoute});
   }
 
+  // switchTabByIndex(index: number) {
+  //   this.tabSelectedIndex = index;
+  // }
+
 }

app/app.css

@@ -27,6 +27,7 @@ refer to http://docs.nativescript.org/ui/theme.
 }
 .tab-button{
     z-index: 10;
+    background-color: yellow;
 }
 .selected {
     background-color: red;

app/app.module.ts

@@ -9,6 +9,7 @@ import { BrowseComponent } from "./browse.component";
 import { CategoryComponent } from "./category.component";
 import { SearchComponent } from "./search.component";
 import { BackComponent } from '~/back.component';
+import { MainComponent } from '~/main.component';
 
 @NgModule({
   bootstrap: [
@@ -20,12 +21,6 @@ import { BackComponent } from '~/back.component';
   ],
   declarations: [
     AppComponent,
-    FeaturedComponent,
-    ItemComponent,
-    BrowseComponent,
-    CategoryComponent,
-    SearchComponent,
-    BackComponent
   ],
   schemas: [
     NO_ERRORS_SCHEMA

app/featured-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
+import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { FeaturedComponent } from '~/featured.component';
+
+const routes: Routes = [
+  { path: '', component: FeaturedComponent }
+];
+
+@NgModule({
+  imports: [NativeScriptRouterModule.forChild(routes)],
+  exports: [NativeScriptRouterModule]
+})
+export class FeaturedRoutingModule {}

app/featured.component.html

@@ -2,6 +2,6 @@
 
 <ScrollView class="page">
     <StackLayout class="home-panel">
-        <Button class="btn btn-primary" text="Item" [nsRouterLink]="['fitem']"></Button>
+        <Button class="btn btn-primary" text="Item" [nsRouterLink]="['item']"></Button>
     </StackLayout>
 </ScrollView>

app/featured.module.ts

@@ -0,0 +1,19 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { FeaturedComponent } from '~/featured.component';
+import { FeaturedRoutingModule } from '~/featured-routing.module';
+
+@NgModule({
+  imports: [
+    FeaturedRoutingModule
+  ],
+  declarations: [
+    FeaturedComponent
+  ],
+  schemas: [
+    NO_ERRORS_SCHEMA
+  ]
+})
+
+export class FeaturedModule {
+
+}

app/item-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
+import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { ItemComponent } from '~/item.component';
+
+const routes: Routes = [
+  { path: '', component: ItemComponent }
+];
+
+@NgModule({
+  imports: [NativeScriptRouterModule.forChild(routes)],
+  exports: [NativeScriptRouterModule]
+})
+export class ItemRoutingModule {}

app/item.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { ItemComponent } from '~/item.component';
+import { ItemRoutingModule } from '~/item-routing.module';
+
+@NgModule({
+  imports: [
+    ItemRoutingModule
+  ],
+  declarations: [
+    ItemComponent,
+  ],
+  schemas: [
+  ]
+})
+export class ItemModule {
+}

app/main-routing.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
+import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { MainComponent } from '~/main.component';
+import { BrowseComponent } from '~/browse.component';
+import { CategoryComponent } from '~/category.component';
+import { SearchComponent } from '~/search.component';
+
+const routes: Routes = [
+  {
+    path: ':fakeId', // this dynamic param needed to get routing to work in angular
+    component: MainComponent,
+    children: [
+      {path: "", redirectTo: "/main/10/(featured:featured//browse:browse//search:search)", pathMatch: "full"},
+
+      {path: "featured", loadChildren: './featured.module#FeaturedModule', outlet: 'featured'},
+      {path: "featured/item", loadChildren: './item.module#ItemModule', outlet: 'featured'},
+
+      {path: "browse", component: BrowseComponent, outlet: "browse"},
+      {path: "browse/category", component: CategoryComponent, outlet: "browse"},
+      {path: "browse/category/item", loadChildren: './item.module#ItemModule', outlet: "browse"},
+
+      {path: "search", component: SearchComponent, outlet: "search"},
+
+    ]
+  }
+];
+
+@NgModule({
+  imports: [NativeScriptRouterModule.forChild(routes)],
+  exports: [NativeScriptRouterModule]
+})
+export class MainRoutingModule {
+}

app/main.aot.ts

@@ -1,6 +1,6 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScript } from "nativescript-angular/platform-static";
 
-import { AppModuleNgFactory } from "./app.module.ngfactory";
+import { AppModuleNgFactory } from './app.module.ngfactory';
 
 platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

app/main.component.html

@@ -0,0 +1,24 @@
+<StackLayout>
+	<GridLayout class="grid-tab-view" columns="*,*,*" ios:rows="*, 50, 0"
+	            android:rows="*, 200, 50">
+		<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 0 ? 0 : 3}}" col="0" colspan="3">
+			<page-router-outlet name="featured"></page-router-outlet>
+			<ng-component></ng-component>
+		</GridLayout>
+		<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 1 ? 0 : 3}}" col="0" colspan="3">
+			<page-router-outlet name="browse"></page-router-outlet>
+			<ng-component></ng-component>
+		</GridLayout>
+		<GridLayout class="my-tab-outlet" row="{{tabSelectedIndex === 2 ? 0 : 3}}" col="0" colspan="3">
+			<page-router-outlet name="search"></page-router-outlet>
+			<ng-component></ng-component>
+		</GridLayout>
+
+		<label row="1" col="0" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)"
+		       [ngClass]="{'selected': tabSelectedIndex === 0}"></label>
+		<label row="1" col="1" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)"
+		       [ngClass]="{'selected': tabSelectedIndex === 1}"></label>
+		<label row="1" col="2" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)"
+		       [ngClass]="{'selected': tabSelectedIndex === 2}"></label>
+	</GridLayout>
+</StackLayout>

app/main.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "Main",
+  moduleId: module.id,
+  templateUrl: "./main.component.html",
+  styleUrls: ['./main.component.css']
+})
+export class MainComponent implements OnInit {
+  public tabSelectedIndex = 0;
+
+  constructor() {
+  //
+  }
+
+  public ngOnInit() {
+
+  }
+
+  switchTabByIndex(index: number) {
+    this.tabSelectedIndex = index;
+  }
+
+}

app/main.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MainRoutingModule } from '~/main-routing.module';
+import { MainComponent } from '~/main.component';
+import { BrowseComponent } from '~/browse.component';
+import { CategoryComponent } from '~/category.component';
+import { SearchComponent } from '~/search.component';
+import { BackComponent } from '~/back.component';
+import { NativeScriptCommonModule } from 'nativescript-angular/common';
+
+@NgModule({
+  imports: [
+    MainRoutingModule,
+    NativeScriptCommonModule
+  ],
+  declarations: [
+    MainComponent,
+    BrowseComponent,
+    CategoryComponent,
+    SearchComponent,
+    BackComponent
+  ],
+  schemas: [
+  ]
+})
+export class MainModule {
+}