Skip to content

Instantly share code, notes, and snippets.

@ingoradatz

ingoradatz/Ionic Notes.md

Forked from denzildoyle/Ionic Notes.md
Last active September 2, 2015 20:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ingoradatz/2d495a154a98a5c29308 to your computer and use it in GitHub Desktop.
Save ingoradatz/2d495a154a98a5c29308 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic notes: How to get started with Ionic mobile application development framework.
Raw
Ionic Notes.md

##Getting Started with Ionic Framework

Ionic is a powerful, beautiful and easy to use open source front-end framework built on top of AngularJs (a client-side javascript framework), Sass Syntactically Awesome Style Sheets Apache Cordova for and developing hybrid (cross platform) mobile apps.

Ionic's ultimate goal is to make it easier to develop native mobile apps with HTML5, also known as Hybrid apps.

Install nodejs: http://nodejs.org/

    npm install -g cordova ionic

####Full list of Ionic starter templates

Start with a blank Ionic template

    $ ionic start appName blank

Start with an Ionic tabs template

    $ ionic start appName tabs

Start with a side menu Ionic template

    $ ionic start myApp sidemenu

Start with an Ionic maps template

    $ ionic start myApp maps

Start with an Ionic push notification template

    $ ionic start myApp push

Start with an Ionic analytics template

    $ ionic start myApp analytics

Start with an Ionic salesforce template

    $ ionic start myApp salesforce

Start with an app containing ionic.io services

    $ ionic start myApp io

Start with an app containing Ionic deploy

    $ ionic start myApp deploy

A test of different kinds of page navigation

    $ ionic start myApp tests

A complex list starter template

    $ ionic start myApp complex list

####Build and run app on iOS

  1. Install iOS emulator

  2. Change directory to app directory

  3. Add iOS platform

  4. Build app for iOS

  5. Emulate app

  6. Or run app on connected iOS device

     $ sudo npm install -g ios-sim 
 $ cd appName
 $ ionic platform add ios
 $ ionic build ios
 $ ionic emulate ios
 $ ionic run ios

##Android Emulator setup on Mac: The follow instrustions should help you get the Android emulator set up on mac.

######Install 'ant'

Get the latest version of Apache Ant (binary distribution) from its official website (example link) Unzip the binary distribution and rename the folder to “ant” change directory to the directory containing "ant" Download Ant

######Move the folder to “/usr/local”. terminal commands:

    $ mv ant /usr/local
    $ cd /usr/local
    $ ln -s ant ant

######Add the following lines of code to your bash_profile file. ~/.bash_profile

    $ export ANT_HOME=/usr/local/ant
    $ export PATH=${PATH}:${ANT_HOME}/bin

######Then run this command

    $ source ~/.bash_profile

##Adding an image

