Hybrid Mobile Application Development with PhoneGap, AngularJS and Bootstrap

By | May 8, 2015
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

Thanks to the easy availability of brilliant Mobile Application Development frameworks, it has become quite comfortable to come up with remarkable hybrid mobile apps that look great and function in the desired manner. Nowadays, web developers are trying their hands on combining multiple frameworks in order to arrive at an architecture that can serve as the ground base for development of fantastic mobile apps. One such combination that has been embraced by several web developers is that of PhoneGap, AngularJS and Bootstrap.

Hybrid Mobile Application Development

Today, through this post, I’ll be offering you a step wise guideline on using this perfect combination for building commendable hybrid mobile apps.Mobile App using PhoneGap

A closer look at the hybrid mobile app architecture with AngularJS, PhoneGap and Bootstrap

Talking about the architecture built using the combination of PhoneGap, AngularJS and Bootstrap, I would like to put forwards that the presentation layer is being created using the Bootstrap framework (getting started with Bootstrap Tutorial), the app logic/domain is being modeled using AngularJS (getting started with AngularJs Tutorial). This app domain/logic is being further packaged using PhoneGap/Cordova to a native mobile application.
Now, let’s have a look at the different steps associated with creation of a hybrid mobile application using a combination of AngularJS, PhoneGap and Bootstrap.

Step 1- Build an initial app template

Here, you can use the PhoneGap/Cordova CLI. All you need to do is simply execute the below command:

phonegap create appExample com.neojack.appExample AppExample

The above ‘create’ command would require the following three arguments:

  • Firstly, there is a directory name which is required for generation of project. Here, it is “appExample”
  • Secondly, there is a project identifier. Here, it is “com.neojack.appExample”
  • Thirdly, there is a display title of the application. Here, it is “AppExample”

Step 2- Download and install Geolocation plugin

The hybrid mobile app that we are going to build in this tutorial will display current location coordinates and hence for reading these coordinated, it is necessary to install the Geolocation plugin. You can do the same by running the below command:

cordova plugin add org.apache.cordova.geolocation

Step 3- Incorporate the platform to which you want to deploy the mobile application

Here, just go to the app directory i.e. appExample and run the below command for adding iOS as the mobile platform:

phonegap platform add ios

Next, build the example app by running the below command:
phonegap build ios

Do note you can repeat this step for a mobile platform of your choice such as BlackBerry, Android, Windows Phone etc.

Bootstrap is the world’s most popular mobile ready web development framework for HTML, CSS and JavaScript. Bootstrap is for you if you want to quickly build a super cool website which work across devices and browsers. It is easy to learn and super powerful.
Learn Bootstrap by Example

Step 4- Add the Bootstrap and AngularJS files to the mobile app created in the step 3

After having set the mobile platform for the app, just add the Bootstrap(bootstrap.min.css and bootstrap-theme.min.css into appExample/www/css directory) and AngularJS files(angular.min.js, angular-route.min.js etc. to appExample/www/js directory). Now, link all these files to main.html file by adding the below mentioned CSS code the head section:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css" />

Code associated with linking the Javascript files is shown below:

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

Step 5- Now, code the application’s logic

You’ll require angular route config, view and an angular controller for coding the app logic. Code snippet for app.js file is shown below:AngularJS Code

In the above code, I’ve defined angular app and named it as appExample. After that I’ve initated it and defined the ngRoute and ui.bootstrap modules. Also, you can find the onDeviceReady event which is being fired each time the mobile app is loaded. Within this event, the current position of the device can be fetched via a single line of code similar to one displayed below:

navigator.geolocation.getCurrentPosition(app.onSuccess, app.onErr);

In the above code, getCurrentPosition function requires two additional functions viz: one which is called when the current location has been obtained successfully and other one which is called when the current location of device isn’t available.

Displayed below is the success function which will be used for reading the coordinated and binding the same to the angular app i.e. appExample:AngularJS App

Step 6- Define the two views for the hybrid mobile application

Here, you need to define two app views, one for page and other for showcasing location details. Below is the function used for displaying coordinates within the view:

<p class="text-center"> Your location is: <br/>
Latitude: {{latitude}}<br/>
Longitude: {{longitude}} <br/>
</p>

