Book Image

PhoneGap and AngularJS for Cross-platform Development

By : Yuxian E Liang
Book Image

PhoneGap and AngularJS for Cross-platform Development

By: Yuxian E Liang

Overview of this book

PhoneGap is a mobile development framework that allows developers to build cross-platform mobile applications. Building PhoneGap apps is traditionally done using HTML, CSS, jQuery Mobile, Eclipse Editor, and/or Xcode. The process can be cumbersome, from setting up your editor to optimizing your usage of jQuery, and so on. However, AngularJS, a new but highly popular JavaScript framework, eases these tasks with APIs to get access to mobile APIs such as notifications, geo-location, accelerometers, and more. Starting with the absolute basics of building an AngularJS application, this book will teach you how to quickly set up PhoneGap apps using the command-line interface. You will learn how to create simple to advanced to-do lists and add authentication capabilities using PhoneGap's plugins. You will enhance your skills by writing a PhoneGap app using your newly learned AngularJS skills. Furthermore, you will learn about adding animation and interactive designs to your mobile web apps using PhoneGap plugins. By the end of the book, you will know everything you need to launch your app on both Android and iOS devices.
Table of Contents (14 chapters)
PhoneGap and AngularJS for Cross-platform Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a to-do list app using AngularJS on PhoneGap


For this section, we'll start off by transferring the to-do list app from the chapter1 folder to PhoneGap. As you may have already guessed, shifting the to-do list app to a PhoneGap version simply requires the installation of cordova.js. Let's see how this is done in the next section.

A basic version of a to-do list using AngularJS on PhoneGap

Let's quickly get started by shifting the to-do list app from chapter1 to PhoneGap. Perform the following steps:

  1. Change the directory to chapter2 and navigate to www/ where your PhoneGap files are located.

  2. Change index.html to index_concepts.html.

  3. Now, copy the contents from index.html from chapter1 (where the basic HTML structure for todo app resides) to our new index.html file.

  4. Copy todo.js from todo/ in chapter1 to js/ in www/ in the chapter2 folder.

    Your directory should look like this for todo app of chapter2:

    The code directory

  5. So, as of now, your index.html file for this chapter should look like...