I’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
Settings View (Topcoat Overlay)
**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.
- 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
- 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.
- 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.
About the Author (Author Profile)
Sites That Link to this Post
- Quick Start Guide to PhoneGap+AngularJS | SDK News | June 10, 2013