tag:blogger.com,1999:blog-84106126981968896552024-03-13T22:50:48.272-07:00A PhoneGap for BeginnerA PhoneGap Demo project Tutorialamitsalvihttp://www.blogger.com/profile/09917427088104705616noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-8410612698196889655.post-60405923832593087162016-02-22T05:00:00.000-08:002016-05-17T06:03:59.438-07:00PhoneGap Demo Project for Beginner<a href='http://blogger.com' target='google_popup'>blogger.com</a>
<div dir="ltr" style="text-align: left;" trbidi="on">
Hello Guys<br />
<br />
This Demo Project is for Phone Gap beginners.<br />
In this Demo Project following points will be covered.<br />
<br />
<i>1. What is PhoneGap</i><br />
<i>2. Phone Gap Pre requirements.</i><br />
<i>3. Required Software's for PhoneGap.</i><br />
<i>4. A Demo Project</i><br />
<i> i) Splash Screen</i><br />
<i> ii) AngularJS Event Handling.</i><br />
<i> iii) Sqlite DB connetion</i><br />
<i> iv) Ajax Request.</i><br />
<i><br /></i>
<br />
<h3 style="text-align: left;">
<i><b>1. What Is PhoneGap.</b></i></h3>
<div>
A <a href="http://phonegap.com/">PhoneGap</a> is cross Platform(Android ,ios ,Windows etc..) Open source mobile Apps development framework.</div>
<div>
<br /></div>
<div>
A PhoneGap uses HTML and Javascript to develop Apps.</div>
<div>
<h3>
<i>2. </i><i>Phone Gap Pre-requirements.</i></h3>
</div>
To Understand this Project one must have knowledge of <a href="http://www.w3schools.com/html/">HTML</a> and <a href="http://www.w3schools.com/js/default.asp">Javascript</a> . For this demo an <a href="https://docs.angularjs.org/">Angular JS</a> knowledge would make advantage.<br />
<br />
<h3 style="text-align: left;">
<i>3. </i><i>Required Software's for PhoneGap.</i></h3>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: "arial"; font-size: 15.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">PhoneGap Setup</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: "arial"; font-size: 15.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1.Download Node JS Latest Version</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://nodejs.org/dist/v5.6.0/node-v5.6.0-x64.msi" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: "arial"; font-size: 15.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://nodejs.org/dist/v5.6.0/node-v5.6.0-x64.msi</span></a></div>
<b id="docs-internal-guid-c84802b8-07a7-c9b4-f1af-80439396de67" style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: "arial"; font-size: 15.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2. Download PhoneGap Latest Version</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://github.com/phonegap/phonegap-app-desktop/releases/download/0.2.1/PhoneGapSetup-win32.exe" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: "arial"; font-size: 15.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://github.com/phonegap/phonegap-app-desktop/releases/download/0.2.1/PhoneGapSetup-win32.exe</span></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: "arial"; font-size: 15.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">3. Install PhoneGap Mobile App to see changes directly on target Device(Optional required internet in Mobile).</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: "arial"; font-size: 15.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">4. Install Git Client to build App through PhoneGap CLI </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #1155cc; font-family: "arial"; font-size: 15.3333px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="https://github.com/git-for-windows/git/releases/download/v2.7.1.windows.2/Git-2.7.1.2-64-bit.exe" style="text-decoration: none;">https://github.com/git-for-windows/git/releases/download/v2.7.1.windows.2/Git-2.7.1.2-64-bit.exe</a> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; font-family: "arial"; font-size: 15.3333px; font-style: normal; font-variant: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">OR you can build App online </span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"></span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span style="background-color: white; color: #1155cc; font-family: "arial"; font-size: 15.3333px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="http://build.phonegap.com/" style="text-decoration: none;">http://build.phonegap.com/</a></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><br /></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">After Installing all above software follow below steps.</span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><br /></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<h3 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
<i style="line-height: normal;">4. A Demo Project</i></span></h3>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><i style="line-height: normal;"><br /></i></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><i style="line-height: normal;"> i) Splash Screen</i></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"></span><br /></span>
<br />
<ol style="margin-bottom: 0pt; margin-top: 0pt; text-align: left;"><span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235">
<li style="background-color: white; font-family: Arial; font-size: 15.3333px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.1700000000000002; margin-bottom: 0pt; margin-top: 17pt;">
<span style="color: #302f2d; font-family: "courier new"; font-size: 11.3333px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial"; font-size: 15.3333px; line-height: 21.16px;">Run Following Command</span> </span><span style="background-color: black; color: white; font-family: "courier new"; font-size: 11.3333px; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #302f2d; color: white; font-family: "courier new"; font-size: 11.3333px; vertical-align: baseline; white-space: pre-wrap;">C:\>npm install -g cordova</span></div>
</li>
<li style="background-color: white; font-family: Arial; font-size: 15.3333px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.1700000000000002; margin-bottom: 0pt; margin-top: 17pt;">
<span style="font-size: 15.3333px; line-height: 21.16px; white-space: pre-wrap;">In Command Prompt go to directory where you want to create Project.</span><a href="https://3.bp.blogspot.com/-daqVM9LaBFg/VsqsjLDq8RI/AAAAAAAAA3E/2nBOZOI8U6w/s1600/Untitled.png" imageanchor="1" style="font-size: 15.3333px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="162" src="https://3.bp.blogspot.com/-daqVM9LaBFg/VsqsjLDq8RI/AAAAAAAAA3E/2nBOZOI8U6w/s320/Untitled.png" width="320" /></a></div>
</li>
<li style="background-color: white; font-family: Arial; font-size: 15.3333px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 15.3333px; vertical-align: baseline; white-space: pre-wrap;">Create Project using following Command </span><span style="background-color: #302f2d; color: white; font-family: "courier new"; font-size: 11.3333px; vertical-align: baseline; white-space: pre-wrap;">cordova create hello com.example.hello </span><span style="background-color: #302f2d; color: #f5896f; font-family: "courier new"; font-size: 11.3333px; vertical-align: baseline; white-space: pre-wrap;">HelloWorld </span></div>
</li>
<li style="background-color: white; font-family: Arial; font-size: 15.3333px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 15.3333px; line-height: 21.16px; white-space: pre-wrap;">Now add required platforms to your project by following command. But before building make sure there respective SDK are installed on machine for locally building the project or you can build Online for android and IoS. </span><a href="http://build.phonegap.com/" style="font-size: 15.3333px; line-height: 21.16px; text-decoration: none; white-space: pre-wrap;">http://build.phonegap.com/</a></div>
</li>
<li style="background-color: white; font-family: Arial; font-size: 15.3333px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 15.3333px; line-height: 21.16px; white-space: pre-wrap;"></span></div>
<pre class="prettyprint" style="background: rgb(48, 47, 45); border-radius: 11px; font-size: 13px; line-height: 14.3px; margin-bottom: 3em; margin-top: 1.5em; padding: 15px 20px; white-space: pre-wrap;"><code style="background: none; border: none; font-family: DejaVu, Monaco, 'Courier New', Courier; font-size: 11px; padding: 0px;"><span class="pln" style="color: white;"> cordova platform add wp8
cordova platform add windows
cordova platform add amazon</span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;">fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos</span></code><i style="background-color: white; font-family: 'times new roman'; font-size: medium; white-space: normal;"> </i></pre>
</li>
<h3>
<span style="font-size: large; vertical-align: baseline; white-space: pre-wrap;"><i style="color: black; font-family: 'times new roman'; white-space: normal;"> i) Splash Screen</i></span></h3>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">Now go in Project directory here it is "HelloWorld" Run following command to enable splash screen </span><span style="background-color: #eeeeee; font-family: "consolas"; font-size: 13.3333px; vertical-align: baseline; white-space: pre-wrap;">cordova plugin add cordova-plugin-splashscreen</span><a href="https://1.bp.blogspot.com/-Q2QhlYpf0Jg/Vsqt65OM11I/AAAAAAAAA3Q/qYaXl5uy6x4/s1600/Untitled2.png" imageanchor="1" style="background-color: transparent; font-size: 14.6667px; line-height: 1.38; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="162" src="https://1.bp.blogspot.com/-Q2QhlYpf0Jg/Vsqt65OM11I/AAAAAAAAA3Q/qYaXl5uy6x4/s320/Untitled2.png" width="320" /></a></div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
Now navigate to config.xml file in project Folder and open that in Any Editor. <a href="https://4.bp.blogspot.com/-8V-Qs_7griE/Vsqv8Pq0L2I/AAAAAAAAA3c/1RfK4QjjuyM/s1600/Untitled3.png" imageanchor="1" style="font-size: 14.6667px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="116" src="https://4.bp.blogspot.com/-8V-Qs_7griE/Vsqv8Pq0L2I/AAAAAAAAA3c/1RfK4QjjuyM/s400/Untitled3.png" width="400" /></a></div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
Add below code in config.xml to make splash screen work and save file. as shown in below image.<span style="background-color: transparent; color: #674ea7; font-size: 14.6667px; line-height: 20.24px;"><preference name="phonegap-version" value="3.0.0" /></span></div>
</li>
<li style="background-color: white; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="font-family: 'Times New Roman'; font-size: medium;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"></span></span><br />
<div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> <icon <span style="color: red;">src="icon.png"</span> /></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> <preference name="SplashScreen" value="screen"/></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> <preference name="SplashScreenDelay" value="3000" /></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> <platform name="android"></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> <!-- you can use any density that exists in the Android project --></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><span style="color: black;"> <splash src="</span><span style="color: red;">splash.png</span>" /></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> </platform></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<br />
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> </span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
<div style="color: black;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"> <preference name="android-minSdkVersion" value="18" /></span></span></div>
<span style="font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
<div style="color: black;">
<preference name="android-maxSdkVersion" value="23" /></div>
<div style="color: black;">
<preference name="android-targetSdkVersion" value="20" /></div>
<div style="color: black;">
<preference name="android-installLocation" value="preferExternal" /></div>
</span></span></div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div>
<a href="https://1.bp.blogspot.com/-wA1OJN0-7ho/VsqzBLCkxoI/AAAAAAAAA3o/o-Y24BmHjjA/s1600/Untitled4.png" imageanchor="1" style="font-size: 14.6667px; line-height: 20.24px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="282" src="https://1.bp.blogspot.com/-wA1OJN0-7ho/VsqzBLCkxoI/AAAAAAAAA3o/o-Y24BmHjjA/s400/Untitled4.png" width="400" /></a></div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
Now before building make sure that icon.png and splash.png file present in project directory</div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="color: black; font-family: 'Times New Roman'; font-size: medium;">
<span style="color: #222426; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">icon.png size 300x300</span></span></div>
<div style="color: black; font-family: 'Times New Roman'; font-size: medium;">
<span style="color: #222426; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">splash.png target device resolution or in that ratio</span></span><span style="color: #222426; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px;">. </span></div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="color: black; font-family: 'Times New Roman'; font-size: medium;">
<span style="color: #222426; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px;"><a href="https://2.bp.blogspot.com/-LkNliQ8pp_s/Vsq1U-FQUZI/AAAAAAAAA30/Vq1mm9vWyy4/s1600/Untitled5.png" imageanchor="1" style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="201" src="https://2.bp.blogspot.com/-LkNliQ8pp_s/Vsq1U-FQUZI/AAAAAAAAA30/Vq1mm9vWyy4/s320/Untitled5.png" width="320" /></a></span></div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="color: black; font-family: 'Times New Roman'; font-size: medium;">
<span style="color: #222426; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px;">Now navigate to index.html file and open that in any Editor like <a href="https://notepad-plus-plus.org/">Notepad++</a> or <a href="http://brackets.io/">Brackets</a>.</span><a href="https://4.bp.blogspot.com/-nXwEApi1c2Q/Vsq5HYDo7OI/AAAAAAAAA4A/LnQSXoUw4gY/s1600/Untitled6.png" imageanchor="1" style="font-family: arial; font-size: 14.6667px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="187" src="https://4.bp.blogspot.com/-nXwEApi1c2Q/Vsq5HYDo7OI/AAAAAAAAA4A/LnQSXoUw4gY/s400/Untitled6.png" width="400" /></a></div>
</li>
<h3 style="color: black; font-family: 'Times New Roman';">
<span style="font-size: large; vertical-align: baseline; white-space: pre-wrap;"><i style="font-family: 'times new roman'; white-space: normal;"> ii) </i></span><i><span style="font-size: large;">AngularJS Event Handling.</span></i></h3>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: left;">
Now before going for event handling we must install AngulaJS by </div>
</li>
<li style="background-color: white; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: left;">
<span style="color: #222426; font-family: "arial"; font-size: 14.6667px;">Download through </span><span style="color: #222426; font-family: "arial";"><span style="font-size: 14.6667px;"><a href="https://github.com/driftyco/ng-cordova/archive/master.zip">https://github.com/driftyco/ng-cordova/archive/master.zip</a></span></span></div>
</li>
<li style="background-color: white; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: left;">
<span style="color: #222426; font-family: "arial";">After downloading complete extract these files and navigate to "lib" folder</span><a href="https://4.bp.blogspot.com/--c0bdqDJIGQ/VsrR7Ph1HPI/AAAAAAAAA4o/Jb9Q32TEZtc/s1600/Untitled9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="227" src="https://4.bp.blogspot.com/--c0bdqDJIGQ/VsrR7Ph1HPI/AAAAAAAAA4o/Jb9Q32TEZtc/s400/Untitled9.png" width="400" /></a></div>
</li>
<li style="background-color: white; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: left;">
<span style="color: #222426; font-family: "arial";"><br /></span></div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="box-sizing: border-box; color: #53565d; font-family: AvenirNextLTPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 10px;">
<span style="letter-spacing: -0.15px;"> </span><span style="letter-spacing: -0.15px;">copy "lib" file got in above AngularJS download link to your project folder and </span>Include <code style="background: rgb(245, 245, 245); border-radius: 1px; box-sizing: border-box; color: #4685dd; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; padding: 2px; text-shadow: none; white-space: nowrap;">ng-cordova.js</code> <span style="box-sizing: border-box; font-weight: 700;"><em style="box-sizing: border-box;">or</em></span> <code style="background: rgb(245, 245, 245); border-radius: 1px; box-sizing: border-box; color: #4685dd; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; padding: 2px; text-shadow: none; white-space: nowrap;">ng-cordova.min.js</code> in your <code style="background: rgb(245, 245, 245); border-radius: 1px; box-sizing: border-box; color: #4685dd; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; padding: 2px; text-shadow: none; white-space: nowrap;">index.html</code> file <span style="box-sizing: border-box; font-weight: 700;">before</span> <code style="background: rgb(245, 245, 245); border-radius: 1px; box-sizing: border-box; color: #4685dd; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; padding: 2px; text-shadow: none; white-space: nowrap;">cordova.js</code> </div>
<div class="highlight" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; box-sizing: border-box; color: #53565d; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;">
<pre style="background-color: #f6f7fb; border-radius: 2px; border: 1px solid rgb(229, 233, 242); box-sizing: border-box; color: #4a4a4c; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 20px; margin-top: 20px; overflow: auto; padding: 10px; word-break: keep-all; word-wrap: break-word;"><code class="language-html" data-lang="html" style="background: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; text-shadow: none; white-space: pre-wrap;"><span class="nt" style="box-sizing: border-box; color: #dd3d40;"><script </span><span class="na" style="box-sizing: border-box; color: #dd3d40;">src=</span><span class="s" style="box-sizing: border-box; color: #57b4ff;">"lib/ngCordova/dist/ng-cordova.js"</span><span class="nt" style="box-sizing: border-box; color: #dd3d40;">></script></span>
<span class="nt" style="box-sizing: border-box; color: #dd3d40;"><script </span><span class="na" style="box-sizing: border-box; color: #dd3d40;">src=</span><span class="s" style="box-sizing: border-box; color: #57b4ff;">"cordova.js"</span><span class="nt" style="box-sizing: border-box; color: #dd3d40;">></script></span></code><a href="https://4.bp.blogspot.com/-_mcw9MOp7lc/VsrQXd5Z9VI/AAAAAAAAA4c/ESLdG3EApx0/s1600/Untitled8.png" imageanchor="1" style="background-color: transparent; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="157" src="https://4.bp.blogspot.com/-_mcw9MOp7lc/VsrQXd5Z9VI/AAAAAAAAA4c/ESLdG3EApx0/s400/Untitled8.png" width="400" /></a></pre>
</div>
</li>
<li style="background-color: white; color: #222426; font-family: Arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.714284; margin-bottom: 15pt; margin-left: 4pt; margin-top: 15pt;">
<span style="background-color: #f8f8f8; color: #333333; font-family: "consolas"; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">10. Download </span><a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" style="text-decoration: none;"><span style="background-color: whitesmoke; color: #1155cc; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">angular.min.js</span></a><span style="background-color: #f8f8f8; color: #333333; font-family: "consolas"; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> from below link and paste it project’s “js” folder and add its reference in index.html file</span></div>
<span id="docs-internal-guid-c84802b8-086b-3019-c039-9317a7c9f656"></span><br />
<div dir="ltr" style="line-height: 1.714284; margin-bottom: 8pt; margin-top: 0pt;">
<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" style="text-decoration: none;"><span style="background-color: whitesmoke; color: #1155cc; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js</span></a></div>
</li>
<li style="background-color: white; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="box-sizing: border-box; font-family: AvenirNextLTPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 10px;">
<span style="color: #53565d;"> Now in index.html add </span><span style="color: #6fa8dc;">ng-app="myApp" </span>this line <html> tag<a href="https://2.bp.blogspot.com/-LAoa0RoZUVo/VsrTyn2WqZI/AAAAAAAAA40/7Z7CtfdLrCI/s1600/Untitled10.png" imageanchor="1" style="font-family: arial; font-size: 14.6667px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://2.bp.blogspot.com/-LAoa0RoZUVo/VsrTyn2WqZI/AAAAAAAAA40/7Z7CtfdLrCI/s1600/Untitled10.png" /></a></div>
</li>
<li style="background-color: white; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="box-sizing: border-box; font-family: AvenirNextLTPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 10px;">
And <span style="color: #3d85c6;"><div ng-controller="controller"> </span>this line just below <body> tag<a href="https://3.bp.blogspot.com/-zeNLENIuwFo/VsrUfYeZWMI/AAAAAAAAA48/rBfMPEEXsxc/s1600/Untitled11.png" imageanchor="1" style="font-family: arial; font-size: 14.6667px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="40" src="https://3.bp.blogspot.com/-zeNLENIuwFo/VsrUfYeZWMI/AAAAAAAAA48/rBfMPEEXsxc/s320/Untitled11.png" width="320" /></a></div>
</li>
<li style="background-color: white; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div style="box-sizing: border-box; font-family: AvenirNextLTPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 10px;">
Now Create one blank "<span style="color: purple;">Home.js</span>" File and copy to projects respective "js" folder <span style="letter-spacing: -0.01em;">and add below code to that file </span><a href="https://3.bp.blogspot.com/-Hi7SsxH6OgI/VsrdATrf-hI/AAAAAAAAA5s/0w0PAHro7vQ/s1600/Untitled13.png" imageanchor="1" style="letter-spacing: -0.01em; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="115" src="https://3.bp.blogspot.com/-Hi7SsxH6OgI/VsrdATrf-hI/AAAAAAAAA5s/0w0PAHro7vQ/s320/Untitled13.png" width="320" /></a></div>
</li>
<li style="background-color: white; list-style-type: lower-alpha; vertical-align: baseline;"><div style="box-sizing: border-box; margin-bottom: 10px;">
<span style="color: #a64d79; font-family: , "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 15px; letter-spacing: -0.15px;">var myApp = angular.module('myApp', []);</span></span></div>
<div style="box-sizing: border-box; margin-bottom: 10px;">
<span style="color: #a64d79;"><span style="font-family: , "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 15px; letter-spacing: -0.15px;"> </span></span><span style="font-family: , "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 15px; letter-spacing: -0.15px;">myApp.controller("controller", function($scope ){</span></span></div>
<div style="box-sizing: border-box; margin-bottom: 10px;">
<span style="font-family: , "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 15px; letter-spacing: -0.15px;"><span style="color: #a64d79;">});</span></span></div>
</li>
<li style="background-color: white; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: left;">
Now add Home.js file reference in "index.html" file <span style="font-size: 14.6667px;"><span style="color: #38761d;"><script type="text/javascript" src="js/Home.js"></script> </span></span><a href="https://1.bp.blogspot.com/-MrYOnZcKRhs/VsrcyrCtLeI/AAAAAAAAA5o/BkminCmljgM/s1600/Untitled12.png" imageanchor="1" style="font-size: 14.6667px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="51" src="https://1.bp.blogspot.com/-MrYOnZcKRhs/VsrcyrCtLeI/AAAAAAAAA5o/BkminCmljgM/s400/Untitled12.png" width="400" /></a><span style="color: #38761d; font-size: 14.6667px;"> </span></div>
</li>
<li style="background-color: white; font-family: arial; font-size: 14.6667px; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: left;">
<span style="font-size: 14.6667px;">Now we will add button in index.html file just after the <p> tag </span></div>
</li>
<li style="background-color: white; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both;">
</div>
<br />
<blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;">
<blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;">
<blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;">
<span style="color: #3d85c6;"><p class="event received">Hello World</p></span></blockquote>
</blockquote>
</blockquote>
<br />
<span style="color: #3d85c6;"><span class="Apple-tab-span" style="white-space: pre;"> </span><br/> </span><br />
<blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;">
<blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;">
<blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;">
<span style="color: #3d85c6; font-family: "arial";"><span style="font-size: 14.6667px;"><div class="cl_div_submit"></span></span></blockquote>
</blockquote>
</blockquote>
<br />
<div class="separator" style="clear: both;">
<span style="color: #3d85c6; font-family: "arial";"><span style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><button ng-click="JoinUs()">Join Us</button></span></span></div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
<span style="color: #3d85c6; font-family: "arial";"><span style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span></span></div>
</li>
<li style="background-color: white; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px;">Now Open "Home.js" file in editor and following code to it</span></span><a href="https://3.bp.blogspot.com/-WWKeV6uU_cQ/VsrY0omuatI/AAAAAAAAA5c/WpU5H45HZpE/s1600/Untitled14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="160" src="https://3.bp.blogspot.com/-WWKeV6uU_cQ/VsrY0omuatI/AAAAAAAAA5c/WpU5H45HZpE/s400/Untitled14.png" width="400" /></a></div>
</li>
<li style="background-color: white; list-style-type: lower-alpha; vertical-align: baseline;"><div class="separator" style="clear: both;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px;">For Testing purpose open index.html file in chrome.exe and click on "Join Us" button.</span></span><a href="https://2.bp.blogspot.com/-yr-VP96-wPU/VsreJvYGCXI/AAAAAAAAA58/XkYqiSOBv-Q/s1600/Untitled15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="400" src="https://2.bp.blogspot.com/-yr-VP96-wPU/VsreJvYGCXI/AAAAAAAAA58/XkYqiSOBv-Q/s400/Untitled15.png" width="215" /></a><a href="https://4.bp.blogspot.com/-PkFkE8-BZpQ/VsreRL6x6nI/AAAAAAAAA6A/NHKfrHQDhnU/s1600/Untitled16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="297" src="https://4.bp.blogspot.com/-PkFkE8-BZpQ/VsreRL6x6nI/AAAAAAAAA6A/NHKfrHQDhnU/s320/Untitled16.png" width="320" /></a></div>
</li>
</span></span></ol>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"></span><br /></span>
<br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #222426; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235">
</span>
</span><br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><br /></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235">
</span>
</span><br />
<div>
<h3 style="text-align: left;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><i> iii) Sqlite DB connetion -> </i></span></span><i><a href="http://phonegapforbeginner.blogspot.in/2016/02/continue-phonegap-demo-project-for.html">http://phonegapforbeginner.blogspot.in/2016/02/continue-phonegap-demo-project-for.html</a></i></h3>
</div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235">
</span>
</span><br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #222426; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235">
</span>
</span><br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"></span></span><br /></span>
</span><br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span>
</span></span><br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span></span>
</span><br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #674ea7; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px;">
</span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235">
</span>
</span><br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235"><span style="color: #222426; font-family: "consolas";"><span style="font-size: 13.3333px; line-height: 18.4px; white-space: pre-wrap;"><br /></span></span></span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><span id="docs-internal-guid-c84802b8-07ab-5dd6-9ceb-d96f58814235">
</span></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<br />
<div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6"><br /></span></div>
<span id="docs-internal-guid-c84802b8-07a9-2ddb-c1e0-02ef25a603c6">
</span>
<div>
<br /></div>
<br /></div>amitsalvihttp://www.blogger.com/profile/09917427088104705616noreply@blogger.com0tag:blogger.com,1999:blog-8410612698196889655.post-39458877374253565342016-02-22T03:42:00.000-08:002016-02-22T08:46:45.655-08:00Continue... PhoneGap Demo Project For Beginner - Sqlite DB connetion<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<i><b>iii) Sqlite DB connetion</b></i></h3>
<div style="text-align: left;">
1. Now to use Sqlite in PhoneGap first we need to install it by following command.</div>
<div style="text-align: left;">
<span id="docs-internal-guid-c84802b8-088b-5142-f832-3efd95c89517"><span style="background-color: white; color: #4a86e8; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">npm i cordova-sqlite-storage</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://1.bp.blogspot.com/-ySXyRu-P4nE/VsrkQkaA7kI/AAAAAAAAA6U/vpjaL0CBu6g/s1600/Untitled17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="41" src="https://1.bp.blogspot.com/-ySXyRu-P4nE/VsrkQkaA7kI/AAAAAAAAA6U/vpjaL0CBu6g/s400/Untitled17.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. <span style="background-color: white; color: #222426; font-family: "arial"; font-size: 14.6667px; line-height: 1.38; white-space: pre-wrap;">then add plugin in project directory by following command</span></div>
<span id="docs-internal-guid-c84802b8-088c-338b-768d-46893153dfe4"></span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-c84802b8-088c-338b-768d-46893153dfe4"><span style="background-color: white; color: #4a86e8; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;">D:\>cordova plugin add cordova-sqlite-storage</span></span></div>
<span id="docs-internal-guid-c84802b8-088c-338b-768d-46893153dfe4">
<div>
<span style="background-color: white; color: #4a86e8; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
</span><br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://2.bp.blogspot.com/-y2-rxOLDeuY/VsrktAV6twI/AAAAAAAAA6Y/MEAnWoUSQKg/s1600/Untitled18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="62" src="https://2.bp.blogspot.com/-y2-rxOLDeuY/VsrktAV6twI/AAAAAAAAA6Y/MEAnWoUSQKg/s320/Untitled18.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3. No Create new Html File "JoinUs.html" You can Download this File <a href="https://drive.google.com/file/d/0B622T96igsrAR1Q2MkQ4aVhpdkk/view?usp=sharing">here</a> and paste that file in project "www" directory where the index.html is present. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
4. Now Modify "Home.js" file and Update JoinUs() funtion</div>
<div class="separator" style="clear: both;">
$scope.JoinUs = function()</div>
<div class="separator" style="clear: both;">
{ </div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span> //alert('Hello World');</div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span> window.location = "joinUs.html"</div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span> </div>
<div class="separator" style="clear: both;">
};</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
You Can Download Home.js File <a href="https://drive.google.com/file/d/0B622T96igsrAMEplS21hQURBaUU/view?usp=sharing">here</a>.</div>
<div class="separator" style="clear: both;">
Now it will look like below</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://1.bp.blogspot.com/-MnFfmQf6rRU/VsrtCUxAzqI/AAAAAAAAA6s/HRKVfZ0eIsQ/s1600/Untitled19.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://1.bp.blogspot.com/-MnFfmQf6rRU/VsrtCUxAzqI/AAAAAAAAA6s/HRKVfZ0eIsQ/s400/Untitled19.png" width="221" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3>
<i>iv) Ajax Request</i></h3>
<div>
<div style="text-align: left;">
1. Now For Ajax we will create on button that will call some ajax data for that add Below code in "JoinUs.html" File</div>
<div style="text-align: left;">
<br /></div>
<span style="color: #990000;"> <div class="cl_div_submit"></span><br />
<span style="color: #990000;"><span class="Apple-tab-span" style="white-space: pre;"> </span> <label>Ajax Data :{{lbltime}}</label></span><br />
<span style="color: #990000;"> <br/></span><br />
<span style="color: #990000;"> <button ng-click="ajaxReqs()">Ajax</button></span><br />
<span style="color: #990000;"> </div></span><br />
2. Now we need to add base domain name of ajax request URL for eg here Ajax Get request is <a href="https://httpbin.org/get">https://httpbin.org/get</a> so we need to add that under <head> tag in "JoinUs.html" file as show below<br />
<br />
<span style="color: #cc0000;"><meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: </span><span style="color: #0b5394;">https://httpbin.org</span><span style="color: #cc0000;"> 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"></span><br />
<span style="color: #cc0000;"><br /></span>
3. Now We need to Add <span style="color: #990000;">ajaxReqs() </span>this funtion in Home.js file<br />
<br />
<span style="color: #674ea7;">$scope.ajaxReqs = function()</span><br />
<span style="color: #674ea7;"> {</span><br />
<span style="color: #674ea7;"> var xhttp = new XMLHttpRequest();</span><br />
<span style="color: #674ea7;"> xhttp.onreadystatechange = function() {</span><br />
<span style="color: #674ea7;"> if (xhttp.readyState == 4 && xhttp.status == 200) {</span><br />
<span style="color: #674ea7;"> data1 = xhttp.responseText;</span><br />
<span style="color: #674ea7;"> $scope.lbltime = xhttp.responseText;</span><br />
<span style="color: #674ea7;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$scope.$apply();</span><span style="color: #6aa84f;">//To refresh the page</span><br />
<span style="color: #674ea7;"> //alert('ajax Data '+$scope.lbltime);</span><br />
<span style="color: #674ea7;"> }</span><br />
<span style="color: #674ea7;"> };</span><br />
<span style="color: #674ea7;"> xhttp.open("GET", "https://httpbin.org/get", true);</span><br />
<span style="color: #674ea7;"> xhttp.send();</span><br />
<span style="color: #674ea7;"> </span><br />
<span style="color: #674ea7;"> };</span><br />
<span style="color: #674ea7;"><a href="https://drive.google.com/file/d/0B622T96igsrAdkFGeGZjUlM4U28/view?usp=sharing"><br /></a></span>
<span style="color: #e69138;"><a href="https://drive.google.com/file/d/0B622T96igsrANHZWSXdZZk0tcDA/view?usp=sharing">You Can Download Complete Project Here</a></span><br />
<br />
Here I end this demo project Tutorial..............<br />
Thanks...</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: white; color: #4a86e8; font-family: "arial"; font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div>
<i><b><br /></b></i></div>
</div>
amitsalvihttp://www.blogger.com/profile/09917427088104705616noreply@blogger.com1