The Ionic Framework is an open source front-end SDK which helps developers create beautiful hybrid HTML5 mobile applications alongside with AngularJS. Creating an app while using the Ionic Framework allows for the GUI of mobile applications to be built uniform manner with relative ease. With the CLI commands provided after downloading Ionic Framework it only takes seconds to begin work!
Installing the Ionic Framework
Ionic is installed with npm, which means that Node.js will need to be downloaded and installed first. This is easily done by visiting https://nodejs.org and clicking the INSTALL button right smack dab on the front page.
Once node is installed, you have access to using the npm (node package manager) which will allow you to install thousands of different packages like Ionic. Open up a command prompt (or Power Shell) and issue the following command
npm install -g Ionic
This will install Ionic globally on your system and allow the Ionic commands to be used from the command line
Creating an Ionic application
Now that Ionic has been installed globally, creating the base application will take only seconds using the command line. The Ionic CLI provides a couple templates to create an application, the possible templates are Blank, Tabs, and Sidemenu. Let’s take a look at what these will look like, from the command line, enter the following:
Ionic start myTabsApp tabs
This command will create an app called myTabsApp with the tabs template in place in whichever directory you are currently in.
We can now launch the application as-is by using the Ionic Framework command Ionic serve, this will create a locally hosted version of the application for you much like starting an application in Visual Studio would do.
The tabs application will look like this once ‘served’
As the template name indicated, there are 3 tabs at the bottom of the page which allows you to switch between different pages using provided tabs. If we used Ionic Start to create an app using the sidemenu template, this is what it would look like:
and finally, here’s the blank template which provides the most basic form of the app with of course all the required resource to build out what the other templates provide from the get-go
next, let’s take a look at the different directories that were generated and try to make some sense out of it. Here’s what the structure of an Ionic application looks like:
There’s a couple directories here that control different parts of the application. the www directory is where the actual application is housed and contains all the html, js, css, and image files that your application will use. The resources folder contains items like icons and splace screens for the different platforms you’ll be deploying to like Android and iOS. The plugins directory includes the different ionic and cordova plugins that will help your application feel more native such as the com.ionic.keyboard plugin. The platforms folder contains the code required to build your application for the different mobile platforms and also helps to emulate the app using Cordova’s or Ionic’s emulate CLI commands.
By default, the platforms folder will be empty, in order to add the platforms you want to build for issue the following command
Ionic platform add <platform>
where platform could wp8 (windows phone 8), android, ios, or blackberry. Once a platform has been added, you’ll have the ability to emulate your application for that given platform using the following command
Ionic emulate <platform>
As a heads up though, some extra setup may be required in order to get the emulators to work correctly.