######app.js

        .config(function($stateProvider, $urlRouterProvider, $compileProvider) {
        $urlRouterProvider.otherwise('/');
        $compileProvider.imgSrcSanitizationWhitelist('img/');

######.html

        ng-src="img/[image path]"

##Known Errors

#####Error initilizing Cordova: Class not found

    cordova platform rm android
    cordova platform add android

#####External linking

Run command to install inappbrowser plugin more information here http://intown.biz/2014/03/30/cordova-ionic-links-in-browser/

    $sudo cordova plugin add org.apache.cordova.inappbrowser

#####Code sample

    onClick="window.open(url, target, options)";
    onClick="window.open('https://mobile.twitter.com/catholictt', '_system', 'location=yes')"
  • ref: Reference to the InAppBrowser window. (InAppBrowser)
  • url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.
  • target: The target in which to load the URL, an optional parameter that defaults to _self. (String)
    • _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
    • _blank: Opens in the InAppBrowser.
    • _system: Opens in the system's web browser.
    • options: Options for the InAppBrowser. Optional, defaulting to: location=yes. (String)

The options string must not contain any blank space, and each feature's name/value pairs must be separated by a comma. Feature names are case insensitive. All platforms support the value below:

location: Set to yes or no to turn the InAppBrowser's location bar on or off.

##Other useful information

Lock app's orientation in landscape mode:

<preference name="orientation" value="landscape" />

Lock app's orientation in portrait mode:

<preference name="orientation" value="portrait" />

Set app's orientation to default:

<preference name="orientation" value="default" />

Display status bar:

  <preference name="fullscreen" value="false" />

##Fix ios header status bar problem

    $cordova plugin add org.apache.cordova.device

##chromeview https://github.com/thedracle/cordova-android-chromeview

##Postision content at the bottom of the sreen in iconic

First you have to stop the content area from scrolling.

html:

<ion-content scroll="false">

Next what you want to do is set the a height of 100% to the scroll class which usually wraps your main content and position your content when you want it.

css:

.some-content{
  width: 96%;
  margin: 0 2%;
  position: absolute;
  bottom: 100px;
}
.scroll{
  height:100%;
}

##Deploy to iOS

    npm install -g ios-deploy

cordova plugin rm https://github.com/driftyco/ionic-plugins-keyboard.git
cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git

Status https://developer.apple.com/appstore/resources/approval/index.html

##Update Apache Cordova

    sudo npm update -g cordova ionic

'npm update' is a built in function for node that will any packages you have installed. If things aren't updating correctly, you can always run

    sudo npm uninstall -g ionic && sudo npm install ionic

If you are experiencing any issues you may need to uninstall you plugins first before you update. More information here

Istall gulp

sudo npm install -g gulp

gulp version

gulp -v

#Adding and removing plugins
Adding

    ionic plugin add <plugin-location>

example

    ionic plugin add com.ionic.keyboard

removing

    ionic plugin rm <plugin-location>

example

    ionic plugin add com.ionic.keyboard

##iOS 8 status bar issue

.platform-ios .menu .list, .platform-ios .nav-bar{ margin-top: 20px; background-color: #2C77BD;} .platform-ios .panel .view{ background-color: #2C77BD;} .platform-ios .scroll-content{ margin-top: 20px; overflow: auto;} .platform-ios .list a:first-child{ border-top: none;}

##SASS Using Sass

By default, starter projects are hooked up to Ionic's precompiled CSS file, which is found in the project's www/lib/ionic/css directory, and is linked to the app in the head of the root index.html file. However, Ionic projects can also be customized using Sass, which gives developers and designers "superpowers" in terms of creating and maintaining CSS. Below are two ways to setup Sass for your Ionic project (the ionic setup sass command simply does the manual steps for you). Once Sass has been setup for your Ionic project, then the ionic serve command will also watch for Sass changes.

###Setup Sass Automatically

    ionic setup sass

###Setup Sass Manually

Run npm install from the working directory of an Ionic project. This will install gulp.js and a few handy tasks, such as gulp-sass and gulp-minify-css. Remove from the of the root index.html file. Remove from the of the root index.html file. Add to the of the root index.html file. In the ionic.project file, add the JavaScript property "gulpStartupTasks": ["sass", "watch"] (this can also be customized to whatever gulp tasks you'd like).

##Installing sass Install

    gem install sass

or

    sudo gem install sass

How to watch files

    sass --watch path/sass-directory

watch directory

    sass --watch path/sass-directory:path/css-directory

watch file

    sass --watch path/sass-directory/styles.css

##Install Gulp

    $ sudo npm install -g gulp-sass
    $ sudo npm install gulp-sass
    $ sudo ionic setup sass
    $ sudo ionic serve

##Ionic live reload

Commands examples

    $ ionic emulate ios --livereload --consolelogs --serverlogs
    $ ionic run android -l -c -s

##Using Yeoman What is Yeoman: Yeoman is a web scafforlding tool for modern web applications. Yeoman generator for creating Ionic hybrid mobile applications using AngularJS and Cordova - lets you quickly set up a project with sensible defaults and best practices. Check out there website at http://yeoman.io/, and yo ionic on git at this address https://github.com/diegonetto/generator-ionic

###Installing yo

    $ npm install -g yo

install ionic generator

    $sudo npm install -g generator-ionic

Generate ionic project project

    $ yo ionic

##Deploy to Google Play Store

[Publishing your app]http://ionicframework.com/docs/guide/publishing.html

If you are about to upload a new version of the appliaction already on the Google play update app configuration file (config.xml) with version number.

$ cordova build --release android
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms/android/ant-build/[app_mame]-release-unsigned.apk alias_name

If you have already created a relase build of the app you move or rename the privious version of the app in this case we will just remove it.

$ rm [app_mame].apk
$ zipalign -v 4 platforms/android/ant-build/[app_mame]-release-unsigned.apk [app_mame].apk

{unedited}

Testing in a Browser

Use ionic serve to start a local development server for app dev and testing. This is useful for both desktop browser testing, and to test within a device browser which is connected to the same network. Additionally, this command starts LiveReload which is used to monitor changes in the file system. As soon as you save a file the browser is refreshed automatically. View Using Sass if you would also like to have ionic serve watch the project's Sass files.

$ ionic serve [options]

LiveReload

By default, LiveReload will watch for changes in your www/ directory, excluding www/lib/. To change this, you can specify a watchPatterns property in the ionic.project file located in your project root to watch (or not watch) for specific changes.

{
  "name": "myApp",
  "app_id": "",
  "watchPatterns": [
    "www/js/*",
    "!www/css/**/*"
  ]
}

For a reference on glob pattern syntax, check out globbing patterns on the Grunt website.

Note:

$ ionic setup sass

Updating Ionic

Update Ionic library files, which are found in the www/lib/ionic directory. If bower is being used by the project, this command will automatically run bower update ionic, otherwise this command updates the local static files from Ionic's CDN.

$ ionic lib update

{unedited end}

##Creating search

Angular filter https://docs.angularjs.org/api/ng/filter/filter

Raw
ionic.bash
# Useful Ionic Aliases
alias iba='ionic build android'
alias ibi='ionic build ios'
alias ira='ionic run android'
alias iri='ionic run ios'
alias ibra='iba && ira'
alias ilra='ionic run android -l -c -s'
alias ilri='ionic run ios -l -c -s'
alias ionic-handleit='ionic run android && ionic run ios'
# Emaulate Ios using different Apple devices
alias ie-4s="ionic emulate ios --target="iPhone-4s""
alias ie-5="ionic emulate ios --target="iPhone-5""
alias ie-5s="ionic emulate ios --target="iPhone-5s""
alias ie-6="ionic emulate ios --target="iPhone-6""
alias ie-6-Plus="ionic emulate ios --target="iPhone-6-Plus""
alias ie-iPad2="ionic emulate ios --target="iPad-2""
alias ie-iPadR="ionic emulate ios --target="iPad-Retina""
alias ie-iPadA="ionic emulate ios --target="iPad-Air""
Raw
Splahsceen.md

##Hide splash screen on device ready

1. Install splashscreen plugin

$ ionic plugin add org.apache.cordova.splashscreen

2. Change the defaults.xml in myapp/platforms/ios/cordova/

<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />

3. Add in your controllers.js:

angular.module('starter.controllers', [])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    setTimeout(function() {
        navigator.splashscreen.hide();
    }, 100);
 });
})

After make these changes you must rebuild and run the app:

$ ionic build ios
$ ionic run ios
Raw
splashscreen.md

Icons and Splash Screens

Icons for Android

Iconography

We simply need to replace the default Android icons with our custom icons.

  • platforms/android/res/drawable/icon.png - 96x96
  • platforms/android/res/drawable-ldpi/icon.png - 36x36
  • platforms/android/res/drawable-mdpi/icon.png - 48x48
  • platforms/android/res/drawable-hdpi/icon.png - 72x72
  • platforms/android/res/drawable-xhdpi/icon.png - 96x96

N.B. It is not the case that you can always create the 96x96 image and then scale to get the others. Especially when the icon has text.

Splash Screen For Android

  1. Add the SplashScreen and SplashScreenDelay preferences.

    <preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />

    N.B. The SplashScreenDelay should be the worst-case expected start time.

  2. Replace the default splash screens with your custom splash screens.

    • Portrait Mode
      • platforms/android/res/drawable-port-ldpi/screen.png - 200x320
      • platforms/android/res/drawable-port-mdpi/screen.png - 320x480
      • platforms/android/res/drawable-port-hdpi/screen.png - 480x800
      • platforms/android/res/drawable-port-xhdpi/screen.png - 720x1280
    • Landscape Mode
      • platforms/android/res/drawable-land-ldpi/screen.png - 320x200
      • platforms/android/res/drawable-land-mdpi/screen.png - 480x320
      • platforms/android/res/drawable-land-hdpi/screen.png - 800x480
      • platforms/android/res/drawable-land-xhdpi/screen.png - 1280x720

As a best practice, the splash screen should be present only as long as necessary. When your app has started and the webview has loaded, your app should hide the splash screen so that your main view is visible as soon as it is ready.

$ ionic plugin add org.apache.cordova.splashscreen
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // ...
    // Hide the splash screen as soon as the device is ready
    if(window.navigator && window.navigator.splashscreen) {
      window.navigator.splashscreen.hide();
    }
  });
});

How to force an orientation?

To force an orientation you need to set the orientation preference in config.xml.

<preference name="orientation" value="portrait" />
<!-- or -->
<preference name="orientation" value="landscape" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment