Phonegap android angualr material design

Angular Material Design in

Phone Gap/CordovaImprovisation

Installation

Introduction

Implementation

Node.js also provides a rich library of various JavaScript modules which simplifies the

development of web applications using Node.js to a great extent.

Node.js = Runtime Environment + JavaScript Library

What is Node.js?

https://nodejs.org/

Git is a widely used version control system for software development. It is a distributed revision

control system with an emphasis on speed.

What is git?

https://git-scm.com/book/en/v2/Getting-Started-Git-Basics

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower

doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

What is bower?

http://bower.io/

PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, JavaScript and CSS. Wrap your app with PhoneGap

Deploy to mobile platforms! Build your app with web technology Wrap your app with PhoneGap

Deploy to mobile platforms!

What is Phonegap?

http://phonegap.com/

Cordova ,formerly called as Phone Gap is a platform to build Native Mobile Applications using HTML5,

CSS and Java Script.

What is Cordova?


ngCordova was built to help make app development faster and more efficient than ever before. It gives

you simple Angular JS wrappers for the most popular Cordova and PhoneGap plug-ins available, where you can take a picture, scan a barcode, turn on your flashlight, get your current location, and

much more with just a few lines of code.

What is ngCordova?

http://ngcordova.com/

Cordova ,formerly called as Phone Gap is a platform to build Native Mobile Applications using HTML5,

CSS and Java Script.

What is angular js ?

https://angularjs.org/

A design which consists of devices & layer approach of design

What is Material Design?

https://design.google.com/

Material Design is a specification for a unified system of visual, motion, and interaction design that

adapts across different devices. Our goal is to deliver a lean, lightweight set of Angular-native UI

elements that implement the material design specification for use in Angular single-page

applications (SPAs).

What is angular material design?

https://design.google.com/

1. Download node.exe (32/64 bit) 2. Install in windows3. If proxy exits then open command prompt & type

npm config set https-proxy http://[Your Proxy]:[Proxy Port] npm config set proxy http://[Your Proxy]:[Proxy Port]e.g. npm config set https-proxy http://192.168.1.1:808 npm config set proxy http://192.168.1.1:808

How to install Node.js?

http://digitaldrummerj.me/proxy-configurations/

1. Download git-**-**-bit.exe(32/64 bit) 2. Install in windows3. If proxy exits then open command prompt & type

git config --add http.proxy http://[Your Proxy]:[Proxy Port]git config --add https.proxy http://[Your Proxy]:[Proxy Port] e.g. git config --add http.proxy http://192.168.1.1:808 git config --add https.proxy http://192.168.1.1:808

How to install git?


1. Open Command Prompt then past below line and run npm install -g bower

How to install bower?


1. Open Notepad in %userprofile% directory & name the file .bowerrc

2. Proxy Setting in .bowerrc.{ "proxy":"http://[Your Proxy]:[Proxy Port]", "https-proxy":"http://[Your Proxy]:[Proxy Port]"}

How to set proxy to bower?


How to install phonegap?1. Open Command Prompt then past below

line and run npm install -g phonegap


How to install cordova?1. Open Command Prompt then past below

line and run npm install -g cordova


How to create Phonegap app?

1. Open Command Prompt then past below line and run

1. phonegap create myApp or phonegap create myApp --id "org.myapp.sample" --name

"appSample" 2. cd myApp/ 3. phonegap install android

http://docs.phonegap.com/getting-started/3-create-your-app/cli/

How to create Phonegap app?

4. bower install ngCordova5. cordova plugin add [Package Name]/[git repository url] e.g. cordova plugin add org.apache.cordova.device6. bower install angular-material7. Copy bower components folder to Platforms-->android--

>lib.8. Import to IDE/ Android studio for business logic

customization.9. Build & Run the app. https://www.npmjs.com/package/angular-material/

Gatim Techno Group

Thank You

Bye