Merge pull request #6 from TeamMaestro/angular-native-seed

Completes Seed Example (i18n, lazy-load, shared components, {N} styling, tests, etc.)

Author: Sean Perkins

.angular-cli.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "maestro-project"
+    "name": "angular-seed-project"
   },
   "apps": [
     {
@@ -17,7 +17,7 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "maestro",
+      "prefix": "seed",
       "styles": [
         "styles.scss"
       ],

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

.proxy.conf.json

@@ -1,12 +1,12 @@
 {
     "/api": {
-        "target": "https://dev-loop.mobileagility.com",
-        "cookieDomainRewrite": "dev-loop.mobileagility.com",
+        "target": "https://www.example.com",
+        "cookieDomainRewrite": "example.com",
         "secure": true,
         "changeOrigin": true,
         "logLevel": "debug",
         "headers": {
-            "host": "dev-loop.mobileagility.com"
+            "host": "example.com"
         }
     }
-}
+}

README.md

@@ -1,28 +1,19 @@
-# Maestro Seed
+# Angular NativeScript Seed
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+Build truly web and native applications using NativeScript and Angular. This seed allows your project to share code between the environments; having complete control over dependencies.
 
-## Development server
+## Highlights
+- i18n Translations
+- Lazy Loaded Modules
+- Angular CLI // Webpack // Testing
+- Target Phone and Tablet Templates Individually
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+| | |
+|:---: |:---:|
+|![Web Preview](https://i.gyazo.com/1ba4d3be7b7332ce91bd6715dc752d8b.gif)|![Native Preview](https://i.gyazo.com/0a88b56cff9af632f618e5b123502f5f.gif)|
 
-## Code scaffolding
+# Contributors 
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+[<img alt="Don Burgess" src="https://avatars1.githubusercontent.com/u/7612751?v=3&s=117" width="117">](https://github.com/db3dev) | [<img alt="Sean perkins" src="https://avatars1.githubusercontent.com/u/13732623?v=3&s=117" width="117">](https://github.com/sean-perkins) |
+:---: |:---: |
+[Don Burgess](https://github.com/db3dev) |[Sean Perkins](https://github.com/sean-perkins)|

docker-compose.yml

@@ -1,7 +1,7 @@
 version: "2"
 services:
-  maestro-angular-seed:
+  angular-native-seed:
     build: .
-    image: maestroseed
+    image: angularnativeseed
     ports:
-      - "8080:80"
+      - "8080:80"

nativescript/gulpfile.js

@@ -16,74 +16,87 @@ function removePhone (path) {
 
 gulp.task('resources.App_Resources', () => {
     return gulp.src(['App_Resources/**/*'], {follow: true})
-        .pipe(gulp.dest(`${DEST}/App_Resources`));
+        .pipe(gulp.dest(`${DEST}App_Resources`));
 });
 
 gulp.task('resources.Assets', () => {
-    return gulp.src(['src/**/*', '!src/app/', '!src/test/', '!**/*.spec.*', '!**/*.js', '!**/*.ts', '!**/*.scss', '!**/*.html'], {follow: true})
+    return gulp.src([`${SRC}**/*`, `!${SRC}app/`, `!${SRC}test/`, '!**/*.spec.*', '!**/*.js', '!**/*.ts', '!**/*.scss', '!**/*.html'], {follow: true})
         .pipe(gulp.dest(DEST));
 });
 
 gulp.task('project.Typescript', () => {
-    return gulp.src(['src/**/*.ts', '!**/*.tns.*'], {follow: true})
-        .pipe(debug({title: 'project.Typescript'}))
+    return gulp.src([`${SRC}**/*.ts`, '!**/*.tns.*', '!**/*.spec.*'], {follow: true})
+        // .pipe(debug({title: 'project.Typescript'}))
         .pipe(gulp.dest(DEST));
 });
 
 gulp.task('project.Styles', () => {
-    return gulp.src(['src/**/*.scss', '!**/*.tns.*'], {follow: true})
+    return gulp.src([`${SRC}**/*.scss`, '!**/*.tns.*'], {follow: true})
         .pipe(gulp.dest(DEST));
 });
 
 gulp.task('tns.Typescript', () => {
-    return gulp.src(['src/**/*.tns.ts'], {follow: true})
+    return gulp.src([`${SRC}**/*.tns.ts`], {follow: true})
         .pipe(rename(removeTns))
         // .pipe(debug({title: 'tns.Typescript'}))
         .pipe(gulp.dest(DEST, {overwrite: true}));
 });
 
 gulp.task('tns.ComponentStyles', () => {
-    return gulp.src(['src/**/*.component.ts'], {follow: true})
-        .pipe(replace('.scss\'', '.css\''))
+    return gulp.src([`${SRC}**/*.component.ts`], {follow: true})
+        .pipe(replace('.scss\'', '.css\'', { logs: { enabled: false }}))
         // .pipe(debug({title: 'tns.ComponentStyles'}))
         .pipe(gulp.dest(DEST, {overwrite: true}));
 });
 
 gulp.task('tns.Templates', () => {
-    return gulp.src(['src/**/*.tns.html', 'src/**/*.tns.ios.html', 'src/**/*.tns.android.html'], {follow: true})
+    return gulp.src([`${SRC}**/*.tns.html`, `${SRC}**/*.tns.ios.html`, `${SRC}**/*.tns.android.html`], {follow: true})
         .pipe(rename(removeTns))
-        .pipe(debug({title: 'tns.Templates'}))
+        // .pipe(debug({title: 'tns.Templates'}))
         .pipe(gulp.dest(DEST, {overwrite: true}));
 });
 
 gulp.task('tns.Styles', () => {
-    return gulp.src(['src/**/*.tns.scss', 'src/**/*.tns.ios.scss', 'src/**/*.tns.android.scss'], {follow: true})
+    return gulp.src([`${SRC}**/*.tns.scss`, `${SRC}**/*.tns.ios.scss`, `${SRC}**/*.tns.android.scss`], {follow: true})
         .pipe(rename(removeTns))
         // .pipe(debug({title: 'tns.Styles'}))
         .pipe(gulp.dest(DEST, {overwrite: true}));
 });
 
+gulp.task('tns.Livesync', () => {
+    return gulp.watch([`${SRC}**/*.tns.html`, `${SRC}/**/*.tns.scss`, `${SRC}/**/*.component.ts`])
+        .on('change', (file) => {
+            var outputDest = file.replace(SRC, DEST);
+            outputDest = outputDest.substring(0, outputDest.lastIndexOf('/'));
+            gulp.src([file])
+                .pipe(rename(removeTns))
+                .pipe(replace('.scss\'', '.css\'', { logs: { enabled: false }}))
+                .pipe(debug({title: 'tns.Livesync'}))
+                .pipe(gulp.dest(outputDest, {overwrite: true}));
+        });
+});
+
 gulp.task('phone.Typescript', () => {
-    return gulp.src(['src/**/*.tns.phone.ts'], {follow: true})
+    return gulp.src([`${SRC}**/*.tns.phone.ts`], {follow: true})
         .pipe(rename(removeTns))
         .pipe(rename(removePhone))
-        .pipe(debug({title: 'phone.Typescript'}))
+        // .pipe(debug({title: 'phone.Typescript'}))
         .pipe(gulp.dest(DEST, {overwrite: true}));
 });
 
 gulp.task('phone.Templates', () => {
-    return gulp.src(['src/**/*.tns.phone.html', 'src/**/*.tns.ios.phone.html', 'src/**/*.tns.android.phone.html'], {follow: true})
+    return gulp.src([`${SRC}**/*.tns.phone.html`, `${SRC}**/*.tns.ios.phone.html`, `${SRC}**/*.tns.android.phone.html`], {follow: true})
         .pipe(rename(removeTns))
         .pipe(rename(removePhone))
-        .pipe(debug({title: 'phone.Templates'}))
+        // .pipe(debug({title: 'phone.Templates'}))
         .pipe(gulp.dest(DEST, {overwrite: true}));
 });
 
 gulp.task('phone.Styles', () => {
-    return gulp.src(['src/**/*.tns.phone.scss', 'src/**/*.tns.ios.phone.scss', 'src/**/*.tns.android.phone.scss'], {follow: true})
+    return gulp.src([`${SRC}**/*.tns.phone.scss`, `${SRC}**/*.tns.ios.phone.scss`, `${SRC}**/*.tns.android.phone.scss`], {follow: true})
         .pipe(rename(removeTns))
         .pipe(rename(removePhone))
-        .pipe(debug({title: 'phone.Styles'}))
+        // .pipe(debug({title: 'phone.Styles'}))
         .pipe(gulp.dest(DEST, {overwrite: true}));
 });
 

nativescript/package.json

@@ -1,8 +1,9 @@
 {
-  "description": "Maestro Native",
+  "name": "angular-native-seed",
+  "version": "0.0.0",
   "repository": "<fill-your-repository-here>",
   "nativescript": {
-    "id": "com.mobileagility.maestro",
+    "id": "com.domain.project",
     "tns-ios": {
       "version": "2.5.0"
     }
@@ -17,6 +18,8 @@
     "@angular/platform-browser": "~4.0.0",
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
+    "@ngx-translate/core": "^6.0.1",
+    "@ngx-translate/http-loader": "0.0.3",
     "nativescript-angular": "~1.5.1",
     "nativescript-theme-core": "~1.0.2",
     "reflect-metadata": "~0.1.8",
@@ -62,6 +65,7 @@
     "build.phone-android-bundle": "npm run prepPhone && npm run build-android-bundle",
     "build.tablet-android-bundle": "npm run prepTablet && npm run build-android-bundle",
     "ns-bundle": "ns-bundle",
+    "livesync": "gulp tns.Livesync",
     "start-android-bundle": "npm run ns-bundle --android --start-app",
     "start-ios-bundle": "npm run ns-bundle --ios --start-app",
     "build-android-bundle": "npm run ns-bundle --android --build-app",

nativescript/src/app.module.ts

@@ -10,3 +10,12 @@ of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
 @import 'nativescript-theme-core/css/core.light.css';
+
+.container {
+    margin:40;
+}
+
+.h1 {
+    font-size:32px;
+    font-weight:bold;
+}

nativescript/src/app.css nativescript/src/app.scssnativescript/src/app.css renamed to nativescript/src/app.scss

@@ -0,0 +1 @@
+/Users/seanperkins/Documents/Projects/angular-native-seed/src/assets