Store 4 JavaScript Applications

Data binding is the process of synchronizing or linking of model data with view data.

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.

AngularJS library provides this two way data binding mechanism.

In AngularJS web applications, data binding can be easily achieved using the directives ngBind and ngModel.

In this article, we will develop a simple AngularJS application that demonstrates how use ngBind and ngModel directives for data binding.

In order to develop this application, please follow the given below steps.

1. Create a directory structure as shown below

Directory Structure

2. Download the latest version of AngularJS library

Download latest version of AngularJS library file ( angular.min.js )

3. Copy the downloaded AngularJS library file to databinding/lib/angular

4. Create an html page with ngBind and ngModel directives

databinding/index.html

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

5. Open the page in a web browser

The text typed in the textbox will be displayed instantaneously in the web page.

Screenshot of the page index.html in a web browser

6. Live Demo

The live demo of this application is available here

7. Download

You can download the application with complete directory structure from here

AngularJS is a javascript library that facilitates web programmers to extend html to include programming logic inside html.

In this article we will develop a web application that lists a set of countries in a web page.

Major files used in this application include :

countrylist/lib/angularjs.min.js : This is the AngularJS library file.

countrylist/js/countrycontroller.js : This is a javascript file containing controller function which can fetch, process and inject various data into html code.

countrylist/index.html : This is the view of the application that users sees.

In order to create a simple web application using AngularJS, please follow the given below steps :

1. Create a directory structure as shown below

Directory structure of this application

2. Download AngularJS library

We can download AngularJS library file (angular.min.js) from here. After downloading the file, copy the file angular.min.js to the directory angular.

3. Download Image Files

Download and extract the file to the directory "countrylist/imgs"

4. Create a file namely countrycontroller.js in the folder js

countrylist/js/countrycontroller.js

/** 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' }
  ];

}

5. Create a file namely index.html in countrylist

countrylist/index.html

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

6. Running the application

Open the file index.html in a web browser. Then you can see a list of countries as shown in the given below figure.

Screenshot of the AngularJS application

7. Tryout

You can tryout this application online here

8. Download

The complete source code of this application is available here

Store 4 JavaScript Applications

Monday 29 July 2013

Two way data binding in AngularJS with ngBind and ngModel directives

Saturday 27 July 2013

Starting up an AngularJS web application