├── .angular-cli.json ├── .editorconfig ├── .gitignore ├── .vscode └── settings.json ├── Dockerfile ├── LICENSE ├── README.md ├── docker-compose.yml ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── img ├── code-splitting.png ├── grid.png └── nativescript-ionic.png ├── karma.conf.js ├── nativescript ├── .gitignore ├── App_Resources │ ├── Android │ │ ├── AndroidManifest.xml │ │ ├── app.gradle │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ └── values │ │ │ ├── colors.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-50.png │ │ │ ├── icon-50@2x.png │ │ │ ├── icon-57.png │ │ │ ├── icon-57@2x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-72.png │ │ │ ├── icon-72@2x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchImage.launchimage │ │ │ ├── Contents.json │ │ │ ├── Default-568h@2x.png │ │ │ ├── Default-667h@2x.png │ │ │ ├── Default-736h@3x.png │ │ │ ├── Default-Landscape.png │ │ │ ├── Default-Landscape@2x.png │ │ │ ├── Default-Landscape@3x.png │ │ │ ├── Default-Portrait.png │ │ │ ├── Default-Portrait@2x.png │ │ │ ├── Default.png │ │ │ └── Default@2x.png │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ └── LaunchScreen-AspectFill@2x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ └── LaunchScreen-Center@2x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig ├── app │ ├── vendor-platform.android.ts │ ├── vendor-platform.ios.ts │ └── vendor.ts ├── gulpfile.js ├── package.json ├── src │ ├── _app-common.scss │ ├── app.android.css │ ├── app.android.scss │ ├── app.ios.css │ ├── app.ios.scss │ ├── fonts │ ├── main.aot.ts │ ├── main.ts │ └── package.json ├── tsconfig.json └── webpack.config.js ├── nginx ├── README.md └── conf.d │ ├── default.conf │ ├── http-redirect.conf │ └── misc.conf ├── package.json ├── protractor.conf.js ├── proxy.conf.json ├── src ├── app │ ├── about │ │ ├── about.common.ts │ │ ├── about.module.tns.ts │ │ ├── about.module.ts │ │ ├── about.routes.ts │ │ └── components │ │ │ └── about │ │ │ ├── about.component.common.ts │ │ │ ├── about.component.html │ │ │ ├── about.component.scss │ │ │ ├── about.component.spec.ts │ │ │ ├── about.component.tns.html │ │ │ ├── about.component.tns.ts │ │ │ └── about.component.ts │ ├── app-routing.module.tns.ts │ ├── app-routing.module.ts │ ├── app.common.ts │ ├── app.component.html │ ├── app.component.tns.html │ ├── app.component.ts │ ├── app.module.tns.ts │ ├── app.module.ts │ ├── app.routes.tns.ts │ ├── app.routes.ts │ ├── common │ │ ├── index.ts │ │ └── utils │ │ │ ├── Config.ts │ │ │ ├── index.ts │ │ │ ├── router-module.tns.ts │ │ │ └── router-module.ts │ ├── grid │ │ ├── components │ │ │ └── grid │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ ├── grid.component.spec.ts │ │ │ │ ├── grid.component.tns.html │ │ │ │ └── grid.component.ts │ │ ├── grid.common.ts │ │ ├── grid.module.tns.ts │ │ ├── grid.module.ts │ │ └── grid.routes.ts │ ├── home │ │ ├── components │ │ │ └── home │ │ │ │ ├── home.component.html │ │ │ │ ├── home.component.scss │ │ │ │ ├── home.component.spec.ts │ │ │ │ ├── home.component.tns.html │ │ │ │ ├── home.component.tns.ts │ │ │ │ └── home.component.ts │ │ ├── home.common.ts │ │ ├── home.module.tns.ts │ │ ├── home.module.ts │ │ └── home.routes.ts │ ├── providers │ │ └── api │ │ │ └── api.ts │ └── shared │ │ ├── index.ts │ │ ├── shared.module.tns.ts │ │ └── shared.module.ts ├── assets │ ├── .gitkeep │ └── i18n │ │ └── en.json ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── fonts │ ├── .gitkeep │ ├── Ionicons.ttf │ ├── ionicons-icons.scss │ ├── ionicons-variables.scss │ ├── ionicons.eot │ ├── ionicons.scss │ ├── ionicons.svg │ ├── ionicons.woff │ ├── ionicons.woff2 │ ├── noto-sans-bold.ttf │ ├── noto-sans-bold.woff │ ├── noto-sans-regular.ttf │ ├── noto-sans-regular.woff │ ├── noto-sans.scss │ ├── roboto-bold.ttf │ ├── roboto-bold.woff │ ├── roboto-bold.woff2 │ ├── roboto-light.ttf │ ├── roboto-light.woff │ ├── roboto-light.woff2 │ ├── roboto-medium.ttf │ ├── roboto-medium.woff │ ├── roboto-medium.woff2 │ ├── roboto-regular.ttf │ ├── roboto-regular.woff │ ├── roboto-regular.woff2 │ └── roboto.scss ├── index.html ├── ionicons-icons.scss ├── ionicons-variables.scss ├── main.aot.tns.ts ├── main.ts ├── polyfills.ts ├── styles.scss ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── symlink.js ├── tsconfig.json └── tslint.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "angular-seed-project" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "seed", 21 | "styles": [ 22 | "styles.scss" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json" 40 | }, 41 | { 42 | "project": "src/tsconfig.spec.json" 43 | }, 44 | { 45 | "project": "e2e/tsconfig.e2e.json" 46 | } 47 | ], 48 | "test": { 49 | "karma": { 50 | "config": "./karma.conf.js" 51 | } 52 | }, 53 | "defaults": { 54 | "styleExt": "scss", 55 | "component": {} 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | yarn.lock 36 | *.js 37 | !symlink.js 38 | !karma.conf.js 39 | !protractor.conf.js 40 | 41 | # e2e 42 | /e2e/*.js 43 | /e2e/*.map 44 | 45 | # System Files 46 | .DS_Store 47 | Thumbs.db 48 | 49 | # Secrets 50 | nginx/keys 51 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | // "nativescript/app": true, 4 | "nativescript/hooks": true, 5 | "nativescript/src/app/**/*.html": { 6 | "when": "$(basename).tns.html" 7 | }, 8 | "nativescript/src/app/**/*.scss": { 9 | "when": "$(basename).tns.scss" 10 | }, 11 | "nativescript/src/app/**/*.ts": { 12 | "when": "$(basename).tns.ts" 13 | }, 14 | "nativescript/src/app/**/*.spec.ts": true 15 | }, 16 | "files.watcherExclude": { 17 | "nativescript/app/**": true, 18 | "node_modules/**": true, 19 | "nativescript/node_modules/**": true 20 | }, 21 | "search.exclude": { 22 | "nativescript/platforms": true, 23 | "nativescript/src/app": true, 24 | "nativescript/node_modules": true, 25 | "nativescript/hooks": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # You are free to change the contents of this file 2 | FROM nginx 3 | 4 | # NGINX configurations 5 | COPY ./nginx/conf.d /etc/nginx/conf.d 6 | 7 | # Copy built app to wwwroot 8 | COPY dist /usr/share/nginx/html -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Proyecto 26 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Ionic Template {N} ![apple](https://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-32.png) ![android](https://cdn3.iconfinder.com/data/icons/logos-3/228/android-32.png) ![ionic](https://cdn3.iconfinder.com/data/icons/logos-3/512/Ionic_Logo-2-64.png) 2 | **Native mobile Apps** with [NativeScript](https://www.nativescript.org/) and **Web Apps (Mobile First)** with [Ionic](http://ionicframework.com/) styles and components sharing the same code with Angular! 3 | >This template uses the default navigation of Angular, the navigation of Ionic 3 is not recommended to develop websites, therefore it is not recommended to use Ionic components that require Ionic navigation. However, in this template you can find an example of how to use components such as the side menu without depending on the navigation. 4 | 5 | ![NativeScript and Ionic](img/nativescript-ionic.png) 6 | 7 | ## Introduction 👨‍💻 8 | Using this template you can create a **Web App (Mobile First)** using **Ionic 3** components and a **Mobile Native App** using **NativeScript** with the **same code**, yay! 👏 9 | 10 | ![Native and Web Grid](img/grid.png) 11 | 12 | For more details you can check the excellent NativeScript team article about **Code Sharing Between Web and Mobile with Angular and NativeScript**: https://www.nativescript.org/blog/code-sharing-between-web-and-mobile-with-angular-and-nativescript 13 | 14 | ## How does it work? ☕ 15 | Check the excellent video of [Sebastian Witalec](https://github.com/sebawita) about **Sharing Code Between Web and Native Apps** 16 | 17 | [![Sharing Code Between Web and Native Apps](https://img.youtube.com/vi/HMPkXk_vXDw/0.jpg)](https://youtu.be/HMPkXk_vXDw?t=11m56s) 18 | 19 | 20 | ## Run the projects ⏯ 21 | 22 | * **Ionic Web App (Using the Angular-cli)**: 23 | ``` 24 | npm install (It's required to create the symlinks at the first time before to execute the app) 25 | ng serve 26 | ``` 27 | 28 | * **NativeScript Mobile App**: 29 | ``` 30 | cd nativescript 31 | npm install 32 | npm run livesync (Required to detect changes and reload the app from the simulator/device) 33 | npm run ios (using other terminal) 34 | ``` 35 | 36 | ## Commands 💻 37 | View available commands here: [Seed commands](https://github.com/TeamMaestro/angular-native-seed/wiki/Seed-Commands) 38 | 39 | ## Getting Started 📚 40 | Command | Action 41 | ------- | ------ 42 | `npm install -g @angular/cli` | Install the Angular-cli. Remember see the documentation [here](https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services) 43 | `ng g module [name]` | Generate a new Module. Recommended to create sections of your app that will load components with Lazy Loading. 44 | `ng g component [name]` | Generate a new Component in the current directory. Remember add the **moduleId** property `moduleId: module.id` in every component 45 | `ng g service [name]` | Generate a new Service. The `app/providers/` path is recommended for shared services among several components. 46 | 47 | ## Use [Ionic icons](https://ionicframework.com/docs/ionicons/) from the NativeScript side 🎁 48 | NativeScript requires the **unicode** of the icon, you can find the unicode with the name of the icon from the content of the `src/fonts/ionicons.svg` file and later you can use it from a `