In this post, I will be showing how you can create your first android application using PhoneGap and AngularJS. First of all you have to follow my another post to setup PhoneGap framework and create first android application using PhoneGap. Once you are done with creating your first application using PhoneGap, you can follow this post to add AngularJS capability to your created PhoneGap project. Adding AngularJS capability to PhoneGap project is pretty much simple.
If you would like to see the steps in video, you can refer my video attached below:
You can follow below steps:
OR
You can follow below steps:
1. Download AngularJS zip from here and extract it. Extracted directory structure should look like below. While writing this project I downloaded Angular-1.3.8.
2. Now it's time to add AngularJS features into PhoneGap project. Create 'lib/angular' directory under below directory. Notice that, below directory structure is the structure of PhoneGap project which is imported into Android Studio.
<WorkSpace>\<ProjectName>\<ModuleName>\src\main\assets\www
Copy all selected *.js files (mentioned as selected in above image) from extracted AngularJS directory to created directory 'lib/angular'.
3. Now create app.js file under below directory.
<WorkSpace>\<ProjectName>\<ModuleName>\src\main\assets\www\js
app.js
var nvhybridandroidapp = angular.module("nvhybridandroidapp", []);
nvhybridandroidapp.controller("MyController", function ($scope) {
$scope.message = "Welcome to first android app built using PhoneGap and AngularJS";
});
|
4. Change index.html file to add greed marked text:
<WorkSpace>\<ProjectName>\<ModuleName>\src\main\assets\www\index.html
<script type="text/javascript"
src="cordova.js"></script>
<script type="text/javascript"
src="js/index.js"></script>
<!-- Adding Angular specific java script files -->
<script
type="text/javascript" src="lib/angular/angular.js"></script>
<!-- Adding created app.js file -->
<script
type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<!--Configure ng-app to bind html to the var created in app.js-->
<html ng-app="nvhybridandroidapp">
<head>
<meta
charset="utf-8" />
<meta name="format-detection"
content="telephone=no" />
<meta
name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />
<link
rel="stylesheet" type="text/css"
href="css/index.css" />
<title>Hello
World</title>
</head>
<body>
<!--Configure ng-controller to 'MyController' defined in app.js-->
<div
class="app" ng-controller="MyController">
<h1>Apache
Cordova</h1>
<div
id="deviceready" class="blink">
<p class="event
listening">Connecting to Device</p>
<p
class="event received">Device is Ready</p>
</div>
< !--Print the message variable defined in app.js-->
<h1>Message:
{{message}}</h1>
< !--Bind message variable (defined in app.js) with input element -->
<input type="text"
ng-model="message"/>
</div>
</body>
</html>
|
You can refer below image to visualize above 2,3,4 steps:
5. Changes are done. Now you are pretty much ready to run your application. Once you run the application, your running application in AVD (emulator) looks like below.
If you are able to see the running application on emulator with given message, I would say congratulations !!. You have created your first android application using PhoneGap and AngularJS.
If you want to refer sample project, you can refer from GitHub.
Below are my other posts related to Android Application Development:
I'm very impressed with this blog in the way it manages to cover the main topics developers will want to learn about when getting started with developing for mobile. Even though the title of the blog indicates its targeted for Android application development, most if not all of the code discussed works perfectly fine for cross compilation with phonegap and angular JS.
ReplyDeleteThanks so much for the comment. I try to put together my learning and experiece in terms of blog and feel great if this helps others.
DeleteGreat explaination. Your all posts wrt. android app development are very much helpful for beginers. It helpmed me a lot. Thanku Narendra
ReplyDeleteYour welcome. Nice to see that my blog is being read and used by users.
DeletePhoneGap and AngularJS are the very popular tools for making app. The steps you have mentioned are very simple & easy to understand & by following these steps young developers can learn alot...
ReplyDeletemobile app for event
Thanks Mark.
DeleteIt is great stuff indeed. I also wanted to ask..is there a way to subscribe to your site via email? Thanks for the sharing..
ReplyDeleteAndroid App Development Training in Chennai
Thanks Jasmine...Sure, I will add feature of subscribing this blog by email.
DeleteSure..Thanks for the detail Karthik. If I need, I will definitely connect fita.
ReplyDeleteHello Narendra, I have been training students on AngularJS for past 6 months, and at times, I have used your blog as reference for the class training and also for my personal project development. It has been so much useful. Thank you, keep writing more :)
ReplyDeleteAngularJS training Chennai
Excellent information with unique content.It is very useful to know about the information based on blogs. Android Training in Chennai
ReplyDeleteHi Narendra,
ReplyDeleteGreat Work.Very explanation on adding AngularJS capability to PhoneGap project.
AngularJs Training
Quality articles is the important to attract the people to pay a visit the website, that's what this web site is providing. This is wonderful information. Loved reading it. Thank you for sharing. Massage spa therapy Edmonton | kayakama.com
ReplyDeleteReally great post, Thank you for sharing This knowledge.Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up! best hair vitamins for faster hair growth
ReplyDelete