Creating a hybrid mobile Application with Ionic, Cordova and AngularJS

Nowadays in the realm of hybrid mobile application development there is a variety of available frameworks worth having a look at.

In the following tutorial I’d like to demonstrate the development life-cycle for a complete mobile application using Ionic, Cordova and AngularJS (and others) covering every step from the initial project setup, creating Angular Controllers, Directives, adding Cordova Plug-Ins, running and testing the application in the browser and emulator up to finally running the application on an Android device and assembling files for a release.

Finally I’d like to show some special features from the Ionic ecosystem like the Ionic Cloud and running our applications using the IonView app.

What we’re going to build

The main functionality of our application is to search for articles from my blog at www.hascode.com by a given tag that the user enters into a search field in the first tab of the tabular layout used.

If blog articles are found, they should be rendered in a list displaying their featured image, their title and an excerpt of their content and – of course – they should link to the original article on the website.

In the second tab, some basic information about the plug-in and its author is display .. the classical “about” dialogue.

Mockup of mobile search app

The mockup above gives a first impression of the user interface of our mobile application.

Installing Ionic and Cordova

Since we’re going to build our application with Ionic and Cordova, we should install both first ;)

We need to have nodejs installed – if it’s not installed yet, we should visit the nodejs download site, download and install nodejs - it should take a few minutes only.

Now we’re ready to install Ionic and Cordova using the nodejs package manager (npm):

npm install-g cordova ionic

That’s all for now and we may start with the fun stuff…

Creating a new Project by Template

First of all we need to create a new Ionic project. Luckily for us the console client allows us to bootstrap a new project with ease and in addition we may choose from three available pre-set templates: blank,tabs and sidemenu.

As we’re going to build a tabbed application, we’re using the tabs template as a starting point and doing so we’re able to create our initial project using the following command:

$ ionic start hascode-tag-wizard tabs

This creates a directory named hascode-tag-wizard that contains everything we need including bower configuration, gulp tasks, sample templates, working angular routing and module configuration, separated angular services, controllers and a lot more..

Running the Sample Application in the Browser

At this point all we have is a sample application. To run this application use the following command to start a web-server, start a new browser instance and listen for changes in our project’s file system. If we change files in our project, the browser is automatically reloaded – nice.

$ ionic serve
Running dev server: http://localhost:8100
Running live reload server: http://localhost:35729
Watching : ['www/**/*', '!www/lib/**/*']
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

We should press ‘c‘ here to enable client debugging – it prints the output from console.log() in the application to the console.

If we’re opening the sample application at http://localhost:8100 (or a higher port if 8100 was already in use) it should look similar to this one:

Rendering the sample application in the browser

Now we’re ready to implement our real application.

Enabling the Android Platform

To enable the application for a designated target platform, simply run ionic platform add. I’m using the Android platform throughout the tutorial but I’m positive, that building for the iPhone (with an existing license etc.) or other possible platforms should be working without a problem, too (I hope so).

$ ionic platform add android

Angular Module Configuration

Next we’re doing some basic setup like modifying our index.html to include all style-sheets and scripts we need in their correct order.

The following code shows our index.html. We have added an additional file for our Angular directives named directives.js in there.

Besides this, our navigation bar is added here and we’re referencing our Angular module named hascodeTagWizard that’s going to be created in the next step.

Angular Module Configuration and Navigation Routing

In the following file named app.js we’re specifying our Angular module. Besides some boilerplate code from the Ionic framework, we’re adding our navigation rules in the module configuration to specify link-patterns and their assigned view-templates and controllers.

The search-tab is bound to the SearchController, the about-tab to the AboutController and if a link does not match any rule, the search tab is rendered as a fallback.

Same-Origin-Policy (SOP) and Cross-Origin-Resource Sharing (CORS)

Server Side Response

This is a sample response from my blog (shortened):

[{"title":"A short Introduction to ScalaTest","url":"https://www.hascode.com/?p=980","image":"http
://www.hascode.com/wp-content/uploads/2013/01/infinitest.png","excerpt":"ScalaTest is an excellent
framework to write concise, readable tests for your Scala or Java code with less effort. [..]"},{"title":"BDD Testing with Cucumber
, Java and JUnit","url":"https://www.hascode.com/?p=1162","image":"https://www.hascode.com/wp-content
/uploads/2014/12/cucumber-second-test-in-junit-runner.png","excerpt":"[..]"}]

Search Service

The search service manages the communication to the remote server and returns a promise used by the controller.

Testing the final app in the browser

Running ionic serve again, we’re now able to test the application in a browser.

The result should look similar to this one:

Testing the final application in the browser

Generating App Icon and Splash Screen Images

Another nice feature of the Ionic framework is the possibility to generate the different images in different sizes needed to display the application icon and splash screen for the different target platforms.

Simply add the source image using a format like PNG, Photoshop psd or Illustrator ai files, copy them to the resources directory e.g. replacing the existing icon.png or splash.png and run the following command and the new app icon or splash screen is added to our application:

App Distribution using Ionic.io

Another nice feature of using Ionic is the possibility to upload an application to the cloud, share it there, manage deployments of these applications and install them on our Android/ios Devices using IonView to bypass the registration process in the native application marketplaces.

Sharing Apps

Now that our application is online, we may share the app using the sharing feature as show in the following screenshot:

Sharing Apps with Ionic.io

App Deployment

Another feature is the possibility to switch between different existing versions of our application for deployment.

The following screen-shots demonstrates this feature:

Managing app deployments with Ionic.io

Ion View App

The IonView app allows us to bypass the registration process for our application on the native markets. A user only needs to download the IonView app on Google Play or Apple’s AppStore and may download our application from the Ionic.io cloud.

We should be aware though that this application is still beta and depending on the APIs we’re using in one of our applications we might encounter problems when using this bypass solution – nevertheless it is an interesting solution and I wanted to include it here.

This is a screenshot when running IonView on my Android device with our search app downloaded and installed.

Search app downloaded in IonView

Tutorial Sources

Please feel free to download the tutorial sources from my Bitbucket repository, fork it there or clone it using Git:

This entry was posted
on Sunday, May 3rd, 2015 at 5:52 pm and is filed under Android, Apps, Development.
You can follow any responses to this entry through the RSS 2.0 feed.
You can skip to the end and leave a response. Pinging is currently not allowed.

7 Responses to “Creating a hybrid mobile Application with Ionic, Cordova and AngularJS”

HI, first, thanks for the sample, thanks for the step by step….very useful. The only issues I found:
- The Same-Origin-Policy (SOP) and Cross-Origin-Resource Sharing (CORS), didn’t understood where and how, so I checked your GitHub files and it worked and
- I made all the steps for IOS, adding the platform, and uploaded it to IonicView but on the Ipad I don’t get the search to work, any suggestion?