For some time, I was playing with an idea to create an article series covering different mobile HTML5 frameworks. Time has come so let’s kick this off with Ionic Framework, currently one of the best available mobile frameworks. I will not go into great details describing Ionic here, if you want to know more about it take a look at my previous article.
 
This tutorial series is going to be written from the perspective of Windows OS and Android development. If readers show enough interest I will also add a Linux chapter, Windows will suffice for now. Roughly 90% – 95% of a stuff written here will work in any environment (things will change when we start playing with Cordova plugins) so keep reading if you’re a Linux/MacOS user.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins ...

Preparations

 
Before we start this tutorial make sure you have everything installed/configured to handle Android development (Apache Ant, Java SDK and Eclipse/Android Studio).
 
You will need to download and install:
 
  1. Install nodeJS
  2. Install Ionic && Cordova
 

1. Install nodeJS

 
Before we can start with Ionic, make sure you have Node.js installed. Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it. During the installation you must remember instalation location. In my case it’s:
 
c:\Program Files\nodejs\
 
Download Link
 
It should look like this:
 
Ionic Tutorial 1001
 
Now go to the node.js installation folder (one I mentioned before), go even deeper until you reach a bin folder:
 
C:\Program Files\nodejs\node_modules\npm\bin\
 
Copy this location and add it to your environment PATH. Take a look at this tutorial if you don’t know how to do that, you will find an examples for Windows XP, Windows 2000 and Windows 7. It should look like this:
 
Ionic Tutorial 1002
 

2. Install Ionic && Cordova

 
Optional part is ending here. Before we install Ionic and Cordova using node.js we could change a default installation folder. Original default folder is strangely placed in this hidden location: C:\Users\{username}\AppData\Roaming\npm. We can change this destination folder manually, just go to this folder: C:\Users\{username}\ and create an empty file called: .npmrc (make sure you have administration privilegies over that folder). Edit it and add this line (don’t forget to save):
 
prefix = "C:\\{your location}"
 
Remember you should use double \\ instead of a \. In this article we are using this location: prefix = “D:\\JavaScript\\nodejs”
 
This is the end of optional part. Now let’s install Ionic and Cordova. Open windows command prompt and type/execute this:
 
npm install -g cordova ionic
 
Those commands will initiate an installation process, give it some time to finish (if you receive an error try again few times, npm sometimes can’t find necessary packages). Output should look like this:
 
D:\JavaScript>npm install -g cordova ionic
D:\JavaScript\nodejs\cordova -> D:\JavaScript\nodejs\node_modules\cordova\bin\cordova
D:\JavaScript\nodejs\ionic -> D:\JavaScript\nodejs\node_modules\ionic\bin\ionic
cordova@4.1.2 D:\JavaScript\nodejs\node_modules\cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.5)
└── cordova-lib@4.1.2 (unorm@1.3.3, osenv@0.1.0, bplist-parser@0.0.6, properties-parser@0.2.3, mime@1.2.11, semver@2.0.1
1, dep-graph@1.1.0, shelljs@0.3.0, rc@0.5.2, npmconf@0.1.16, elementtree@0.1.5, xcode@0.6.7, glob@4.0.6, d8@0.4.4, tar@1
.0.2, request@2.47.0, plist@1.1.0, cordova-js@3.7.2, npm@1.3.4)

