Skip to content
This repository has been archived by the owner on Oct 22, 2018. It is now read-only.

πŸ“± πŸ–₯ Create Mobile First apps, Web and Native sharing the code with Angular πŸŽ‰

License

Notifications You must be signed in to change notification settings

proyecto26/nativescript-ionic-template

Repository files navigation

NativeScript Ionic Template {N} apple android ionic

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.

NativeScript and Ionic

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! πŸ‘

Native and Web Grid

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

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: &#xf41a;
<Button class="ion-icon" fontSize="25" text="&#xf41a;"></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

Code Splitting

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 β›©

Contributors πŸ₯‡

Sean perkins jdnichollsc
Sean Perkins Juan Nicholls

Credits πŸ‘

Supporting 🍻

I believe in Unicorns πŸ¦„ Support me, if you do too.

Happy coding πŸ’―

Made with ❀️