Quick Start Guide to PhoneGap+AngularJS

June 10, 2013By 85 Comments

Phonegap-Logo-SimpleI’ve created a sample mobile application to help developers get started building mobile applications with PhoneGap and AngularJS quickly. The sample application includes view navigation, some standard user interface components and code to help avoid common pitfalls in mobile application development (click delays etc).

Below are a few screenshots showing parts of the application. It basically includes a header and a scrollable mobile list of different PhoneGap API samples to try out.

Main App View showing Topcoat Navigation Bar and List

ang-pg2

Settings View (Topcoat Overlay)

ang-pg1

Other Views

ang-pg4

ang-pga

Libraries Used

UPDATE

**Updated the above list to remove fastclick.js and replace with using the ngMobile module from angular-mobile.js (new in angular versions => 1.14). angular-mobile.js includes the fastclick.js code by default and in version 1.1.5 also includes directives for ngSwipe (left and right). I added an example of how to use the ngSwipe to the homeView.html so when you swipe the version left it will display a URL and on right swipe will show the version again.**

The sample application can be found here on my github account. The best approach would be to create yourself a new PhoneGap project for iOS using the command line tools and then just replace your www folder with mine.

Important Notes

  • The sample application includes a simple example of using an AngularJS directive and filter and value service to show the version as well as a bunch of controllers and routes to check out.
  • Make a point to read this post by Brian Ford regarding PhoneGap and AngularJS. My sample application is simplified purposely but this posts discusses why you would want to bootstrap AngularJS or use something like his cordovaReady wrapper to avoid potential timing issues in your actual application. I will actually be posting a more advanced version of this application that uses his services for phonegapReady, geolocation, accelerometer etc as well, but here are the links to the projects on his github account if you want to look into them yourself:
  • I changed the setting for DisallowOverscroll to prevent the rubber band bounce effect in your application via the config.xml file.
  • This project includes the fastclick.js library to avoid the problem with click delays on mobile. It’s implemented in the index.js file onDeviceReady with the following line
    new FastClick(document.body);
    
  • I left some code commented out in the index.js which shows how you could bootstrap AngularJS onDeviceReady to also avoid potential timing issues if you choose to do that over the service wrapper noted above.
  • Be aware of the mobile-view tag in the index.html which is used in place of the Angular ng-view to allow us to use the AngularJS mobile navigation framework for navigating between views with slide transitions. There are preset transitions out of the box to support slide and modal and it also keeps track of history. You can add your own custom transitions as well. Find more details in the readme on the github site. If you run my sample application you will see the slide used for each PhoneGap API sample list item and the modal used when you click the home button from any of the views.
    <mobile-view/>
    
  • My sample application includes an example of the Topcoat overlay in effect when you click the settings button. It just shows a simple popup to give you an idea of what you could do with it. It may not be in the latest version of the Topcoat download, but you can get it separately here or in my sample.
  • There’s an open source set of icons from Topcoat you should also be aware of located here. They’re .svg files and you can get an idea of how to use them in your CSS by checking out the index.css in my sample where I have defined the settings and home icons.
  • I included a sample of how to setup a fixed region for scrolling in the geolocation API sample. Just check out the definition for the .scroll class in the index.css to see details.

Filed in: Adobe Flash PlatformAngularJSCordovaMobile DevelopmentPhoneGap Tags:

About the Author ()

Comments (85)

Trackback URL | Comments RSS Feed

  1. Nicholas says:

    Hi! Thanks for making this.
    I just wanted to let you know that I noticed that the /www/libs/ folder is missing from github. I look forward to being able to try out this sample app.

  2. Patrick says:

    Thanks for creating this demo. I’ve been wanting to showcase Angular and Topcoat to my team members. This is perfect!

  3. Braden Shepherdson says:

    If you’re using Angular >= 1.1.4, it contains the new ngMobile module. Including this module in your app replaces the implementation of ng-click with a fast click-ready version for touch devices. (It works with ordinary mouse clicks too.)

  4. Pieter says:

    Thanks for the demo.

    I was reading through the code and was wondering why u didn’t use the services. But reading your post again i saw that i have to wait for that ;-)

    But its just a case of injecting the service into the controller right ?

    function AccelerCtrl($scope,accelerometer) {
    accelerometer.getCurrentAcceleration(function (acceleration) {
    $scope.acceleration = acceleration;
    }, function (e) {
    console.log(“Error finding acceleration ” + e)
    });
    }

    • Hi Pieter! Yes, that’s exactly right. So in your services you would have something this (based on Brian’s wrappers mentioned in my post):

      myApp.factory('accelerometer', function ($rootScope, phonegapReady) {
          return {
              getCurrentAcceleration: phonegapReady(function (onSuccess, onError) {
                  navigator.accelerometer.getCurrentAcceleration(function () {
                      var that = this,
                          args = arguments;
      
                      if (onSuccess) {
                          $rootScope.$apply(function () {
                              onSuccess.apply(that, args);
                          });
                      }
                  }, function () {
                      var that = this,
                      args = arguments;
      
                      if (onError) {
                          $rootScope.$apply(function () {
                              onError.apply(that, args);
                          });
                      }
                  });
              })
          };
      });
      

      And inject and use that service in your controller just as you had.

      I had actually done it this way in my original sample app but decided to first put out a more simplified version that would be less overwhelming the first time seeing it and focus on the PhoneGap APIs themselves, then see why you might need or want to use this services approach after understanding the basic concepts. Hope that makes sense :)! Holly

  5. Casey wise says:

    Thank you so much for posting Holly. I’ve ripped a few PhoneGap apps (with my own Hackabilly JS development, um, pattern) and have been chomping at the bit to get me some of that Angular. Thanks so much for putting this posting together, I’ll be back very shortly to consume all of this Angular/PhoneGap goodness!

  6. Louis Haußknecht says:

    Great!

    I’ve played around with PhineGap, Angular and Twitter Bootstrap. But Topcoat looks like a better fit for mobile!

  7. AlesH says:

    Thanks for the post, it is what I exactly looking for. But works it to somebody on Android? I tried it, angular is running, but Phonegap API is not triggered.

    • Abdullah Bakhach says:

      Hey Holly,
      I second AlesH.. I ran the code on android.. but for some reason none of the phonegap api’s were triggered! I also read brian ford’s article and saw that you included the phonegapReady business, but that didn’t help either..

      can you test your code on android and upload the code for that as well? I ran your code on Xcode and it worked fine on iOS.. but not android :(

  8. thanks for very nice post.Mobile developers can easily building application with phonegap & Angular.

  9. Sean McAuliffe says:

    Thanks for this very useful post and project. I recently did the same thing you just did on a project I’m working on (phonegap/angular). We had been using FastClick but then brought in the ngMobile module and removed FastClick. It appears to me that FastClick covered any click event, while ngMobile only works on elements using ng-click. In our project, we use some a tags with hrefs, and also have custom directives where we’re binding to the ‘click’ event, and these don’t seem to benefit from either the 300ms delay elimination or the addition of the ng-click-active class. So now I’m wondering if I should keep fast click, or rethink how some of our stuff is implemented.

    Just curious if you noticed this and have any opinion on the matter. Thanks.

    • Hey Sean! That actually sounds like it could be the case, though I haven’t played around with it much to see how else it could be handled yet. Maybe there’s another way to bind that will still use ngMobile code. I will let you know if I see something or have any other ideas when I take a look. Thanks! Holly

  10. Pete says:

    Holly have you had any luck using AngularJS routing inside a PhoneGap app? I’m really struggling to get it to work as the paths inside PhoneGap are served with the file:// protocol.

    Have you tried anything with routing?

  11. Pete says:

    Ah ignore my previous comment (if it get approved anyway) this tutorial is perfect! I’ve got an AngularJS + jQuery Mobile project and it’s been a real pain.

    I’ve just ripped out jQM and dropped in angular-mobile and mobile-nav and it’s so much better already.

    Thanks Holly!

    • Hey Pete! Great to hear, sounds like a good approach :). Let me know if you find other useful things to add during your development process that others might want to know about. Thanks! Holly

  12. Luc says:

    Hi!

    I have tried your sample and It doesn’t work in the windows phone 8 emulator :( I also have tried running angular+phonegap sample of other people and nothing works! Besides, I have tried the seed app project template from the AngularJS and the partial views haven’t worked properly.

  13. Danny says:

    Holly, thanks for the great sample app! I was trying to get started with your app but I cant seem to get the routing working at all… I simply created a new project based on Windows 7 PhoneGap template in VS and then tried to load your www into the template’s. When I run the page I see nothing, and it appears to be due to the routing not properly registering.

    Do you have any suggestions?

  14. Danny says:

    I am not getting any errors that I can see from the visual studio win 7 debugger output windows, and strangely enough the app does seem to run ok in android (although certain functions didnt appear to work exactly as expected or views render as expected). Is any of the html or code in the www folder iphone specific and that be what is causing the issues I am see’ing? I am developing against win 7 simulator in vs 2012 and deploying to a android phone.

    • Phil says:

      I’m guessing you’re having the same error I’m having below.
      In my case though all I see is a black screen. It is unable to load my views because of ajax domain restrict]ions.

  15. Phil says:

    I get this error:
    XMLHttpRequest cannot load file:///D:/Dev//partials/homeView.html. Cross origin requests are only supported for HTTP.

    So apparently we can’t Ajax in a new file without using the http:// syntax, hence needing a webserver. I’m curious how anyone else got this to work…

  16. Jacob says:

    Anyone tried this since Apple Developer-ocalypse? I only have the possibly buggy version 7 of the iphone simulator on my machine.

    Since the developer authentication for xcode doesnt seem to be working, I can’t download older versions through the program.

    Is it possible to run a phonegap app, built with the CLI, in a browser with a tool like Ripple helping display different devices?

    Possibly just a rant,

    Jacob

  17. Sam Tsai says:

    Hi,

    Thanks for the post and the xcode/android projects.

    I’ve been wrestling with getting any sort of routing with partials to work in my xcode/android projects. My app works on a local web server but when I build in xcode or android studio I get blank screen. My index.html is like yours where it just has a tag that pulls in data from a templateUrl but I’ve been unable to get any data showing!

    Do you know if you ran into any issues with the actual Cordova/Phonegap setup? I’m using Phonegap 3.0 and Angular 1.1.5.

    • Hi Sam, did you check to make sure any external URL’s used in your PhoneGap application are whitelisted? Do you see any messages written out to the console when you try to run it in XCode or Android Studio? Holly

      • Sam Tsai says:

        Hi Holly,

        Thanks for the reply. Strangely / fortunately I got it to work late last night.

        The whitelist file was fine and there were no errors in the console for either xcode or android.

        Honestly, I’m not sure what made the difference. I know that I had an issue on my end where I wasn’t copying over the partials into the final www build folder. (I have my app setup where src is in an ‘app’ folder and public is in ‘www’ folder). But when I fixed that, that didn’t solve my issue.

        I started to play around more with the home page and just add in text along with the “mobile-view” to see if that was loading in correctly and once I did that, I started to see my partials loading in.

        I’m still a little confused at what the issue is, and if I do find out more I’ll be sure to share.

        Thanks!

  18. Pete says:

    Hi Holly,

    I’ve got Angular Mobile and Mobile-Nav integrating nicely into my app now, thanks to this post.

    But I’ve got a really weird problem that I’m having trouble diagnosing. When my home view loads I’m triggering an AJAX call to an API in the background, and showing a loading spinner in my app.

    But the API call never completes, until I click a link and a new view slides into place. Testing in Chrome I can see in the console that very shortly after the new view is loaded (via Mobile-Nav) my AJAX call completes, but it’s no use as the UI has changed.

    All my AJAX calls are being blocked until I move to another page – like they’ve downloaded in the browser but some how the navigation is blocking the response.

    Does that make any sense? Can you or anyone else think of a reason why that might happen?

    Thanks,
    Pete

  19. david broscious says:

    Holly,

    Thanks for the demo app. I pulled it yesterday and explored it. It’s incredibly useful as a reference!

    Here’s my situation/question: When I comment out the two lines in index.html to test in browsers


    <!–
    –>

    The homeView.html partial renders without incident in Safari 6.0.5 and Firefox 24 (beta), but not in Chrome 28.0.1500.95, Chrome Canary 31.0.1605.0 or Opera 15.0.1197.153.

    Best first guess is that it’s working in WebKit browsers but not Blink browsers. Does that make sense to you?

    From what I see in the consoles of the various browsers: (1) There are some CSS issues in topcoat, mobile-nav and index; and (2) there’s a cross origin request issue.

    I want to support topcoat (it’s a great concept)

    My main concern is that angular won’t work Blink browsers, but that doesn’t make any sense and doesn’t seem to be the case.

    Now my main concern is the old concern browser splintering. I just checked Android’s current SDK and confirmed that WebView is still using WebKit. Any idea if/when Android would switch to Blink?

    Thanks again for the reference app and for any insight.

    David

  20. Philip says:

    Any chance of seeing a angular+requirejs+phonegap implementation? Do you know of one in github maybe that already exists?

  21. Rodrigo zurek says:

    Hey holly, i had trouble making your code work on phonegap 2.9.0 so i forked your project and fixed it to work here is the repo if you want it for newcomers: https://github.com/kazpsp/phonegap1

    • Sal says:

      Hi Rodrigo,

      What really you fix it. Was it just config.xml file you have changed ? or there was something else as well.

      Regards,
      Sal

  22. Hemant Thakkar says:

    I have tried the project from scratch using AlesH’s instructions above for Android without any luck. The app builds and installs fine on the emulator and the buttons on the home page (Notification,…) work fine but none of the features (Alert, Beep, …) work.

    Interestingly, console.log works in app.js callback but does not work in the controllers code. For example, the following code does not work.

    function HomeCtrl($scope,navSvc,$rootScope) {
    console.log(“DEBUGHT HomeCtrl”); // No effect

    }
    Does not log it. However the following does.

    function HomeCtrl($scope,navSvc,$rootScope,$log) {
    console.log(“DEBUGHT HomeCtrl”);// No effect
    $log.info(“DEBUGHT2 HomeCtrl”); // Works

    }

    Wondering if others have run into similar issues and solved it.
    Thx.
    Hemant

  23. Roger says:

    Anyone else having trouble with backgrounds of views using topcoat. If you remove list items on the first page and view the other pages you can still see those pages in the background…. i’ve tried to fix this problem with no luck any help will be appreciated..

    Thanks

  24. Hi Holly,

    I am using phonegap v3.0.0-0.14.3 and pulled your sample phonegap app from git://github.com/hollyschinsky/MyAngularPhoneGapProject.git. I am not finding that simply swapping the /www folder from this location into my /www folder works. For starters, the sample app provided by phonegap uses a file called ‘cordova.js’, whereas your sample app has ‘cordova-2.7.0.js’. I tried replacing this file in your sample app with the latest from phonegap and things kind of worked, but it looked like a lot of stuff was broken. Is it possible that what Rodrigo zurek says above and your sample is now out of date with the latest phonegap release? I’m hoping to start my project off on a clean footing, so I thought I’d ask.

    Thanks!

  25. Rasor says:

    ngMobile has ben renamed to ngTouch.

    To migrate, please replace all references to “ngMobile” with “ngTouch” and
    “angular-mobile.js” to “angular-touch.js”.

    https://github.com/angular/angular.js/commit/94ec84e7b9c89358dc00e4039009af9e287bbd05

  26. Patrick Haggood says:

    Is there a way to animate page transitions in a mobile-like manner without having to add a slidePage() function in each of my controllers? I’d like to have links in my ul-li elements to open the detail page for each item in the list.

  27. christian says:

    If you have Problems to run Notifications, Geolocation, Acceleration etc., you could imported the wrong Cordova JS File. Holly use an old cordova-2.7.0.js file. Try a newer cordova.js file for Phonegap >= V2.9.

    • Yes that’s true Christian, this project was written a few months ago so you can refer to a newer version of cordova… I will get around to updating this as soon as I can with a 3.0 or greater version to make sure it all works ok. Thanks! Holly

    • Jim says:

      Had this exact issue, thanks. and thanks Holly for making this

  28. Adobe is graciously helping out the AngularJS Ottawa Group by providing a location for the October 9 workshop.

    http://www.meetup.com/AngularJS-Ottawa/events/136401552/

    A lot of people are using AngularJS with PhoneGap nowadays. Looking forward to seeing where this goes.

  29. jon anthony says:

    Love this blog very big thanks!!!
    I am getting a white flash at the end of transitions with an iPhone 5. I wondered if anyone has seen this and maybe found a solution?

  30. jon anthony says:

    My app has a navigation and main section. To help with different hardware I have the sizes in percents – so in my case the nav is 10% and the main is 90% and there are no margins or padding that could push anything over 100%. Inside the main section, overflow-y is set to scroll, but the header and main themselves are both set to overflow hidden. So I have nothing that can push outside the main area (originally by main section was too long ) – hope this helps you

  31. Ade says:

    Hi, Can you please provide the .apk or .ipa file.. I am looking for a sample application that is readily installable on a phone .. . I don’t have any developer tools to build the app myself..

    it would be gr8 if u can provide a link to download the .apk or .ipa files.

    thanks in advance,
    ade. s

  32. Joao Grassi says:

    Thanks for the article!

    I’m starting my app using phonegap + angularjs + topcoat. I’m having some problems like, my android targer is 2.3 and It seems that this version doesn’t super SVG. So the icons don’t work. Is there a way to fix this? Or how to use the png ones? Thanks!

  33. marc rovira says:

    Hi! I’m trying to run the App with the new angular v1.2.1 but nothing happens, I just see the dark background without any list item. What I’ve done is replacing angular files (angular.min.js and angular-touch.min.js) as well as replacing ‘ngMobile’ for ‘ngTouch’ in app.js.

    Am I missing something else?

    thank you!

  34. dsimard says:

    Even though the post is not that old (6 months old), a lot have changed since then!

    I created automated tasks with grunt.js to help with angular and phonegap 3.1 development : https://github.com/dsimard/grunt-angular-phonegap

    Just follow the instructions in the “getting started” section.

  35. Laszlo Varga says:

    Hey Holly,

    from time to time I run into your site and usually I find here exactly what I was looking for!

    Thanks :)

    Cheers:
    Laszlo

  36. Jeff Thompson says:

    I’m in the same boat with Android. Nothing works. I verified all the permissions are added to AndroidManifest as below. but regardless nothing at all gets triggered. I _really_ want to use angular for my MVC and need phone-gap, but I can’t get anything going with android. what am i missing?

  37. Jeff Thompson says:

    I tried doing the entire procedure step by step over again. Actually did it 2 times. Still, on android, none of th e phonegap APIs are triggered at all. Further there is nothing useful at all in the ADB logs. What am I missing here ? Has anyone successfully followed this procedure and actually had anything work on Android? It’s as though there is no connection at all between the webview UI and the native APIs. no logging messages at all when i hit any button.

  38. Basti says:

    Hello, I think it looks like the best sample in the web so far and I really want to get it working. But like Jeff I tried several times to run the native APIs, but no chance. Animations and transitions are very smooth, but no API is called at all. Permissions, even VIBRATE was set automatically. Is there any solution? I’m really looking forward to play around with this beautyful app. Thank you!

  39. Basti says:

    Unfortunately I tried it like Jeff several times, but only the UI is working nice. No API call at all. Is there a solution? This is the best quick start I found so far in the web an I really looking forward to play around with the code, so has anyone help to get this working? Thank you!

Leave a Reply