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

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

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.

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

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 best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

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

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

{{ parent.tldr }}

{{ parent.urlSource.name }}