proyecto26 / Nativescript Ionic Template
Licence: mit
📱 🖥 Create Mobile First apps, Web and Native sharing the code with Angular 🎉
Stars: ✭ 65
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Nativescript Ionic Template
Awesome Ionic
An "awesome" list of Ionic resources
Stars: ✭ 799 (+1129.23%)
Mutual labels: ionic, ionic-framework, ionic3
Ionic4
This repo contains example code for ionic4. Get Step by Step tutorial of this repo examples using https://ampersandacademy.com/tutorials/ionic-framework-4
Stars: ✭ 37 (-43.08%)
Mutual labels: mobile-development, ionic, ionic-framework
Ionic-ElastiChat-with-Images
Ionic Magic Chat with Angular Elastic, Autolinker.js and more!
Stars: ✭ 66 (+1.54%)
Mutual labels: apps, mobile-app, ionic-framework
ionicfirebaseauth
Exemplo de alguns tipos de autenticação com Ionic 2 e Firebase
Stars: ✭ 18 (-72.31%)
Mutual labels: ionic, ionic-framework, ionic3
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-66.15%)
Mutual labels: ionic, ionic-framework, ionic3
ionic-3-video-calling-using-webrtc
This is demo code of how to implement video calling in ionic 3 using webrtc
Stars: ✭ 58 (-10.77%)
Mutual labels: ionic, ionic-framework, ionic3
todo-list
TodoList using Ionic2/3 & Firebase: * PWA * SSO Google plus. * Share list via QRcode. * Upload image from Camera or Storage. * Speech Recognition.
Stars: ✭ 18 (-72.31%)
Mutual labels: ionic, ionic-framework, ionic3
ionic-hockeyapp
Need HockeyApp in your Ionic application, add this package!
Stars: ✭ 19 (-70.77%)
Mutual labels: ionic, ionic-framework, ionic3
ionic4-angular6-crud-example
Building CRUD Mobile App using Ionic 4, Angular 6 and Cordova
Stars: ✭ 50 (-23.08%)
Mutual labels: ionic, ionic-framework, ionic3
ionic-surveyjs
Sample project that shows how to integrate SurveyJS in Ionic APP.
Stars: ✭ 28 (-56.92%)
Mutual labels: ionic, ionic-framework, ionic3
Ionic Custom Components
Ionic 3/4 Custom Components. Spend less time on design and more time on coding! Free to use for everyone! 🧙♂️
Stars: ✭ 23 (-64.62%)
Mutual labels: ionic, ionic-framework, ionic3
Ionic Google Login
Ionic 4 starter app to show you how to add Google Log In to an Ionic App using Google Sign-In Cordova Plugin.
Stars: ✭ 61 (-6.15%)
Mutual labels: ionic, ionic-framework, ionic3
ionic-app-with-aws-cognito
Angular 4, Ionic 3, and AWS (Amazon) Cognito User Pools. Authentication out of the box.
Stars: ✭ 62 (-4.62%)
Mutual labels: ionic, ionic-framework, ionic3
ionic-uber-clone
Ionic 4 Taxi Booking script
Stars: ✭ 34 (-47.69%)
Mutual labels: ionic, ionic-framework, ionic3
ionic3-start-theme
Ionic 3 Start Theme with 10 Pages, mock data, providers samples, Storage, Http and more...
Stars: ✭ 130 (+100%)
Mutual labels: ionic, ionic-framework, ionic3
fireblogger
Ionic 2 social media microblogging platform built with firebase 3 as backend
Stars: ✭ 54 (-16.92%)
Mutual labels: ionic, ionic-framework, ionic3
ionic4-angular7-example
Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps
Stars: ✭ 57 (-12.31%)
Mutual labels: ionic, apps, ionic-framework
ionic-login-component
Free sample of Premium Ionic Login Component
Stars: ✭ 17 (-73.85%)
Mutual labels: ionic, ionic-framework, ionic3
ionic-native-sms-retriever-plugin-master
Cross-platform plugin for Cordova / PhoneGap to Retrieve SMS. Available for Android.
Stars: ✭ 16 (-75.38%)
Mutual labels: ionic, ionic-framework, ionic3
Ionic Environment Variables
Easy to use environment variables for Ionic3!
Stars: ✭ 278 (+327.69%)
Mutual labels: ionic, ionic-framework, ionic3
NativeScript Ionic Template {N} 
Native mobile Apps with NativeScript and Web Apps (Mobile First) with Ionic styles and components sharing the same code with Angular!
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.
Introduction 👨💻
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! 👏
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
How does it work? ☕
Check the excellent video of Sebastian Witalec about Sharing Code Between Web and Native Apps
Run the projects ⏯
- Ionic Web App (Using the Angular-cli):
npm install (It's required to create the symlinks at the first time before to execute the app)
ng serve
- NativeScript Mobile App:
cd nativescript
npm install
npm run livesync (Required to detect changes and reload the app from the simulator/device)
npm run ios (using other terminal)
Commands 💻
View available commands here: Seed commands
Getting Started 📚
| Command | Action |
|---|---|
npm install -g @angular/cli |
Install the Angular-cli. Remember see the documentation here |
ng g module [name] |
Generate a new Module. Recommended to create sections of your app that will load components with Lazy Loading. |
ng g component [name] |
Generate a new Component in the current directory. Remember add the moduleId property moduleId: module.id in every component |
ng g service [name] |
Generate a new Service. The app/providers/ path is recommended for shared services among several components. |
Use Ionic icons from the NativeScript side 🎁
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 <Label> or <Button>, example:
// name: ion-ios-contact, unicode: 
<Button class="ion-icon" fontSize="25" text=""></Button>
Custom templates for each platform 🥂
Target Phone and Tablet Templates individually. The following extensions are supported:
| Extension | Platform |
|---|---|
.{html/scss} |
Web platform. Used from mobile when there is no .tns extension |
.tns.{html/scss} |
Only for mobile |
.tns.ios.{html/scss} |
Only for iOS |
.tns.android.{html/scss} |
Only for Android |
.tns.ios.phone.{html/scss} |
Only for iOS Phone |
.tns.android.phone.{html/scss} |
Only for Android Phone |
Angular Tips
| Syntax | Meaning | Expected Result |
|---|---|---|
{{ title }}{{ getTitle() }}
|
Render a value dynamically, this expression will be evaluated at run time. | |
[src]="imageUrl" |
Property Binding: Bind a property of a DOM element to a field of the component. | |
[attr.colspan]="colSpan" |
Attribute Binding | |
[class.selected]="user.selected" |
Class Binding: Add a class dynamically. | |
[style.color]="isActive? 'green': 'red'" |
Style Binding | |
(tap)="onSave($event)" |
Event Binding | |
(keyup.enter)="onEnter()" |
Event Filtering | |
#email (keyup.enter)="onEnter(email.value) |
Template variables | |
[(ngModel)]="user.email" |
Two-way Binding. Import FormsModule is required. | |
{{ price | currency:'AUD' }} |
Pipes: Format data. | |
@Input('input-property') myData;<example [input-property]="data">
|
Input Properties: Input data for the component. | |
@Output('output-property') change= new EventEmitter();this.change.emit({msg: 'Hi!'});<example (output-property)="onChange($event)"> |
Output Properties: Raise events from the component. | onChange({msg}) { console.log(msg) } |
Resources ⛩
- NativeScript Quick Setup
- The NativeScript book
- Ionic CSS Utilities
- NativeScript Styling
- NativeScript Layout Containers
- Professional UI Components
- Progress NativeScript UI samples
- awesome-nativescript
- Awesome {N}
Contributors 🥇
 |
 |
|---|---|
| Sean Perkins | Juan Nicholls |
Credits 👍
Supporting 🍻
I believe in Unicorns 🦄 Support me, if you do too.
Happy coding 💯
Made with ❤️
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].