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:
