AngularJS on PhoneGap

AngularJS can be integrated into PhoneGap just the way  into web application. And this tutorial is based on tutorial “PhoneGap first-trying to build an Android App”. So suppose we have already created a simple hello application using PhoneGap, and we would like to use AngularJS to show a message in index.html, and dynamically alter content of message.

1. Add AngularJS library. AngularJS should be download at https://angularjs.org. And then go to the directory “hello/www” to create a sub-directory “lib/angular”, then move the downloaded “angular.js” into “lib/angular”.

2. We need to create the app module and controller for our application. To do this, create a file “app.js” under the folder “www/js”, and copy the code into “app.js”:

Image“hello” is the name of module, while “HomeController” is a simple controller of module “hello”, to set the variable “message” to “AngularJS!”.

3. In order to show value of “message” in pages, we need to modify index.html. First, include js/app.js and lib/angular/angular.js into index.html.

Image

Image

Then, add <html> with attribute “ng-app” to specify the module we defined in app.js:

Image

And add a “div” in tag <body> with the following content:
Image

ng-controller specifies the controller of this div, which is HomeController, as we declared in app.js. And {{message}} is used to show value of “message”, while ng-model=”message” can connect the variable message with the value of the tag input.

4. Rebuild the project in command line with “cordova build”, and run it on Android device. You should see a message “hello, AngularJS!”. And while you change value in the input text box, the message changes correspondingly.

Image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s