ionic@1.2.13 D:\JavaScript\nodejs\node_modules\ionic
├── connect-livereload@0.4.0
├── proxy-middleware@0.7.0
├── q@1.0.1
├── colors@0.6.2
├── progress@1.1.7
├── open@0.0.5
├── underscore@1.7.0
├── ncp@0.4.2
├── shelljs@0.2.6
├── cross-spawn@0.2.3 (lru-cache@2.5.0)
├── finalhandler@0.2.0 (escape-html@1.0.1, debug@2.0.0)
├── event-stream@3.0.20 (from@0.1.3, stream-combiner@0.0.4, duplexer@0.1.1, pause-stream@0.0.11, map-stream@0.0.5, split
@0.2.10, through@2.3.6)
├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.10)
├── form-data@0.1.4 (mime@1.2.11, async@0.9.0, combined-stream@0.0.7)
├── connect@3.1.1 (parseurl@1.3.0, utils-merge@1.0.0, debug@1.0.4, finalhandler@0.1.0)
├── serve-static@1.7.1 (utils-merge@1.0.0, parseurl@1.3.0, escape-html@1.0.1, send@0.10.1)
├── tiny-lr-fork@0.0.5 (debug@0.7.4, qs@0.5.6, faye-websocket@0.4.4, noptify@0.0.3)
├── unzip@0.1.9 (setimmediate@1.0.2, match-stream@0.0.2, readable-stream@1.0.33, pullstream@0.4.1, binary@0.3.0, fstream
@0.1.31)
├── request@2.27.0 (forever-agent@0.5.2, aws-sign@0.3.0, tunnel-agent@0.3.0, qs@0.6.6, json-stringify-safe@5.0.0, oauth-
sign@0.3.0, cookie-jar@0.3.0, mime@1.2.11, node-uuid@1.4.2, hawk@1.0.0, http-signature@0.10.0)
├── vinyl-fs@0.3.7 (graceful-fs@3.0.5, lodash@2.4.1, strip-bom@1.0.0, vinyl@0.4.6, mkdirp@0.5.0, through2@0.6.3, glob-st
ream@3.1.18, glob-watcher@0.0.6)
├── prompt@0.2.12 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.5, utile@0.2.1, winston@0.6.2)
├── archiver@0.5.1 (lodash@2.4.1, readable-stream@1.1.13, lazystream@0.1.0, zip-stream@0.1.4, file-utils@0.1.5)
├── gulp@3.8.8 (pretty-hrtime@0.2.2, interpret@0.3.9, deprecated@0.0.1, archy@0.0.2, minimist@1.1.0, tildify@1.0.0, semv
er@3.0.1, chalk@0.5.1, orchestrator@0.3.7, gulp-util@3.0.1, liftoff@0.12.1)
├── xml2js@0.4.4 (sax@0.6.1, xmlbuilder@2.4.5)
└── npm@2.1.3

D:\JavaScript>
 
* I am adding text instead of an image to prevent unnecessary article loading time.
 
Close this command prompt window. Before we proceed any further we need to add Cordova bin directory to our environment PATH. Go to your node.js module directory (one we previously created, in my case it’s: D:\JavaScript\nodejs\). Go even deeper until you reach this directory:
 
D:\JavaScript\nodejs\node_modules\cordova\bin\
 
or in your case:
 
C:\{your location}\node_modules\cordova\bin\
 
Copy that location and add it to your environment PATH like, like this:
 
Ionic Tutorial 1003
 
Do the same thing for {your location} directory, go to your node.js module directory (one we previously created, in my case it’s: D:\JavaScript\nodejs\).:
 
D:\JavaScript\nodejs\
 
or in your case:
 
C:\{your location}\
 
Copy that location and add it to your environment PATH like, like this:
 
Ionic Tutorial 1010
 
This is all for this article. Next one will cover the anatomy of Ionic Framework page plus our first working example.
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Antonio Garcia Marin (@antoniogarcia78)

    Hi Dragan
    How solve , using windows as me, the problem compile apple apps using cordova?
    Thank

    • Forget about it, you can't do it on Windows OS.

      If you don't have Macintosh you still have three options:

      1. If you're using Ionic think switching to Supersonic. It uses Ionic plus its own wrapper based on Cordova. They are free and they offer cloud app building, including iOs apps.

      2. Install Hackintosh. It's a MacOS on PC architecture.
      You may encounter problems because not every hardware can be used for Hackintosh.

      3. Similar to point 1. think about switching to OnsenUI. It's very similar to Ionic, it uses AngularJS and has cloud app building service, including iOS. It's also free.

  • antonio Garcia Marin

    Thanks Dragan

    Links
    Supersonic
    http://www.appgyver.com/
    OnsenUI in the cloid
    https://monaca.io/cloud.html
    Mac mini (i don't like the hackinstosh way)
    http://www.apple.com/mac-mini/

  • nesrine

    hi,
    any person can help me pleasssse, i can’t install ionic( this is screenshot)