tag:blogger.com,1999:blog-31624600909669525522024-03-14T02:27:26.040-07:00Store 4 JavaScript ApplicationsEvan Georgehttp://www.blogger.com/profile/18070892987188313205noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-3162460090966952552.post-10835211540808909562013-07-29T23:11:00.000-07:002013-07-29T23:15:29.437-07:00Two way data binding in AngularJS with ngBind and ngModel directives<div dir="ltr" style="text-align: left;" trbidi="on">
Data binding is the process of synchronizing or linking of model data with view data.<br />
<br />
In two way data binding any change in the model data will be reflected automatically in view data and any change in the view data will be reflected in model data.<br />
<br />
AngularJS library provides this two way data binding mechanism.<br />
<br />
In AngularJS web applications, data binding can be easily achieved using the directives ngBind and ngModel.<br />
<br />
In this article, we will develop a simple AngularJS application that demonstrates how use ngBind and ngModel directives for data binding.<br />
<br />
In order to develop this application, please follow the given below steps.<br />
<br />
<b>1. Create a directory structure as shown below</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI6UKI8aNU44U6gkNCXxZoXfzwsU2MCc9F8OQLgLBgWklViu0rIjP9_ynf9P1BVO9rW6fdOvtYqO0zXoftIHvlAlHzbQ9DF2pf6w2UnEeFP63m1kSHWNgR9sUScm65PJJc2pUDW7M9B0k/s1600/angularjs_databinding_directory.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI6UKI8aNU44U6gkNCXxZoXfzwsU2MCc9F8OQLgLBgWklViu0rIjP9_ynf9P1BVO9rW6fdOvtYqO0zXoftIHvlAlHzbQ9DF2pf6w2UnEeFP63m1kSHWNgR9sUScm65PJJc2pUDW7M9B0k/s1600/angularjs_databinding_directory.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Directory Structure</td></tr>
</tbody></table>
<b><br /></b>
<b>2. Download the latest version of AngularJS library</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigRkDhm3hZEcNWgQ3iS8L3TXu1vt9x-5nqgwGkfYeKRrhUTchmUhKfwr-AK7FXJQNZ4mwwPkZZRNgrKeIWc8_ZjO_n8Ua9lMI4wiT45wdop8rVTuIVQGdmTpuatXsERMFpTv_OUYKG4-Q/s1600/angularjs_countrylist_download.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigRkDhm3hZEcNWgQ3iS8L3TXu1vt9x-5nqgwGkfYeKRrhUTchmUhKfwr-AK7FXJQNZ4mwwPkZZRNgrKeIWc8_ZjO_n8Ua9lMI4wiT45wdop8rVTuIVQGdmTpuatXsERMFpTv_OUYKG4-Q/s320/angularjs_countrylist_download.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Download latest version of AngularJS library file ( angular.min.js ) </td></tr>
</tbody></table>
<b><br /></b>
<br />
<b>3. Copy the downloaded AngularJS library file to databinding/lib/angular</b><br />
<br />
<b>4. Create an html page with ngBind and ngModel directives</b><br />
<div class="gmk_code">
databinding/index.html
<br />
<pre class="brush:html;gutter:false"><html ng-app>
<head>
<script src="lib/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="remarks" />
<span ng-bind="remarks"></span>
</body>
</html>
</pre>
</div>
<b><br /></b>
<br />
<b>5. Open the page in a web browser</b><br />
<b><br /></b>
The text typed in the textbox will be displayed instantaneously in the web page.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_d7AARCQIVSUmT_9poKpfQcX019UAUf6wlCccJNb9M9vzTqqgRbW1nNMfCHSwoEi2olLq8rJJI9NTNhWxyor0T9nqy4p1OI1_uOd6F7NvjyCjL99OG5bqCXkuJL_G9QaILXlp5zOhjW4/s1600/angularjs_databinding_screenshot.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_d7AARCQIVSUmT_9poKpfQcX019UAUf6wlCccJNb9M9vzTqqgRbW1nNMfCHSwoEi2olLq8rJJI9NTNhWxyor0T9nqy4p1OI1_uOd6F7NvjyCjL99OG5bqCXkuJL_G9QaILXlp5zOhjW4/s320/angularjs_databinding_screenshot.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot of the page index.html in a web browser</td></tr>
</tbody></table>
<b><br /></b>
<br />
<b>6. Live Demo</b><br />
<b><br /></b>
The live demo of this application is available <a href="http://wptrafficanalyzer.in/angularjs/databinding/index.html" rel="nofollow" target="_blank">here</a><br />
<b><br /></b>
<br />
<b>7. Download</b><br />
<b><br /></b>
You can download the application with complete directory structure from <a href="http://wptrafficanalyzer.in/angularjs/databinding.zip" rel="nofollow" target="_blank">here</a><br />
<b><br /></b></div>
Evan Georgehttp://www.blogger.com/profile/18070892987188313205noreply@blogger.com1tag:blogger.com,1999:blog-3162460090966952552.post-1622582181840721572013-07-27T05:34:00.000-07:002013-07-27T06:00:10.637-07:00Starting up an AngularJS web application<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: inherit;">AngularJS is a javascript library that facilitates web programmers to extend html to include programming logic inside html.</span><br />
<br />
<span style="white-space: pre-wrap;"><span style="font-family: inherit;">In this article we will develop a web application that lists a set of countries in a web page.</span></span><br />
<span style="white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span>
<span style="white-space: pre-wrap;"><span style="font-family: inherit;">Major files used in this application include :</span></span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: inherit;"><span style="white-space: pre-wrap;"><i>countrylist/lib/angularjs.min.js</i></span><span style="white-space: pre-wrap;"> : This is the AngularJS library file.</span></span></li>
</ul>
<ul style="text-align: left;">
<li><span style="font-family: inherit; white-space: pre-wrap;">countrylist/js/countrycontroller.js : This is a javascript file containing controller function which can fetch, process and inject various data into html code.</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">countrylist/index.html : This is the view of the application that users sees.</span></span></li>
</ul>
<br />
In order to create a simple web application using AngularJS, please follow the given below steps :<br />
<br />
<b>1. Create a directory structure as shown below</b><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHH5EbPgvHeONS6nR0wk4e47V3WNZudtMY0CQYu-DyxEbFMcl3riip9P7cZCdlPNX3yfmXjvg3Opu1OKKSxworNXmTPguQCwr_ZqyRTdm0Gb9FlvoU0Am0OPszEJRD-fwD0XJbszcL5Y/s1600/angularjs_countrylist_directory_without_files.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHH5EbPgvHeONS6nR0wk4e47V3WNZudtMY0CQYu-DyxEbFMcl3riip9P7cZCdlPNX3yfmXjvg3Opu1OKKSxworNXmTPguQCwr_ZqyRTdm0Gb9FlvoU0Am0OPszEJRD-fwD0XJbszcL5Y/s1600/angularjs_countrylist_directory_without_files.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Directory structure of this application<br />
<br /></td></tr>
</tbody></table>
<b>2. Download AngularJS library</b><br />
<br />
We can download AngularJS library file (angular.min.js) from <a href="http://angularjs.org/" rel="nofollow" target="_blank">here</a>. After downloading the file, copy the file angular.min.js to the directory angular.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigRkDhm3hZEcNWgQ3iS8L3TXu1vt9x-5nqgwGkfYeKRrhUTchmUhKfwr-AK7FXJQNZ4mwwPkZZRNgrKeIWc8_ZjO_n8Ua9lMI4wiT45wdop8rVTuIVQGdmTpuatXsERMFpTv_OUYKG4-Q/s1600/angularjs_countrylist_download.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigRkDhm3hZEcNWgQ3iS8L3TXu1vt9x-5nqgwGkfYeKRrhUTchmUhKfwr-AK7FXJQNZ4mwwPkZZRNgrKeIWc8_ZjO_n8Ua9lMI4wiT45wdop8rVTuIVQGdmTpuatXsERMFpTv_OUYKG4-Q/s320/angularjs_countrylist_download.png" width="320" /></a></div>
<br />
<br />
<b>3. Download Image Files</b><br />
<br />
Download and extract the <a href="http://wptrafficanalyzer.in/angularjs/flags.zip" rel="nofollow">file</a> to the directory "countrylist/imgs"<br />
<br />
<b>4. Create a file namely countrycontroller.js in the folder js</b><br />
<b><br /></b>
<br />
<div class="gmk_code">
countrylist/js/countrycontroller.js
<pre class="brush:js;gutter:false">/** The function CountryController() acts as controller of the application */
function CountryController($scope){
/** List of countries acts as a model for this application */
$scope.countries = [
{ 'name':'India', 'currency':'Indian Rupees','flag':'india.png' },
{ 'name':'Pakistan','currency':'Pakistani Rupees','flag':'pakistan.png' },
{ 'name':'Bangladesh','currency':'Taka','flag':'bangladesh.png' },
{ 'name':'SriLanka','currency':'Srilankan Rupees','flag':'srilanka.png' },
{ 'name':'Nepal','currency':'Nepalees Rupees', 'flag':'nepal.png' }
];
}
</pre>
</div>
<b><br /></b>
<b><br /></b>
<b>5. Create a file namely index.html in countrylist</b><br />
<b><br /></b>
<br />
<div class="gmk_code">
countrylist/index.html
<pre class="brush:html;gutter:false"><!-- ng-app derivative is to specify that this is an AngularJS app -->
<html ng-app>
<head>
<!-- Include the AngularJS library -->
<script src="lib/angular/angular.min.js"></script>
<!-- Include the controller for this application -->
<script src="js/countrycontroller.js"></script>
</head>
<!-- Specifying the scope of the controller -->
<body ng-controller="CountryController">
<h1>List of Countries</h1>
<table border="1" cellpadding="5" style="border-collapse:collapse">
<tr><th>Flag</th><th>Name</th><th>Currency</th></tr>
<!-- Iterates through a list of countries
using ng-repeat derivative -->
<tr ng-repeat="country in countries">
<td cellpadding="2"><img src="imgs/{{country.flag}}"</td>
<td padding="2">{{country.name}}</td>
<td padding="2">{{country.currency}}</td>
</tr>
</table>
</body>
</html>
</pre>
</div>
<b><br /></b>
<b><br /></b>
<b>6. Running the application</b><br />
<b><br /></b>
Open the file index.html in a web browser. Then you can see a list of countries as shown in the given below figure.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFMhyphenhyphenzIJkSSgR2bSIrJwK2awgqqffZQx2-Rm4IFOO2Q3Ej6H7DzyZ_iEuIuOEcdPiPZ7453uR1XHJRSw7nY9TwMyIPKjVIScCE3JSgHSibtOfS03NwbptDkvZjDyNUEozwtqVJzYWuyc/s1600/angularjs_countrylist_screenshot.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFMhyphenhyphenzIJkSSgR2bSIrJwK2awgqqffZQx2-Rm4IFOO2Q3Ej6H7DzyZ_iEuIuOEcdPiPZ7453uR1XHJRSw7nY9TwMyIPKjVIScCE3JSgHSibtOfS03NwbptDkvZjDyNUEozwtqVJzYWuyc/s320/angularjs_countrylist_screenshot.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot of the AngularJS application</td></tr>
</tbody></table>
<b>7. Tryout</b><br />
<br />
You can tryout this application online <a href="http://wptrafficanalyzer.in/angularjs/countrylist/index.html" rel="nofollow" target="_blank">here</a><br />
<br />
<b>8. Download</b><br />
<b><br /></b>
The complete source code of this application is available <a href="http://wptrafficanalyzer.in/angularjs/countrylist.zip" rel="nofollow">here</a><br />
<b><br /></b>
<b><br /></b>
<b><br /></b></div>
Evan Georgehttp://www.blogger.com/profile/18070892987188313205noreply@blogger.com2