Phonegap and AngularJS
– A Getting Started Guide
Set up Android Environment
● Install Apache Ant http://ant.apache.org
● Download ADT from http://developer.android.com/sdk...
Set up iOS Environment

● Download and install Xcode
● Run Xcode and accept the license

agreement.
Set up NodeJS

● Download NodeJS from http://nodejs.org
● Install NodeJS in /usr or /usr/local
● Check if NodeJS is workin...
Install Cordova

● Install Cordova using npm (Node Package
Manager)
– sudo npm install cordova -g
Create Cordova Project

● cordova create CordovaDemo
com.neevtech.cordovademo
● cordova platform add android

● cordova pl...
Add Necessary Plugins

● cordova plugin add
org.apache.cordova.device
● cordova plugin add

org.apache.cordova.geolocation...
Setting up Jquery & Bootstrap 3
● Download bootstrap 3 from
http://getbootstrap.com
● Add bootstrap.min.css to www/css
● A...
WWW Folder
Set up AngularJS
● Download AngularJS from http://angularjs.org
● Download angular-routes

http://code.angularjs.org/<angu...
WWW Folder
Modify Index.HTML to add CSS and JS
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

<html ng-app=”cordovaApp”>
<head>
<meta charset...
Add Phonegap Module
● Add Phonegap module from
https://github.com/mstaessen/angular-

phonegap/blob/master/src/PhoneGap.js...
Create app.js in www/js and Add to index.html
●
●

