diff --git a/.gitignore b/.gitignore
index 206ecf8..89ddaf0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,7 +26,6 @@ build/Release
# Commenting this out is preferred by some people, see
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
node_modules
-platforms
# Users Environment Variables
.lock-wscript
@@ -36,3 +35,8 @@ platforms
# Optional REPL history
.node_repl_history
+
+# mobile
+/mobile/hooks/
+/mobile/platforms
+/mobile/node_modules
diff --git a/mobile/app/app.component.ts b/mobile/app/app.component.ts
deleted file mode 100644
index 51d1599..0000000
--- a/mobile/app/app.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {Component} from "@angular/core";
-
-@Component({
- selector: "my-app",
- template: `
-
-
-
-
-
-
-
-`,
-})
-export class AppComponent {
- public counter: number = 16;
-
- public get message(): string {
- if (this.counter > 0) {
- return this.counter + " taps left";
- } else {
- return "Hoorraaay! \nYou are ready to start building!";
- }
- }
-
- public onTap() {
- this.counter--;
- }
-}
diff --git a/mobile/app/app.css b/mobile/app/app.css
deleted file mode 100644
index 06d6dc1..0000000
--- a/mobile/app/app.css
+++ /dev/null
@@ -1,19 +0,0 @@
-button, label, stack-layout {
- horizontal-align: center;
-}
-
-button {
- font-size: 36;
-}
-
-.title {
- font-size: 30;
- margin: 20;
-}
-
-.message {
- font-size: 20;
- color: #284848;
- text-align: center;
- margin: 0 20;
-}
diff --git a/mobile/app/bootstrap.tns.ts b/mobile/app/bootstrap.tns.ts
new file mode 100644
index 0000000..0f3e4ad
--- /dev/null
+++ b/mobile/app/bootstrap.tns.ts
@@ -0,0 +1,6 @@
+// this import should be first in order to load some required settings (like globals and reflect-metadata)
+import { nativeScriptBootstrap } from "nativescript-angular/application";
+import { NS_ROUTER_PROVIDERS } from "nativescript-angular/router";
+import { NSAppComponent } from "./page/components/microsb";
+
+nativeScriptBootstrap(NSAppComponent, [NS_ROUTER_PROVIDERS]);
diff --git a/mobile/app/main.ts b/mobile/app/main.ts
deleted file mode 100644
index 9fa201b..0000000
--- a/mobile/app/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// this import should be first in order to load some required settings (like globals and reflect-metadata)
-import {nativeScriptBootstrap} from "nativescript-angular/application";
-import {AppComponent} from "./app.component";
-
-nativeScriptBootstrap(AppComponent);
\ No newline at end of file
diff --git a/mobile/app/package.json b/mobile/app/package.json
index d7c5704..e83eb83 100644
--- a/mobile/app/package.json
+++ b/mobile/app/package.json
@@ -3,7 +3,7 @@
"id": "org.nativescript.helloworldng"
},
"name": "tns-template-hello-world-ng",
- "main": "main.js",
+ "main": "bootstrap.tns.js",
"version": "2.0.3",
"author": "Telerik ",
"description": "Nativescript Angular Hello World template",
diff --git a/mobile/app/page/components/microsb/index.ts b/mobile/app/page/components/microsb/index.ts
new file mode 100644
index 0000000..e825e07
--- /dev/null
+++ b/mobile/app/page/components/microsb/index.ts
@@ -0,0 +1,10 @@
+
+import { NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
+
+// config
+import {ConfigService} from '../../../javascripts/core/index';
+ConfigService.PLATFORM_TARGET = ConfigService.PLATFORMS.MOBILE_NATIVE;
+ConfigService.DEBUG.LEVEL_4 = true;
+ConfigService.ROUTER_DIRECTIVES = NS_ROUTER_DIRECTIVES;
+
+export * from '../../../javascripts/components/microsb/microsb.tns';
diff --git a/mobile/package.json b/mobile/package.json
index 3f799fa..3601d3b 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -8,11 +8,11 @@
},
"nativescript": {
"id": "org.nativescript.mobile",
- "tns-ios": {
- "version": "2.0.1"
- },
"tns-android": {
"version": "2.0.0"
+ },
+ "tns-ios": {
+ "version": "2.0.1"
}
},
"dependencies": {
diff --git a/node/client/javascripts/components/about/about.tns.css b/node/client/javascripts/components/about/about.tns.css
new file mode 100644
index 0000000..e69de29
diff --git a/node/client/javascripts/components/about/about.tns.html b/node/client/javascripts/components/about/about.tns.html
new file mode 100644
index 0000000..f478880
--- /dev/null
+++ b/node/client/javascripts/components/about/about.tns.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/node/client/javascripts/components/about/about.tns.ts b/node/client/javascripts/components/about/about.tns.ts
new file mode 100644
index 0000000..79267c4
--- /dev/null
+++ b/node/client/javascripts/components/about/about.tns.ts
@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router/ns-router";
+
+@Component({
+ selector: "about",
+ directives: [NS_ROUTER_DIRECTIVES],
+ templateUrl: 'javascripts/components/about/about.tns.html',
+ styleUrls: ['javascripts/components/about/about.tns.css']
+})
+export class About {
+
+}
diff --git a/node/client/javascripts/components/home/home.tns.css b/node/client/javascripts/components/home/home.tns.css
new file mode 100644
index 0000000..e69de29
diff --git a/node/client/javascripts/components/home/home.tns.html b/node/client/javascripts/components/home/home.tns.html
new file mode 100644
index 0000000..665120e
--- /dev/null
+++ b/node/client/javascripts/components/home/home.tns.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/node/client/javascripts/components/home/home.tns.ts b/node/client/javascripts/components/home/home.tns.ts
new file mode 100644
index 0000000..91b608c
--- /dev/null
+++ b/node/client/javascripts/components/home/home.tns.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router/ns-router";
+
+@Component({
+ selector: "home",
+ directives: [NS_ROUTER_DIRECTIVES],
+ templateUrl: 'javascripts/components/home/home.tns.html',
+ styleUrls: ['javascripts/components/home/home.tns.css']
+})
+export class Home {
+}
diff --git a/node/client/javascripts/components/microsb/microsb.tns.css b/node/client/javascripts/components/microsb/microsb.tns.css
new file mode 100644
index 0000000..442759a
--- /dev/null
+++ b/node/client/javascripts/components/microsb/microsb.tns.css
@@ -0,0 +1,19 @@
+button, label, stack-layout {
+ horizontal-align: center;
+}
+
+button {
+ font-size: 36;
+}
+
+.title {
+ font-size: 30;
+ margin: 20;
+}
+
+.message {
+ font-size: 20;
+ color: #284848;
+ text-align: center;
+ margin: 0 20;
+}
diff --git a/node/client/javascripts/components/microsb/microsb.tns.html b/node/client/javascripts/components/microsb/microsb.tns.html
new file mode 100644
index 0000000..f35b3da
--- /dev/null
+++ b/node/client/javascripts/components/microsb/microsb.tns.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/node/client/javascripts/components/microsb/microsb.tns.ts b/node/client/javascripts/components/microsb/microsb.tns.ts
new file mode 100644
index 0000000..e1700d0
--- /dev/null
+++ b/node/client/javascripts/components/microsb/microsb.tns.ts
@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
+import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
+
+import { Home } from "../home/home.tns";
+import { About } from "../about/about.tns";
+
+@Component({
+ selector: "microsb",
+ directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
+ templateUrl: 'javascripts/components/microsb/microsb.tns.html',
+ styleUrls: ['javascripts/components/microsb/microsb.tns.css']
+})
+@RouteConfig([
+ { path: '/home', name: 'Home', component: Home, useAsDefault: true },
+ { path: '/about', name: 'About', component: About },
+])
+export class NSAppComponent {
+ public counter: number = 16;
+
+ public get message(): string {
+ if (this.counter > 0) {
+ return this.counter + " taps left";
+ } else {
+ return "Hoorraaay! \nYou are ready to start building!";
+ }
+ }
+
+ public onTap() {
+ this.counter--;
+ }
+}
diff --git a/node/client/javascripts/core/decorators/base.component.ts b/node/client/javascripts/core/decorators/base.component.ts
new file mode 100644
index 0000000..8cd6272
--- /dev/null
+++ b/node/client/javascripts/core/decorators/base.component.ts
@@ -0,0 +1,7 @@
+import { DecoratorUtils } from "./utils";
+
+export function BaseComponent(metadata: any = {}) {
+ return function (cls: any) {
+ return DecoratorUtils.annotateComponent(cls, metadata);
+ };
+}
diff --git a/node/client/javascripts/core/decorators/index.ts b/node/client/javascripts/core/decorators/index.ts
new file mode 100644
index 0000000..8ae5599
--- /dev/null
+++ b/node/client/javascripts/core/decorators/index.ts
@@ -0,0 +1,2 @@
+export * from './base.component';
+export * from './route.component';
diff --git a/node/client/javascripts/core/decorators/route.component.ts b/node/client/javascripts/core/decorators/route.component.ts
new file mode 100644
index 0000000..e15ad30
--- /dev/null
+++ b/node/client/javascripts/core/decorators/route.component.ts
@@ -0,0 +1,10 @@
+import { ConfigService } from "../services/config.service";
+import { DecoratorUtils } from "./utils";
+
+export function RouteComponent(metadata: any = {}) {
+ return function (cls: any) {
+ return DecoratorUtils.annotateComponent(cls, metadata, {
+ directives: ConfigService.ROUTER_DIRECTIVES
+ });
+ };
+}
diff --git a/node/client/javascripts/core/decorators/utils.ts b/node/client/javascripts/core/decorators/utils.ts
new file mode 100644
index 0000000..8d685fc
--- /dev/null
+++ b/node/client/javascripts/core/decorators/utils.ts
@@ -0,0 +1,69 @@
+// angular
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+import { ViewBrokerService } from "../index";
+
+// libs
+// import {TranslatePipe} from 'ng2-translate/ng2-translate';
+
+// app
+
+declare var Reflect: any;
+const _reflect: any = Reflect;
+
+export class DecoratorUtils {
+ public static getMetadata(metadata: any = {}, customDecoratorMetadata?: any) {
+
+ /**
+ * The following allows default component metadata to be configured
+ * For instance, here we make `TranslatePipe` available for all our components
+ */
+ // default directives
+ let DIRECTIVES: any[] = [];
+ // default pipes
+ // let PIPES: any[] = [TranslatePipe];
+ let PIPES: any[] = [];
+
+ // custom decorator options
+ if (customDecoratorMetadata) {
+ if (customDecoratorMetadata.directives) {
+ DIRECTIVES.push(...customDecoratorMetadata.directives);
+ }
+ if (customDecoratorMetadata.pipes) {
+ PIPES.push(...customDecoratorMetadata.pipes);
+ }
+ }
+
+ if (metadata.templateUrl) {
+ // correct view for platform target
+ metadata.templateUrl = ViewBrokerService.TEMPLATE_URL(metadata.templateUrl);
+ }
+
+ metadata.directives = metadata.directives ? metadata.directives.concat(DIRECTIVES) : DIRECTIVES;
+ metadata.pipes = metadata.pipes ? metadata.pipes.concat(PIPES) : PIPES;
+
+ if (metadata.changeDetection) {
+ metadata.changeDetection = metadata.changeDetection;
+ } else {
+ // default OnPush
+ metadata.changeDetection = ChangeDetectionStrategy.OnPush;
+ }
+
+ if (metadata.encapsulation) {
+ metadata.encapsulation = metadata.encapsulation;
+ }
+
+ // initialize anything
+ if (metadata.init) {
+ metadata.init();
+ }
+
+ return metadata;
+ }
+
+ public static annotateComponent(cls: any, metadata: any = {}, customDecoratorMetadata?: any) {
+ let annotations = _reflect.getMetadata('annotations', cls) || [];
+ annotations.push(new Component(DecoratorUtils.getMetadata(metadata, customDecoratorMetadata)));
+ _reflect.defineMetadata('annotations', annotations, cls);
+ return cls;
+ }
+}
diff --git a/node/client/javascripts/core/index.ts b/node/client/javascripts/core/index.ts
new file mode 100644
index 0000000..69d1dd3
--- /dev/null
+++ b/node/client/javascripts/core/index.ts
@@ -0,0 +1,2 @@
+export * from './decorators';
+export * from './services';
diff --git a/node/client/javascripts/core/services/config.service.ts b/node/client/javascripts/core/services/config.service.ts
new file mode 100644
index 0000000..9ff7406
--- /dev/null
+++ b/node/client/javascripts/core/services/config.service.ts
@@ -0,0 +1,60 @@
+// angular
+import { ROUTER_DIRECTIVES } from "@angular/router-deprecated";
+
+interface IPlatforms {
+ WEB: string;
+ MOBILE_NATIVE: string;
+ MOBILE_HYBRID: string;
+ DESKTOP: string;
+}
+
+export class ConfigService {
+
+ public static DEBUG: any = {
+ LEVEL_1: false, // .info only
+ LEVEL_2: false, // .warn only
+ LEVEL_3: false, // .error only
+ LEVEL_4: false // .log + all the above
+ };
+
+ // allows runtime config of platform specific router directives
+ public static ROUTER_DIRECTIVES: Array = ROUTER_DIRECTIVES;
+
+ // supported platforms
+ public static PLATFORMS: IPlatforms = {
+ WEB: 'web',
+ MOBILE_NATIVE: 'mobile_native',
+ MOBILE_HYBRID: 'mobile_hybrid',
+ DESKTOP: 'desktop'
+ };
+
+ // current target (defaults to web)
+ public static PLATFORM_TARGET: string = ConfigService.PLATFORMS.WEB;
+
+ // convenient platform checks
+ public static IS_WEB(): boolean {
+ return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.WEB;
+ }
+
+ public static IS_MOBILE_NATIVE(): boolean {
+ return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.MOBILE_NATIVE;
+ }
+
+ public static IS_MOBILE_HYBRID(): boolean {
+ return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.MOBILE_HYBRID;
+ }
+
+ public static IS_DESKTOP(): boolean {
+ return ConfigService.PLATFORM_TARGET === ConfigService.PLATFORMS.DESKTOP;
+ }
+
+ // NOTE: if any level is on, debug mode is on
+ public static IS_DEBUG_MODE(): boolean {
+ return Object.keys(ConfigService.DEBUG).some(key => ConfigService.DEBUG[key]);
+ }
+
+ // reset debug defaults
+ public static RESET() {
+ Object.keys(ConfigService.DEBUG).forEach(key => ConfigService.DEBUG[key] = false);
+ }
+}
diff --git a/node/client/javascripts/core/services/index.ts b/node/client/javascripts/core/services/index.ts
new file mode 100644
index 0000000..de42297
--- /dev/null
+++ b/node/client/javascripts/core/services/index.ts
@@ -0,0 +1,2 @@
+export * from './config.service';
+export * from './viewbrocker.service';
diff --git a/node/client/javascripts/core/services/viewbrocker.service.ts b/node/client/javascripts/core/services/viewbrocker.service.ts
new file mode 100644
index 0000000..c12c942
--- /dev/null
+++ b/node/client/javascripts/core/services/viewbrocker.service.ts
@@ -0,0 +1,14 @@
+import { ConfigService } from "./config.service";
+
+export class ViewBrokerService {
+
+ public static TEMPLATE_URL(path: string): string {
+ if (ConfigService.IS_MOBILE_NATIVE()) {
+ let paths = path.split('.');
+ paths.splice(-1);
+ return `${paths.join('.')}.tns.html`;
+ } else {
+ return path;
+ }
+ }
+}