In AngularJS, directives are special markers or instructions used to extend HTML with custom attributes, elements, or behaviors. Directives allow you to attach specific behaviors to elements in the DOM (Document Object Model) or modify the HTML in some way. They are one of the most powerful features of AngularJS and are used to create reusable components, manipulate the DOM, and bind data dynamically.
AngularJS provides a set of built-in directives like ng-app, ng-model, ng-init, etc. These directives simplify web development by enhancing the behavior of HTML elements.
1. What is a Directive?
A directive in AngularJS is a way to extend HTML functionality by adding custom attributes or elements to the HTML structure. Directives can be used for data binding, DOM manipulation, conditionally rendering content, handling events, and much more.
Directives can be categorized into three types:
- Structural Directives: They manipulate the DOM structure, such as
ng-if,ng-repeat. - Attribute Directives: They modify the behavior or appearance of an element, such as
ng-model,ng-class. - Component Directives: A combination of both structural and attribute directives, commonly used to create reusable components in AngularJS.
2. Commonly Used Built-In Directives in AngularJS
Let’s go over some of the most commonly used built-in AngularJS directives: ng-app, ng-model, ng-init, ng-repeat, and others.
A. ng-app
The ng-app directive defines the root element of an AngularJS application. It tells AngularJS to treat the HTML element as part of the AngularJS app and bootstraps the application.
Syntax:
<html ng-app>
Example:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Example</title>
</head>
<body>
<h1>Welcome to AngularJS!</h1>
</body>
</html>
In this example, the ng-app directive tells AngularJS that this HTML file is part of an AngularJS application. The application can be initialized, and its functionality can be attached to the HTML structure inside the <body>.
B. ng-model
The ng-model directive binds an HTML element (input, select, textarea) to a variable in the AngularJS controller. This is one of the most important directives for two-way data binding, as it ensures that any changes in the user interface are reflected in the model (data) and vice versa.
Syntax:
<input type="text" ng-model="variableName">
Example:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p>Hello, {{ name }}!</p>
</div>
Controller:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.name = "John";
});
In this example, the ng-model="name" directive binds the value entered in the input field to the name variable in the controller. When the user types something in the input field, it updates the name model, and the updated value is reflected in the paragraph (<p> tag).
C. ng-init
The ng-init directive is used to initialize variables or expressions in the AngularJS controller at the time of loading the HTML. It is mostly used for quick initialization of variables in the view.
Syntax:
<div ng-init="variableName = value">
Example:
<div ng-app="myApp" ng-init="name='AngularJS'">
<h1>{{ name }}</h1>
</div>
In this example, ng-init="name='AngularJS'" initializes the name variable with the value 'AngularJS'. When the page loads, this variable is displayed inside the <h1> tag as “AngularJS”.
D. ng-repeat
The ng-repeat directive is used to repeat an HTML element for each item in an array or object. It is most commonly used in looping through a list of items and displaying them dynamically.
Syntax:
<div ng-repeat="item in array">
{{ item }}
</div>
Example:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
</div>
Controller:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Orange'];
});
In this example, ng-repeat="item in items" loops over the items array and displays each fruit in a list.
E. ng-show and ng-hide
The ng-show and ng-hide directives are used to conditionally display or hide an HTML element based on an expression’s truthiness. The element will be shown if the expression is true for ng-show or hidden if the expression is false for ng-hide.
Syntax for ng-show:
<div ng-show="expression">Content</div>
Syntax for ng-hide:
<div ng-hide="expression">Content</div>
Example:
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="show = !show">Toggle Visibility</button>
<div ng-show="show">
<p>This content is conditionally shown.</p>
</div>
</div>
Controller:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.show = false;
});
In this example, when the button is clicked, the value of show toggles between true and false. If show is true, the <div> containing the paragraph is displayed, and if show is false, it is hidden.
F. ng-class
The ng-class directive allows you to dynamically apply or remove CSS classes based on an expression or model value.
Syntax:
<div ng-class="expression"></div>
Example:
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-class="{'highlight': isHighlighted}">This is a text.</p>
<button ng-click="isHighlighted = !isHighlighted">Toggle Highlight</button>
</div>
Controller:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.isHighlighted = false;
});
In this example, the ng-class directive adds the highlight CSS class to the <p> element if the isHighlighted variable is true. The button toggles the isHighlighted variable, and the class is added or removed based on its value.
G. ng-click
The ng-click directive is used to attach a click event to an HTML element. When the element is clicked, the specified expression or function is executed.
Syntax:
<button ng-click="functionName()">Click Me</button>
Example:
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="alert('Hello!')">Click Me</button>
</div>
In this example, the ng-click directive triggers the JavaScript alert when the button is clicked.