Over a million developers have joined DZone.

Building Your Own Ionic App

DZone 's Guide to

Building Your Own Ionic App

Here is a quick starter for how to begin building your own Ionic app.

· Mobile Zone ·
Free Resource

What is Ionic Framework?

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Think of Ionic as the front-end UI framework that handles all of the look and feel, and UI interactions your app needs in order to be compelling. Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app.

Installing Ionic on Ubuntu 14.04

To install Ionic, make sure you have Node.js installed. To Install Node.js, follow these steps:

Simply run the commands:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

To compile and install native add-ons from npm you may also need to install build tools:

sudo apt-get install -y build-essential
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

Install Ionic

Ionic comes with a convenient command line utility to start, build, and package Ionic apps.

To install it, simply run:

$ sudo npm install -g ionic

Or, you can just abbreviate the command:

$ sudo npm install -g cordova ionic

You are all set to make your first ionic app.

Create the Ionic project. Go to the path where you want to create your Ionic project from terminal and type:

$ ionic start myApp blank

That will create a folder called in the directory the command was run. The next step is to configure the platforms.

Configure Platforms

Now, we need to tell Ionic that we want to enable the Android platforms.

$ ionic platform add android

Build the APK

Just to make sure the default project worked, try building and running the project:

$ ionic build android

You can now test the APK in your android phone.

Thanks for reading.

ionic framework ,ionic ,apps ,create ,build

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}