Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

PhoneGap Goodies for Angular - Part One of Our Holiday Gift to You

DZone's Guide to

PhoneGap Goodies for Angular - Part One of Our Holiday Gift to You

· Java Zone
Free Resource

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

This holiday season we would like to share with you some of the work we have done, this is part one of a three part series, coding apps with PhoneGap and AngularJS for cross-platform development.  These tips will help you avoid common pitfalls in your mobile application development.  We will spread more good cheer in a follow-up blog post with more detailed code snippets (including ones for directives, views, etc.) for PhoneGap and Angular.  Check back soon so you don’t miss out on these holiday goodies.

 PhoneGap

PhoneGap is a well known framework for constructing multi-platform mobile apps using web technologies (HTML, JavaScript and CSS). A Single Page Architecture (SPA) for a PhoneGap app has significant benefits, like making it easy to keep a global context. Asynchronous calls are better handled using such a global context. Transitions between screen switching are therefore performed by replacing views and hence are much faster.

AngularJS

AngularJS is a client-side MVC that has become a prominent framework for SPA.  AngularJS provides two-way data binding between views and models, and view routing using ‘ngRoute’.  You can easily animate app activities such as view transitions using ‘ngAnimate’.

PhoneGap with AngularJS

Marrying PhoneGap and AngularJS for mobile apps  seems natural, especially as AngularJS can enhance for touch with Angular Touch.  For example, PhoneGap interacts with mobile device capabilities such as GPS location using plugins. ngCordova is a set of AngularJS extensions on top of the PhoneGap API that make it easier to build PhoneGap apps with AngularJS.

The Architecture

After putting together several projects,  a common structure evolved for a PhoneGap app using AngularJS and ngCordova.

The ‘www’ folder structure is:

    js
        app.js
        directives.js
        controllers.js
        services.js
        filters.js
    partials
        topbar.html
        bottombar.html
    sass
        style.scss
    css
        style.css
    img
       view1
           img11.png
           img12.png
           ...
       view2
           ...
       ...
    views
       view1
           view1.js
           view1.html
       view2
           view2.js
           view2.html
       ...
    index.html
    bower.json

To avoid cluttering the ‘views’ and ‘img’ folders divide them in correspondence by screens.

The Frameworks

As described above,  you will use AngularJS, ngRoute, ngAnimate, ngCordova, and Angular Touch.

UX Frameworks

In our previous projects we used Foundation, but Bootstrap can be used instead as well. We also used Font Awesome for common icons and Angular Loading Bar to show a spinner and progress bar automatically by hooking into ‘$http’.

Useful Development Tools

To streamline development, we used Bower to include JavaScript dependencies and Sass  to generate the CSS. For more details, see this  post: Useful Tools for PhoneGap Apps.

Bower

Here is a useful ‘bower.json’ including all of the above frameworks.  It also includes others that will be detailed in a follow-up post.

    {
      "name": "myHybrid",
      "description": "PhoneGap mobile App",
      "version": "1.0.0",
      "homepage": "http://yoramkornatzky.com",
      "license": "MIT",
      "private": true,
      "dependencies": {
        "angular": "latest",
        "angular-route": "latest",
        "angular-animate": "latest",
        "angular-touch": "latest",
        "ngCordova": "latest",

        "ngstorage": "latest",
        "taffydb": "latest",

        "foundation": "latest",
        "fontawesome": "latest",
        "angular-loading-bar": "latest",

        "underscore.number": "latest", 
        "underscore": "latest",
        "underscore.string": "latest",

        "validator-js": "latest"
      }
    }

The AngularJS App

The app has the standard AngularJS structure:

    angular.module('myApp', [
      'ngRoute',
      'ngCordova',
      'ngTouch',
      'angular-loading-bar', 
      'myApp.view1',
      'myApp.view2',
      'myApp.filters',
      'myApp.controllers',
      'myApp.services',
      'myApp.directives'
    ]).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.otherwise({redirectTo: '/entrance'});
    }]);

Bootstrapping the App

By hooking to the ‘deviceReady’ event you bootstrap the app:

    var onDeviceReady = function() {
	    console.log("onDeviceReady");
	    angular.bootstrap(document, ['myApp']);
    };
    document.addEventListener('deviceready', onDeviceReady);

Do not use ng-app!!!

The Single Page

The single ‘index.html’ includes the required files in the standard AngularJS way.

Build your Angular app and connect it to any database with Backand today. – Get started now.

Are you using Bitbucket to accomplish your company's mission? Share your company’s mission with #Forthecode for a chance to be featured on our homepage, our social media channels, or win a free t-shirt!

Topics:

Published at DZone with permission of Itay Herskovits, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}