'use strict';
var cordovaApp = angular.module('cordovaApp', ['ngRoute',...
Create HTML Files
● Create partials folder under html
● Create welcome.html under partials
● <div class="jumbotron">
● Wel...
Create Super Controller

● cordovaApp.controller('SuperController',
●

function SuperController($scope,
$location, PhoneGa...
Creating WelcomeCtrl
● cordovaApp.controller('WelcomeCtrl',

●
function WelcomeCtrl($scope, $location, PhoneGap) {
●
$scop...
Create Login html
● Create login.html in partials folder.
● <form role="form">
● <div class="form-group">
● <label for="ex...
Create LoginCtrl
● cordovaApp.controller('LoginCtrl',
●
●

function LoginCtrl($scope, $location, PhoneGap) {
$scope.showVa...
Add Controller Links to index.html
Cordova Build

●cordova build android

●cordova emulate android
Yippie!!
The supporting code
is available here.
About Neev
Web

Mobile

Magento eCommerce
SaaS Applications

Video Streaming Portals
Rich Internet Apps
Custom Development...
A few Clients
Partnerships
sales@neevtech.com

Neev Information Technologies Pvt. Ltd.
India - Bangalore

India - Pune

The Estate, # 121,6th Floor,
...
Upcoming SlideShare
Loading in …5
×

Phonegap and AngularJS

3,979 views

Published on

Phonegap and AngularJS – A Getting Started Guide

Published in: Technology

Phonegap and AngularJS

  1. 1. Phonegap and AngularJS – A Getting Started Guide
  2. 2. Set up Android Environment ● Install Apache Ant http://ant.apache.org ● Download ADT from http://developer.android.com/sdk/installing/bundle.html ● Configure $PATH to include – <adt_path>/tools – <adt_path>/sdk/platform-tools – Apache ant ● Run Android from command line ● Download API 19 ● Create atleast one AVD http://developer.android.com/tools/devices/managingavds.html
  3. 3. Set up iOS Environment ● Download and install Xcode ● Run Xcode and accept the license agreement.
  4. 4. Set up NodeJS ● Download NodeJS from http://nodejs.org ● Install NodeJS in /usr or /usr/local ● Check if NodeJS is working ● 'node' and 'npm' should be working
  5. 5. Install Cordova ● Install Cordova using npm (Node Package Manager) – sudo npm install cordova -g
  6. 6. Create Cordova Project ● cordova create CordovaDemo com.neevtech.cordovademo ● cordova platform add android ● cordova platform add ios
  7. 7. Add Necessary Plugins ● cordova plugin add org.apache.cordova.device ● cordova plugin add org.apache.cordova.geolocation ● cordova plugin ls
  8. 8. Setting up Jquery & Bootstrap 3 ● Download bootstrap 3 from http://getbootstrap.com ● Add bootstrap.min.css to www/css ● Add bootstrap.min.js to www/js ● Add fonts fonts folder to www ● Add jquery.min.js from http://jquery.com to www/js
  9. 9. WWW Folder
  10. 10. Set up AngularJS ● Download AngularJS from http://angularjs.org ● Download angular-routes http://code.angularjs.org/<angular_version>/ angular-route.js ● Copy to www/js folder
  11. 11. WWW Folder
  12. 12. Modify Index.HTML to add CSS and JS ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● <html ng-app=”cordovaApp”> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <title>Cordova Demo</title> </head> <body ng-controller="SuperController"> <div class=”container” ng-view=""></div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> ● <script type="text/javascript" src="js/angular_route.min.js"></script> </body> </html>
  13. 13. Add Phonegap Module ● Add Phonegap module from https://github.com/mstaessen/angular- phonegap/blob/master/src/PhoneGap.js to www/js ● Add the reference script tag in index.html
  14. 14. Create app.js in www/js and Add to index.html ● ● 'use strict'; var cordovaApp = angular.module('cordovaApp', ['ngRoute','PhoneGap']); ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● cordovaApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/', { templateUrl: 'partials/welcome.html', controller: 'WelcomeCtrl' }); $routeProvider. when('/login', { templateUrl: 'partials/login.html', controller: 'LoginCtrl' }); $routeProvider. otherwise({ redirectTo: '/' }); } ● ]);
  15. 15. Create HTML Files ● Create partials folder under html ● Create welcome.html under partials ● <div class="jumbotron"> ● Welcome to Cordova App ● </div> ● <button ng-click=”gotoLogin()” ngshow=”isAppLoaded”>Go to Login</button>
  16. 16. Create Super Controller ● cordovaApp.controller('SuperController', ● function SuperController($scope, $location, PhoneGap) { ● ● } ● );
  17. 17. Creating WelcomeCtrl ● cordovaApp.controller('WelcomeCtrl', ● function WelcomeCtrl($scope, $location, PhoneGap) { ● $scope.isAppLoaded = false; ● // to detect if app is loaded ● PhoneGap.ready().then(function() { ● alert("App loaded"); ● $scope.isAppLoaded = true; ● }); ● $scope.gotoLogin = function() { ● $location.url('/login'); ● }; ● } ● );
  18. 18. Create Login html ● Create login.html in partials folder. ● <form role="form"> ● <div class="form-group"> ● <label for="exampleInputEmail1">Email address</label> ● <input type="email" ng-model="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> ● </div> ● <div class="form-group"> ● <label for="exampleInputPassword1">Password</label> ● <input type="password" ng-model="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> ● </div> ● <button type="submit" ng-click="showVals()" class="btn btndefault">Submit</button> ● </form>
  19. 19. Create LoginCtrl ● cordovaApp.controller('LoginCtrl', ● ● function LoginCtrl($scope, $location, PhoneGap) { $scope.showVals = function() { ● ● }; ● } ● ); alert($scope.email + " " + $scope.password);
  20. 20. Add Controller Links to index.html
  21. 21. Cordova Build ●cordova build android ●cordova emulate android
  22. 22. Yippie!! The supporting code is available here.
  23. 23. About Neev Web Mobile Magento eCommerce SaaS Applications Video Streaming Portals Rich Internet Apps Custom Development iPhone Android Windows Phone 7 HTML5 Apps Cloud AWS Consulting Partner Rackspace Joyent Heroku Google App Engine Key Company Highlights 250+ team with experience in managing offshore, distributed development. Neev Technologies established in Jan ’05 User Interface Design and User Experience Design VC Funding in 2009 By Basil Partners Performance Consulting Practices Part of Publicis Groupe Quality Assurance & Testing Member of NASSCOM Outsourced Product Development Offices at Bangalore and Pune
  24. 24. A few Clients
  25. 25. Partnerships
  26. 26. sales@neevtech.com Neev Information Technologies Pvt. Ltd. India - Bangalore India - Pune The Estate, # 121,6th Floor, #13 L’Square, 3rd Floor Dickenson Road Parihar Chowk, Aundh, Bangalore-560042 Pune – 411007. Phone :+91 80 25594416 Phone : +91-64103338 For more info on our offerings, visit www.neevtech.com

×