Post
Ask Question

AngularJS Core Directives: Include, Click and Repeat

About

This article provides an idea of some more directives like ng-include, ng-click and ng-repeat in AngularJs.

This article is just a continuation of my previous article about Quick Start On AngularJS. So, please read that to get the initial/basic idea of AngularJS.

ng-include

This is an AngularJS directive, it is very helpful to include the various files in a main page using the ng-include attribute.

 
For example, you have one page layout that contains a header, body, footer and so on. In that scenario, you can create various HTML files for a header and footer then you can include those in the main HTML file. Because of this implementation the page looks cleaner and the code/design is also separated.

Sample Application

The header.html file contains the following.

  1. <div style='Width:100%;border:5px solid gray;text-align:center;'>  
  2.   Header of the site  
  3. </div> 

The footer HTML file contains the following.

  1. <div style='Width:100%;border:5px solid gray;text-align:center;'>  
  2.   Copyright Ramchand @2014  
  3. </div> 

The main index.html file contains the following.

 
code
 
The previous index.html contains the ng-include attributes for header and footer divs with the respective HTML file path values that should be specified in single quotes.

Now, when you run the index.html file, the output looks as in the following.

 
  
You can run the application using Plunker tool at  AngularJS include.

ng-click

This is also one of the directives, you can use this in one of the scenarios like when you click on a button if you do any operation then this would be useful.

Scenario: The form contains an input text box and Search button, whenever the user enters a value into a text box and clicks on the search button you need to display the user-entered value, if the user clicks on the search button without entering anything then we need to display a message.

The index.html file looks as in the following.

 
 
 
The DemoClick.js file contains the following lines of JavaScript code.
  1. (function() {  
  2.   var app = angular.module("DemoClickApp", []);  
  3.   
  4.   var DemoController = function($scope) {  
  5.     $scope.Search = function(empname) {  
  6.       if (empname)  
  7.         $scope.result = "You have searched for " + empname;  
  8.       else  
  9.         $scope.result = "Please enter employee name";  
  10.     };  
  11.   };  
  12.   app.controller("DemoController", DemoController);  
  13. })(); 

Now, when you run the index.html file by default it looks as in the following.


If you click on the Search button without entering any value in the text box then the output screen displays an alert kind of message as "Please enter employee name" that looks as in the following.

 
 

Now, you can enter some value into a text box and click on the search box and then the displayed screen is as follows.

 
You can run the previous discussed example using the Plunker tool at AngularJS click.

ng-repeat

This directive is like a foreach loop in C#. By using this directive you can display a collection of items in a view (HTML page).

 
Scenario: You can display a list of employees using the ng-repeat directive in AngularJS.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <!-- 1. Angular JS Script CDN reference added  -->  
  6.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">  
  7.   </script>  
  8.   <!-- 2. Script JS Reference -->  
  9.   <script src="Employee.js"></script>  
  10. </head>  
  11. <!-- 3. ng-app directive included -->  
  12.   
  13. <body ng-app="DemoRepeatApp">  
  14.   <h1>List of Emplooyees</h1>  
  15.   <!-- 4. ng-controller directive included -->  
  16.   <form ng-controller="DemoController">  
  17.     <table>  
  18.       <thead>  
  19.         <tr>  
  20.           <th>Name</th>  
  21.           <th>Designation</th>  
  22.           <th>Location</th>  
  23.         </tr>  
  24.       </thead>  
  25.       <tbody>  
  26.       <!-- 5. ng-repeat directive included -->  
  27.         <tr ng-repeat="emp in employees">  
  28.           <td>{{emp.Name}}</td>  
  29.           <td>{{emp.Designation}}</td>  
  30.           <td>{{emp.Location}}</td>  
  31.         </tr>  
  32.       </tbody>  
  33.     </table>  
  34.   </form>  
  35. </body>  
  36.   
  37. </html> 
The previous HTML file is self explanatory since it contains point-by-point details in comments format. The fifth point is that you have added something as a ng-repeat attribute with the value of "emp in employees". Here "employees" is the collection value that is obtained from the Employee.JS controller.
 
The Employee.js contains the following lines of JavaScript code.
  1. (function() {  
  2.   var app = angular.module("DemoRepeatApp", []);  
  3.   
  4.   var DemoController = function($scope) {  
  5.     var sampleEmployees = '[' +  
  6.       '{ "Name":"Ramchand" , "Designation":"SSE" , "Location":"Bhubhaneswar" },' +  
  7.       '{ "Name":"Lakshman" , "Designation":"DBA" , "Location":"Noida" },' +  
  8.       '{ "Name":"ABC" , "Designation":"Team Lead" , "Location":"Banglore" } ]';  
  9.     $scope.employees = JSON.parse(sampleEmployees);  
  10.   };  
  11.   app.controller("DemoController", DemoController);  
  12. })(); 

The following describes the Employee.js file: 

  1. Angular module created with the name DemoRepeatApp.

  2. The variable DemoController is assigned for the Controller action.

  3. The Controller contains a variable named "sampleEmployees" that contains a list of sample employess in JSON format.

  4. Assign the JSON converted sample employees list to the $scope.employees object. 
Now, you can run the index.html file and then the output will be displayed as in the following.

 
You can run the previous example using Plunker at AngularJS Repeat .

Conclusion

This article provided an idea of core directives of ng-include, ng-click and ng-repeat in AngularJS. 


Similar Articles