advertisement

Phonegap and AngularJS

50 %
50 %
advertisement
Information about Phonegap and AngularJS
Technology

Published on February 14, 2014

Author: neevtech

Source: slideshare.net

Description

Phonegap and AngularJS – A Getting Started Guide
advertisement

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/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

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 working ● 'node' and 'npm' should be working

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 platform add ios

Add Necessary Plugins ● cordova plugin add org.apache.cordova.device ● cordova plugin add org.apache.cordova.geolocation ● cordova plugin ls

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

WWW Folder

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

WWW Folder

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>

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

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: '/' }); } ● ]);

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>

Create Super Controller ● cordovaApp.controller('SuperController', ● function SuperController($scope, $location, PhoneGap) { ● ● } ● );

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'); ● }; ● } ● );

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>

Create LoginCtrl ● cordovaApp.controller('LoginCtrl', ● ● function LoginCtrl($scope, $location, PhoneGap) { $scope.showVals = function() { ● ● }; ● } ● ); alert($scope.email + " " + $scope.password);

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 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

A few Clients

Partnerships

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Quick Start Guide to PhoneGap+AngularJS : Devgirl's Weblog

I’ve created a sample mobile application to help developers get started building mobile applications with PhoneGap and AngularJS quickly. The sample ...
Read more

GitHub - mstaessen/angular-phonegap: Source repository for ...

README.md angular-phonegap. angular-phonegap is a set of wrappers for Cordova/PhoneGap for a smooth integration with AngularJS. You can stop worrying about ...
Read more

App-Entwicklung mit PhoneGap und AngularJS

Das populäre Entwicklertool PhoneGap und das JavaScript-Framework AngularJS zeigt dieses Video-Training im sinnvollen gemeinsamen Einsatz. Sehen Sie, wie ...
Read more

Building PhoneGap Apps with AngularJS - Brian Ford

«Building PhoneGap Apps with AngularJS [2013.01.20] For the uninitiated, PhoneGap (or Cordova; I'm going to use the terms interchangeably) lets you write ...
Read more

Native Web App with PhoneGap, JQuery Mobile and AngularJS ...

Although I haven't played around with PhoneGap too much yet, I have used angularjs in conjunction with Apache Cordova (which powers PhoneGap). Here is a ...
Read more

Creating a PhoneGap Mobile App with an AngularJS UI - Genuitec

Creating a PhoneGap Mobile App with an AngularJS UI. You can use AngularJS when creating PhoneGap mobile apps to create UI elements. This tutorial shows ...
Read more

AngularJS & PhoneGap - Google Slides

Former Agile Consultant for Google & Pivotal ; Started using AngularJS 2 years ago; Started AngularJS-NYC 19 months ago; Reformed Zen Digital consultancy 2013
Read more

PhoneGap Documentation | PhoneGap Docs

PhoneGap Documentation. Welcome to the new version of the PhoneGap Docs! We're working on putting together a comprehensive resource that covers all things ...
Read more

Get Started - PhoneGap

Get Started. Follow these steps to install PhoneGap and get an app running on your mobile device in minutes.
Read more

AngularJS

AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency ...
Read more