Store 4 JavaScript Applications: Starting up an AngularJS web application

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.