Back to blog home page

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

Posted by on Dec 10, 2014

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:

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.

The AngularJS App

The app has the standard AngularJS structure:

Bootstrapping the App

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

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.

  • Tars

    Would love to sign up and try out Back& – but your signup form is broken :/

    • Tars

      The demo is also not showing up.

    • Renee Chemel

      Hi Tars!

      We are sorry to hear that you were experiencing issues in signing up for Backand. However, we had hundreds of sign-ups during the time that you posted and found that there were no problems with the system. May I ask that you try once again? Just click this link to get to the sign up page: https://www.backand.com/apps/#/sign_up Please know that our support team is always available if you have any further issues.

      Cheers –
      Renee

  • Pingback: Detailed PhoneGap Goodies for Angular – Part 2()

  • Pingback: Air Marty (air_marty) | Pearltrees()