Before we start this tutorial make sure you have everything installed/configured to handle Android development (Apache Ant, Java SDK and Eclipse/Android Studio).
 

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.


 
Download the listed software:
 
  • 1. Install Apache Ant
  • 2. Install nodeJS
  • 3. Install Cordova
  • 4. Install Java JDK
  • 5. Install Android SDK
  • 6. Create, Test, and Delete a demo jQuery Mobile application
 

1. Install Apache Ant

 
Go to the official Apache Ant website and download the latest version, or any other if you don’t like to use latest versions. Download link:
 
Download Link
 
Create a new ANT directory (where ever you prefer) and unpack a downloaded archive. It should look something like this: D:\JavaScript\ANT\apache-ant-1.9.2
 
Use this location and create a new environment variable called ANT_HOME, also use this variable and add it to your environment PATH like this: %ANT_HOME%\bin.
 
jQuery Mobile Tutorial 1014
 
jQuery Mobile Tutorial 1015
 

2. Install nodeJS

 
Before we can start with jQuery Mobile, 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 final location. In this case, it’s:
 
c:\Program Files\nodejs\
 
Downloads
 
It should look like this:
 
jQuery Mobile Tutorial 1001
 
Now go to the node.js installation folder (one I mentioned before) and 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 like. 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:
 
jQuery Mobile Tutorial 1002
 

3. Install Cordova

 
First part is optional. Before we install 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”
 
Now let’s install Cordova. Open Windows command prompt and enter this:
 
npm install -g cordova
 
This command 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 needed packages). It should look like this:
 
D:\JavaScript>npm install -g cordova jquery-mobile
D:\JavaScript\nodejs\cordova -> D:\JavaScript\nodejs\node_modules\cordova\bin\cordova

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)
 
I am adding text instead of an image to prevent unnecessary article loading time. Close this command prompt window, we will update our environment PATH soon.
 
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 this case it is: 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:
 
jQuery Mobile Tutorial 1003
 
Do the same thing for {your location} directory, go to your node.js module directory (one we previously created, in this case it is: 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:
 
jQuery Mobile Tutorial 1010
 

4. Install Java JDK

 
Go to the official Oracle Java site and download the latest Java JDK version, be careful not to download Java JRE instead. You will also need to create an official Oracle account. Be careful to install a correct 32bit or 64 bit version (this tutorial will show you how to find this information). Download link:
 
Java JDK
 
Install it where ever you want, just remember its location. For example, it should look like this: C:\Program Files\Java\jdk1.8.0_25\
 
Create a new environment variable (into System variables) called JAVA_HOME and add a location to your JAVA installation folder. Then add it to the environment PATH, looking like this: C:\Program Files\Java\jdk1.8.0_25\bin:
 
jQuery Mobile Tutorial 1004
 
jQuery Mobile Tutorial 1005
 

5. Install Android SDK

 
Go to the official Android SDK site:
 
Android SDK
 
You can choose “Download Android Studio” if you wish a full package or you can scroll a bit until you see: Other Download Options -> SDK Tools Only. Here you can download SDK only, just select Windows installer package and initiate download/installation. In this case will we download full Android Studio. Start SDK Android Studio installation.
 
At this point, just click Next until installation ends if you wish you can change installation folder.
 
Go to Android Studio installation folder. Like this one: C:\Program Files\Android\Android Studio\bin\ and create a desktop shortcut (if you are using 32bit Windows use studio.exe or studio64.exe in case of 64bit Windows). Only do this steps if installation didn’t already do that automatically.
 
Open Android Studio (this part will fail if you don’t have installed JAVA SDK also it will take some time for it to open for the first time, ). Click Create New Project, and click Next several times. When Android Studio opens, go to the toolbar and click Tools -> Android -> SDK Manager. When you open the SDK Manager for the first time, several packages are selected by default. Leave these selected but make sure you have everything you need to get started by following these steps (don’t select Android 3.X or anything lower than 2.3.3 because Cordova don’t support them).
 
jQuery Mobile Tutorial 1006
 
Once you’ve selected all the desired packages, continue to install, click Install X packages. In the next window, double-click each package name on the left to accept the license agreement for each. Click Install. The download progress is shown at the bottom of the SDK Manager window. Do not exit the SDK Manager or it will cancel the download. You will probably need to do this 3-4x times (some sections have dependencies and installer is not smart enough to install then in the right order).
 
jQuery Mobile Tutorial 1007
 
This will take a lot of time so make yourself coffee while you wait.
 
jQuery Mobile Tutorial 1006
 
When everything is done, your Android SDK should be installed somewhere like this:
 
C:\Users\Gajotres\AppData\Local\Android\sdk
 
in your case, it will be:
 
C:\Users\{USER}\AppData\Local\Android\sdk
 
Create new environment variable called ANDROID_HOME and add previously mentioned link. Now add two additional environment PATH locations %ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;. Everything should look like this:
 
jQuery Mobile Tutorial 1011
 
jQuery Mobile Tutorial 1012
 
jQuery Mobile Tutorial 1013
 

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:






  • pooja

    I loved ur work.Thanks alot.This ionic installation (with images)helped me lot and its better than others.