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

Entry Level Web Developer
Source: Indeed
Details: We are looking for an intelligent, fast learner who can thrive in a high energy, fast-paced environment. The candidate will have an immediate impact to  More
21 days ago

Bothell, WA 03-February-2017

Laravel Developer - Remote
Source: Coalition Technologies
Details: An expertise in PHP, MySQL, HTML5 and CSS3. Our company is devoted to doing the best possible work for our clients and maintaining a fun, thriving environment...  More
2 days ago

Los Angeles, CA 23-February-2017

Entry Level IT Analyst
Source: Indeed
Details: Familiar with HTML5, CSS3, JavaScript. General Help Desk Responsibilities:....  More
30+ days ago

Splendora, TX 27-December-2016

Junior Web Designer
Source: Indeed
Details: Junior level web developer must be familiar with modern design elements including Javascript, CSS3, HTML5. Basic Graphics Design Skills (Photoshop)....  More
25 days ago

Remote 31-January-2017

Engineering Director
Source: American Express
Details: Experience with coding skills across a variety of platforms (including JAVA, HTML5, Oracle, and XML). This highly technical Director of Engineering will lead a...  More
1 day ago

Phoenix, AZ 24-February-2017

Front End Web Applications Developer
Source: Knowledge Anywhere
Details: Proficient in technologies such as HTML5, CSS3, XML, JSON, AngularJS, Bootstrap, and JQuery. Knowledge Anywhere is an industry leading developer of corporate...  More
3 days ago

Bellevue, WA 98004 22-February-2017

Full Stack Web Developer
Source: Indeed
Details: HTML5 / CSS3 / SCSS. Opportunity to play with a modern Microsoft-oriented web stack (C# 7, Typescript, ASP.NET MVC, EF/LINQ, React/Redux, HTML5, Sass, VS2017,...  More
3 days ago

Seattle, WA 22-February-2017

Front End Web Developer
Source: Indeed
Details: 3+ years working in Javascript/Coffeescript, HTML5, CSS3, SASS. RAM Mounts is a leading manufacturer of rugged mounting solutions for mobile electronics in any...  More
3 days ago

Seattle, WA 21-February-2017

Web UI Developer (AngularJS/ JSON)- Only W2 fulltime/ contract
Source: Indeed
Details: *Web UI Developer* *Redmond, WA* *12-18 Months* *Description: * * Building out UI for an updated internal data management system based on the UX Designs,  More
10 days ago

Redmond, WA 15-February-2017

Web UI Developer
Source: Brillio Inc
Details: Brillio is bringing the future of technology consulting to consumer focused industries including Financial Services, Retail, CPG, Utilities and Technology &  More
11 days ago

Redmond, WA 14-February-2017

Back-End Web Developer
Source: Indeed
Details: Comfortable jumping in and helping out with basic HTML5/ CSS tasks. \*Local Greater Seattle Area Applicants Only Please*....  More
9 days ago

Seattle, WA 98101 16-February-2017

Junior Web Developer
Source: Indeed
Details: Understanding of current web markup, including HTML5 and CSS3. BS/MS in Computer Science or relevant field....  More
2 days ago

Oceanside, CA 22-February-2017

.NET/C# Web Developer
Source: Indeed
Details: Translate designs into viable HTML5 and imagery for the websites. PHP, Microsoft SQL Server, MySQL, Apache, HTML5 and relational database design to development...  More
10 days ago

Seattle, WA 15-February-2017

Front End Developer
Source: Intel
Details: 3+ years of development experience with strong working knowledge of JavaScript, HTML5, CSS and some server side programming languages such as JAVA, groovy, etc....  More
9 days ago

Raleigh, NC 27616 16-February-2017

AngularJS Front-End Developer - - Chicago, IL
Source: Avanade MY
Details: Hands-on and highly experienced with HTML5. At Avanade we create change for a living, and joining us is your chance to do the same....  More
10 hours ago

Chicago, IL 25-February-2017

Front End PHP/Wordpress Developer
Source: Victory Media
Details: Must have solid knowledge of MySql, HTML5 and CSS3. Frontend PHP/Wordpress Developer....  More
16 hours ago

Moon, PA 25-February-2017

Shopify Front-End Developer
Source: Art Version
Details: Knowledge in HTML5, CSS3, jQuery, and Bootstrap framework is a big plus. ArtVersion is seeking a Shopify Front-End Developer with 1-3 years of experience....  More
16 hours ago

Chicago, IL 25-February-2017

VB.NET Software Engineer
Source: Principle Solutions Group
Details: VB.NET Software Engineer 6 month to hire $35.00-$50.00hr + Includes Health, Dental, Vision, and 401k Benefits Cincinnati, OH Principle Solutions Group...  More
3 days ago

Cincinnati, OH 22-February-2017

UI Front end Developer(angular JS and react JS )
Source: Sonsoft Inc
Details: At least 3 years of experience in Web Content Management (WCM) Tools and technologies like Node.JS, AngularJS, HTML5, jQuery, CSS/CSS3, JSON and other web...  More
1 day ago

Charlotte, NC 24-February-2017

Front-End Developer
Source: DiscoverOrg
Details: Why You Should Join DiscoverOrg DiscoverOrg is a great place for you to gain real-world experience with a hot, hyper-growth, cloud-based technology company. We...  More
1 day ago

Vancouver, WA 23-February-2017

UX Front End Developer
Source: Anthem, Inc.
Details: Demonstrated ability with HTML5, CSS, SASS, JavaScript, AJAX, and Web Services. At Anthem, Inc., it’s a powerful combination, and the foundation upon which we...  More
2 days ago

Atlanta, GA 30319 23-February-2017

Front End Developer
Source: Verizon
Details: Experience/knowledge of developing applications using Java/J2EE and Web technologies such as JavaScript, Web Services, MVC, XML, JSON, HTML5, CSS3, Responsive...  More
2 days ago

Ashburn, VA 20147 22-February-2017

Front End Developer
Source: HUB International
Details: Experience in front-end development using HTML5, jQuery, CSS, AngularJS, Saas, Bootstrap, and other front end frameworks Experience. HUB....  More
2 days ago

Chicago, IL 60604 22-February-2017

Front-End Developer
Source: Turbonomic
Details: Expert in all aspects of HTML5 and single-page web-apps and frameworks. As a front-end developer, you will directly impact the next-generation of our product....  More
30+ days ago

Manhattan, NY 11-December-2016

Front End Developer
Source: WorkWave
Details: Are you passionate about building awesome technology? We are looking for a passionate and smart Software Engineer focusing on front-end development to join  More
3 days ago

New Jersey 22-February-2017

Top 10 Interview Questions and Answers Series:

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