Post
Ask Question

Introduction To AngularJS – Day 6

Before moving to key players/concepts of AngularJS, please read my previous articles,

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5

Directives

Directives teach HTML new tricks. Today we are discussing remaining AngularJS directives and how to create custom AngularJS directive.

Using ng-repeat directive

This directive is also known as iterative directive like ‘C# for each()’. It is used for getting data from list or object or array one by one element. It can be used with any kind of element such as the rows of a table, the elements of a list, and even the options of ‘select’.

In the following example we iterate over the array of names and assign each element to the name variable,

  1. <!DOCTYPEhtml>  
  2. <htmlng-app="Csharp">  
  3.   
  4.     <head>  
  5.         <title>Directives in AngularJS</title>  
  6.         <scriptsrc="Scripts/angular.min.js">  
  7.             </script>  
  8.     </head>  
  9.     <bodyng-controller="Corner">  
  10.         <h2>Welcome to C# Corner</h2>  
  11.         <h3>Array of Names</h3>  
  12.         <ulng-repeat="name in names">  
  13.             <li>{{name}}</li>  
  14.             </ul>  
  15.             <scripttype="text/javascript">  
  16.                 var app = angular.module("Csharp", []); app.controller("Corner", function ($scope) { $scope.names = ['Sonali', 'Varsha', 'Sameer', 'Monika', 'Prasad']; });  
  17.             </script>  
  18.      </body>  
  19.   
  20. </html>  
The above code you can see, I created an array of names in controller using the $scope object and we are using ‘ng-repeat’ directive to iterate through the names. We used here unordered list to display records in array.

array

After running the code you can see the following output,

welcome

Using ng-click directive

It is one of the most useful kind of directives in the framework. It allows you to add any custom behavior to the click event of the element. The following example shows you how to use ‘ng-click’ directive.
  1. <!DOCTYPEhtml>  
  2. <htmlng-app="Csharp">  
  3.   
  4.     <head>  
  5.         <title>Directives in AngularJS</title>  
  6.         <scriptsrc="Scripts/angular.min.js">  
  7.             </script>  
  8.     </head>  
  9.     <bodyng-controller="Corner">  
  10.         <h2>Welcome to C# Corner</h2>  
  11.         <h3>Event Directives</h3>  
  12.         <h3ng-show="show">ng-click directive example</h3>  
  13.             <inputtype="button" value="ShowMe" ng-click="ShowMe()" />  
  14.             <scripttype="text/javascript">  
  15.                 var app = angular.module("Csharp", []); app.controller("Corner", function ($scope) { $scope.show = false; $scope.ShowMe = function () { $scope.show = true; } });  
  16.   
  17.         </script>  
  18.     </body>  
  19.   
  20. </html>  
The above code you can see we are using here two directives ‘ng-show’ and ‘ng-click’. In ‘ng-click’ directive we added new behavior, i.e. when you click on button it call function ‘ShowMe()’ of controller. Like properties if you have to use function in view that time you have to create a function using the ‘$scope’ object. And another directive is used for displaying the text like the directive names define its own, ‘ng-show’ means you have to work on some hide and show functionality on view. That time we use this directive with ‘true’ or ‘false’ value for that directive.

directive

When we run the code sample above it shows output like the following,

sample
After clicking the above ‘ShowMe’ button call goes to controller. Here's the image and value is set to ‘true’ and text will be displayed.

ShowMe

You can see in the preceding image that when I click on button ‘ng-click’ event calls the controller function.

ng-click

After resuming the debugging output like above you can see that the newly added text is ‘ng-click directive example’.

Using ng-disabled directive

The ng-disabled directive can disable elements based on the Boolean value of anexpression. For that see the following example,
  1. <!DOCTYPEhtml>  
  2. <htmlng-app="Csharp">  
  3.   
  4.     <head>  
  5.         <title>Directives in AngularJS</title>  
  6.         <scriptsrc="Scripts/angular.min.js">  
  7.             </script>  
  8.     </head>  
  9.     <bodyng-controller="Corner">  
  10.         <h2>Welcome to C# Corner</h2>  
  11.         <h3>Event Directives</h3>  
  12.         <h3ng-show="show">ng-click directive example</h3>  
  13.             <inputtype="button" value="ShowMe" ng-click="ShowMe()" ng-disabled="true" />  
  14.             <scripttype="text/javascript">  
  15.                 var app = angular.module("Csharp", []); app.controller("Corner", function ($scope) { $scope.show = false; $scope.ShowMe = function () { $scope.show = true; } });  
  16.   
  17.         </script>  
  18.     </body>  
  19.   
  20. </html>  
We are using same example and just added the new directive to button tag i.e. ‘ng-disable’ and set value to ‘true’ like the following image,

true

After executing the above code you can see the following output but the button ‘ShowMe’ is disable.

ShowMe

Great, we learned various built in directives in AngularJS with example successfully.

Summary

I hope that beginners as well as students understand the concept of Directives in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.

Thanks for reading. 


Similar Articles