List of Important directives
Some of the important directives of Angular JS are:
The ng-app
The ng-app directive is used to initialize AngularJS. It makes the selected element a root element of the application.
The ng-init
By using this directive, we can initialize variables in the AngularJS application.
The example below shows the ng-init directive that initializes variables of number, string object, and array.
<!DOCTYPE html>
<html >
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body >
<div ng-app ng-init="greet='Hello everyone!'; amount= 150; myArray = [150, 500]; address = { city:'Panipat', state :'Haryana'}">
{{amount}} <br />
{{myArray[1]}} <br />
{{address.city}}
</div>
</body>
</html>
Result:
150
500
Panipat
In the above-given example, we initialized variables of number, string, object, and array. We can use these variables anywhere in the DOM element hierarchy where they are declared, e.g., variables in this example cannot be used outside of <div> element.
The ng-model
The two-way data binding in AngularJS is done by using this directive. It binds <select>, <input> or <textarea> elements to a specified property on the $scope object. So, the value of the property will be the value of the element and vice-versa.
<!DOCTYPE html>
<html >
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
<input type="text" ng-model="name" />
<div>
Hello {{name}}
</div>
</body>
</html>
We can access the property set via ng-model in a controller using the $scope object.
Note: Variables initialized in ng-init and the properties defined using ng-model directive are two different things. The ng-model properties are attached to the $scope object, whereas the variables initialized in ng-init are not linked to the $scope object.
The ng-bind
The ng-bind directive binds the ng-model directive, or the model property declared via the $scope or the expression’s result to the HTML element. If the value of expression changes, then It also updates the element.
<!DOCTYPE html>
<html >
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="">
<div>
12 + 12 = <span ng-bind="12 + 12"></span> <br />
Enter your name: <input type="text" ng-model="name" /><br />
Hello <span ng-bind="name"></span>
</div></body>
</html>
In the above-given example, the ng-bind directive binds the result of an expression "12 + 12" to the <span>. In the same way, it binds the value of a model property "name" to the <span>. The value entered in the textbox will be the value of the "name" property.
The ng-repeat
The purpose of the ng-repeat directive is to repeat HTML once per item present in the array collection.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
div {
width: 80%;
height: 150px;
display: block;
text-align:center;
background-color:blue;
}
</style>
</head>
<body ng-app="" ng-init="students=['Sunil','Harshad','Anmol']">
<ol>
<li ng-repeat="name in students">
{{name}}
</li>
</ol>
<div ng-repeat="name in students">
{{name}}
</div>
</body>
</html>
In the above-given example, We used ng-repeat with students array. It creates <li> element for each item present in the student’s array. In the same way <div> element is repeated.
The ng-disabled
The ng-disabled directive decides to make an HTML element disabled based on the Bool value returned from the specified expression. True means the element will disable, otherwise not.
The ng-if
The ng-if directive decides to create or remove an HTML element based on the Bool value returned from the specified expression. True means it recreates an element; otherwise, the element is removed from the HTML document.
The ng-readonly
The ng-readonly directive decides to make an HTML element read-only based on the Bool value returned from the specified expression. True means the element will become read-only, otherwise not.
The example given below demonstrates ng-if, ng-read-only, and ng-disabled directives.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
div {
width: 80%;
height: 150px;
display: block;
margin: 15px 0 0 10px;
}
</style>
</head>
<body ng-app ng-init="checked=true" >
Click Me: <input type="checkbox" ng-model="checked" /> <br />
<div>
New: <input ng-if="checked" type="text" />
</div>
<div>
Read-only: <input ng-readonly="checked" type="text" value="This is read-only." />
</div>
<div>
Disabled: <input ng-disabled="checked" type="text" value="This is disabled." />
</div>
</body>
</html>
Important points about Directive Syntax
– We can start Directive with data- or x-, it is not compulsory to use ng- syntax only.
Example- ng-model or data-ng-model or x-ng-model all three are correct syntax-wise.
– We can replace” -” in the directive with “_” or “ : ” or both.
Example- ng-model or ng_model or ng:model all are correct syntax-wise.
Custom Structural Directive
In AngularJS, custom directives are used to enhance the functionality of HTML. The "directive" function is used to define custom directives.
AngularJS program discovers matching elements during bootstrap and performs a one-time action using the compile() method of the custom directive, then processes the element using the link() method based on the directive's scope.
AngularJS allows us to write custom directives for the elements listed below.
- Element: Directive activates when a matching element is found.
- Attribute: Directive activates when a matching attribute is found.
- CSS: Directive activates when a matching CSS style is found.
- Comment: Directive activates when a matching comment is found.
Advantages of AngularJS Directive
Some of the advantages of using directives are:
- Directives help write repeatable and independent code.
- They modularize the code by grouping requirement-specific functions together.
- A modular code with well-defined directives can handle its operations and data.
- The HTML page and Angular scripts become less cluttered and more ordered.
Frequently Asked Question
1). What is the function of the ng-paste directive?
Answer- This directive specifies behaviour on paste events.
2). What is the function of the ng-keypress directive?
Answer- This directive specifies behaviour on keypress events.
3). What is the function of the ng-list directive?
Answer- This directive converts text into an array(list).
4). What is the function of the ng-required directive?
Answer- This directive specifies the required attribute of an element.
5). What is the function of the ng-options directive?
Answer- This directive specifies <options> in a <select> list.
Key Takeaways
So let’s brief everything that we have learned in this blog.
In this blog, we learned about different AngularJS directives and their functions and which directive is used for which situation.
If you are interested in javascript, You can expand your knowledge by referring to these articles on JavaScript.
Also, if you are preparing for interviews, visit this JavaScript interview question blog.
Happy Reading!
305+ registered