Ionic cheatsheet - TwoGears/hakomo-guides GitHub Wiki

Learning:

• About Ionic
  • Intro: http://ionicframework.com/getting-started/
  • Docs: http://ionicframework.com/docs/
  • Forums
  • Blogs that write about Ionic:
    • http://www.joshmorony.com/category/ionic-tutorials/
    • http://mcgivery.com/
    • http://www.nikola-breznjak.com/blog/
  • Usefull blog articles
    • Good Getting started tutorial: https://thinkster.io/ionic-framework-tutorial/
    • Comprehensive list of tutorials: http://mcgivery.com/100-ionic-framework-resources/
    • Performance: http://julienrenaux.fr/2015/08/24/ultimate-angularjs-and-ionic-performance-cheat-sheet/
    • Tips: http://www.sitepoint.com/5-ionic-app-development-tips-tricks/
• About Angular
  • Angular section

CLI commands:

• To list all ionic commands: ionic.

• To list all commands with useful information: ionic --help

• Start a new project: ionic start [appName] [starterTemplate]

• Start a development server with live reload: ionic serve
  - To start the server with android and ios copies: ionic serve --labs

• List starter templates: ionic templates

• Setup sass for the project: ionic setup sass

• Add Crosswalk browser to android build: ionic browser add crosswalk

• Generate splash screen and icon resources: ionic resources

    Put your images in the ./resources directory, named splash or icon.
    Accepted file types are .png, .ai, and .psd.
    Icons should be 192x192 px without rounded corners.
    Splashscreens should be 2208x2208 px, with the image centered in the middle.
  

• Login to Ionic View service: ionic login

• Upload app to Ionic View: ionic upload

• Install cordova plugin: ionic plugin add [pluginName]

• Run app on device: ionic run [platform] --device

• Build app: ionic build

• Save project state: ionic state save

• Restore project state: ionic state restore

Testing

• Jasmine, Karma, Protractor [TODO]

Ionic Plugins

• Ionic market: http://market.ionic.io/
• ngCordova: http://ngcordova.com/
• Forms: http://docs.angular-formly.com/
• List of must-have plugins: http://www.gajotres.net/must-have-plugins-for-ionic-framework/
• Plugins to use:
  • Local Storage: angular-local-storage
  • Forms: Angular Formly + Ionic Templates
  • Input tags: ngTagsInput

Cordova Plugins

• [TODO]

Project structure

• [TODO]

Debugging:

• Fast (in the beginning)

  • ionic serve
  • Chrome Developer Tools

• Slow

  • Run on emulator
    • Android
      • Android Studio emulator
      • Genymotion
    • iOS
      • iOS Simulator
  • Run on device
    • Android:

      • Install Android Studio https://developer.android.com/sdk/index.html

      • Open SDK Manager (Android Studio -> Configure -> SDK Manager

      • Install API 23, API 22, API 21

      • Connect the device

      • Add path variables to the Android Studio command line tools in your dotfiles (.bash_profile):

        export PATH="/Users/[username]/Library/Android/sdk/tools:$PATH"
export PATH="/Users/[username]/Library/Android/sdk/platform-tools:$PATH"

Common problems:

• "No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin." [TODO]

Troubleshooting:

• Search Ionic forums: http://forum.ionicframework.com/
• Ionic github repo issues: http://github.com/driftyco/ionic/issues
• ngCordova issues: https://github.com/driftyco/ng-cordova/issues
• Google and stackoverflow