Saturday 27 December 2014

Creating First Android Application using PhoneGap and AngularJS

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:



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.

14 comments:

  1. 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.

    ReplyDelete
    Replies
    1. Thanks 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.

      Delete
  2. Great explaination. Your all posts wrt. android app development are very much helpful for beginers. It helpmed me a lot. Thanku Narendra

    ReplyDelete
    Replies
    1. Your welcome. Nice to see that my blog is being read and used by users.

      Delete
  3. PhoneGap 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...
    mobile app for event

    ReplyDelete
  4. It is great stuff indeed. I also wanted to ask..is there a way to subscribe to your site via email? Thanks for the sharing..

    Android App Development Training in Chennai



    ReplyDelete
    Replies
    1. Thanks Jasmine...Sure, I will add feature of subscribing this blog by email.

      Delete
  5. Sure..Thanks for the detail Karthik. If I need, I will definitely connect fita.

    ReplyDelete
  6. Hello 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 :)
    AngularJS training Chennai

    ReplyDelete
  7. Excellent information with unique content.It is very useful to know about the information based on blogs. Android Training in Chennai

    ReplyDelete
  8. Hi Narendra,
    Great Work.Very explanation on adding AngularJS capability to PhoneGap project.
    AngularJs Training

    ReplyDelete
  9. 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

    ReplyDelete
  10. Really 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