Step 7- Connect the coordinates to view via a controller

The structure of controller will be like this:

appExample.controller('mainController', function($scope, $route){
$scope.latitude = appExample.latitude;
$scope.longitude = appExample.longitude;
});

Step 8- Bind the controller to view via addition of router configuration

The code snippet for the router is shown below:Bind Controller to View

In the above code, router part will define a default url and ‘/about’ url. The former part would bind to main.html view while the latter one would bind to about.html view.

Step 9- Add reference for created files in index.html file

Here is how the references for last created files look like:Hybrid Mobile App

That’s it about developing a hybrid mobile app. Now, you must deploy it to your device for testing purpose. For this, you can either opt for a real device or a simulator.

You are developing a customer web form that includes the following HTML.

<input id=”txtValue”/>

You need to change the HTML markup so that customers can enter only a valid three-letter country
code. Which HTML should you use?

  • A. <input id=”txtValue” type=”country”/>
  • B. <input id=”txtValue” type=”text” required=”xxx”/>
  • C. <input id=”txtValue” type=”text” pattern-” [A-Za-z] {3} “/>
  • D. <input id=”txtValuen type=”code” pattern”=”country”/>

For a complete HTML5 online test and Practice Exams, Click Here.

 Correct Answer: C

Final Words

Combining AngularJS, Bootstrap and PhoneGap in the above explained manner will undoubtedly allow you to come up with stunning hybrid apps that perform excellently on multiple hand-held devices.

Author Bio

Victoria Brinsley is a mobile app programmer for Appsted Ltd – a reputed Android development company. In case, you are willing to avail a detailed information on the same, get in touch.


HTML5 Web/Mobile Developer Jobs [Updated Daily]

Recents HTML5 Jobs

Front End Web & UI/UX Developer - Internship
Source: Indeed
Details: *\*\*Update\*\** As of 1/18/2017 -- 2 of 5 of the team has been filled. Looking for up to 3 more with the right mix of skills and personality. Our goal is a  More
9 days ago

Seattle, WA 10-January-2017

Front-End Developer
Source: Funko
Details: Fluent in the following Languages, HTML5, CSS, JavaScript, PHP, and SQL. Funko is a purveyor of pop culture and licensed-focused collectibles company located in...  More
29 days ago

Everett, WA 98203 22-December-2016

UX UI Web Designer
Source: ZCorum
Details: HTML5, JavaScript, CSS3, jQuery, JavaScript libraries. Experience in developing SaaS applications involving Java backend with HTML5 frontend....  More
25 days ago

Alpharetta, GA 26-December-2016

UX Designer
Source: 1on1 Development
Details: Basic HTML5, CSS3, and JavaScript skills are a plus. 1on1 Development’s mission is to develop powerful technologies that allow businesses to succeed in new ways...  More
30+ days ago

Lakewood, NJ 08701 12-November-2016

Front-End Web Developer
Source: Inside Ventures
Details: Knowledge of PHP, JavaScript, CSS, jQuery, HTML5, RESTful APIs,. As a front-end web developer, you will be responsible for developing, deploying and maintaining...  More
5 hours ago

Overland Park, KS 66212 20-January-2017

UX Designer
Source: Indeed
Details: Experience with HTML5, CSS3, and other web technologies. Come be part of a busy UX team as we create a user experience that is a competitive differentiator for...  More
30+ days ago

Burlington, MA 01803 08-December-2016

Mid-Level Front-End Web Developer & Enablement Engineer
Source: Indeed
Details: Reap Marketing is a conversion optimization company. We are NOT very “corporate”. For those reasons, we’re never satisfied with status quo. Candidate MUST...  More
20 hours ago

Dallas, TX 75226 19-January-2017

Front-end Web Developer
Source: Indeed
Details: Working experience with HTML5, CSS, Javascript, Ruby on Rails and JQuery. TimeSet is looking for an extremely talented developer to help make TimeSet amazing by...  More
23 hours ago

Sarasota, FL 19-January-2017

Front-End Web Developer
Source: Indeed
Details: 3+ years of HTML, HTML5, CSS, JavaScript and jQuery. Front-End Web Developer - US Based*....  More
1 day ago

Boise, ID 18-January-2017

Front-end Web Developer
Source: Indeed
Details: Skilled with HTML5, CSS3, Bootstrap, compiled CSS(Less, Sass). Maintain and extending existing applications (PHP, HTML5 / CSS3 / Bootstrap)....  More
2 days ago

Irvine, CA 92618 17-January-2017

Front-End Web Developer
Source: Nordic Naturals, Inc.
Details: Thorough understanding of web markup, including HTML5, CSS3, and Javascript. The ideal candidate is proficient in using HTML5, CSS3, and Javascript to build...  More
3 days ago

Watsonville, CA 95076 16-January-2017

UI/UX Designer
Source: Unboxed Technology
Details: Know HTML5, CSS3, JavaScript and want to code? Got usability chops and mad design skills?...  More
6 days ago

Richmond, VA 13-January-2017

Front-End Web Developer
Source: Indeed
Details: Front End Development in HTML5 / CSS3 / Bootstrap / JS / jQuery. We are looking to grow an ambitious, outgoing and proactive individual who can assist with...  More
6 days ago

Hartford, CT 14-January-2017

Front End Web Developer
Source: Indeed
Details: HTML5 & CSS3 expertise. ONE400, Inc., is an award winning digital marketing, advertising and product development agency that works exclusively in the legal...  More
6 days ago

Pasadena, CA 13-January-2017

Front-End Web Developer
Source: Indeed
Details: 3+ years of HTML5, Javascript, CSS 2.1/3, AJAX, JQuery. A successful Front End Web Developer will drive innovation by enhancing the customer experience of the...  More
7 days ago

Columbus, OH 43215 12-January-2017

Front End Web Developer III
Source: Envision RX
Details: Advanced skills in HTML5, Javascript, Jquery, CSS, BootStrap, and Responsive design. Front End Web Developer III....  More
8 days ago

Twinsburg, OH 12-January-2017

UI/UX Designer
Source: Array Architects
Details: Basic HTML5, CSS3, and JavaScript skills are a plus. We are looking for a user-experience designer with one to three years of experience to be responsible for...  More
17 hours ago

Conshohocken, PA 19-January-2017

Front End Web Developer
Source: Indeed
Details: Significant development experience with HTML5, CSS3 and Javascript. The Front-End Web Developer works directly with internal staff and clients to develop...  More
10 days ago

Glastonbury, CT 10-January-2017

Front End Web Developer
Source: Indeed
Details: Clarus Group is a veteran-owned management consulting and technology solutions company that believes our employees are critical to our overall success. We  More
10 days ago

Wilkes-Barre, PA 09-January-2017

UI/UX Designer
Source: Indeed
Details: Please have the Job Description and send me your most updated resume. *Experience Level: * Requirements * 7+ years of relevant UI design experience *  More
8 days ago

Columbus, OH 12-January-2017

Front-End Web Developer
Source: Wyatt Investment Research
Details: Proficiency with HTML5, CSS3, Javascript, jQuery, PHP. Seeking a talented Front-End Web Developer with 2 – 5 years of experience....  More
13 days ago

Richmond, VT 07-January-2017

UX/UI Designer
Source: Veterans Sourcing Group
Details: Job Postion : UX/UI Designer Location : Berkeley Heights,NJ Duration : 4 Months Description Consult and collaborate with Subject Matter Experts to create  More
15 days ago

Berkeley Heights, NJ 07922 05-January-2017

UX Designer
Source: Indeed
Details: We want engineers who enjoy working with modern front-end technologies like HTML5, CSS3, JavaScript, JQuery, Bootstrap, React, etc. About the Company*....  More
15 days ago

Alpharetta, GA 05-January-2017

Front End Web Developer
Source: Indeed
Details: HTML5 APIs (e.g. Looking for a front-end web developer to improve existing client websites and develop new web applications....  More
13 days ago

Columbus, OH 43215 06-January-2017

UI/UX Designer
Source: Indeed
Details: Familiarity with HTML5, responsive design and JavaScript• Develop CSS (bonus familiarity with CSS Pre-Processers)• Familiarity with Windows Forms Design (bonus...  More
15 days ago

Omaha, NE 04-January-2017

Top 10 Interview Questions and Answers Series:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest