1. What are Directives in AngularJS?
Directives in AngularJS are special attributes or markers in the HTML that tell AngularJS to manipulate the DOM (Document Object Model) and extend its functionality.
- They help in creating dynamic, reusable, and interactive UI components.
- Directives are prefixed with
ng-(e.g.,ng-model,ng-bind,ng-repeat). - Custom directives can be created to define reusable components.
2. Types of Directives in AngularJS
AngularJS provides built-in directives, and developers can also create custom directives.
A. Built-in Directives
| Directive | Purpose |
|---|---|
ng-app | Defines the root element of an AngularJS application. |
ng-model | Binds form input elements (two-way data binding). |
ng-bind | Replaces the content of an element with a model’s value. |
ng-repeat | Iterates over an array and creates multiple elements dynamically. |
ng-if | Conditionally adds/removes elements from the DOM. |
ng-show / ng-hide | Shows or hides elements based on a condition. |
ng-class | Dynamically applies CSS classes. |
ng-click | Handles click events. |
B. Custom Directives
- Used to define reusable UI components and custom behaviors.
- Created using
app.directive()in AngularJS.
3. Examples of AngularJS Directives
Example 1: Using ng-model and ng-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Directives Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app>
<h2>ng-model and ng-bind Example</h2>
<p>Enter your name:</p>
<input type="text" ng-model="name">
<p>Hello, <span ng-bind="name"></span>!</p>
</body>
</html>
Explanation:
ng-model="name"→ Binds the input field to thenamevariable.ng-bind="name"→ Dynamically updates the content when the user types.
Example 2: Using ng-repeat (Looping through data)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ng-repeat Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h2>ng-repeat Example</h2>
<ul>
<li ng-repeat="fruit in fruits">{{ fruit }}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.fruits = ["Apple", "Banana", "Orange", "Mango"];
});
</script>
</body>
</html>
Explanation:
ng-repeat="fruit in fruits"→ Loops through thefruitsarray and creates<li>elements dynamically.
Example 3: Using ng-if, ng-show, and ng-hide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Directives Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h2>Conditional Directives</h2>
<button ng-click="showMessage = !showMessage">Toggle Message</button>
<p ng-if="showMessage">This message appears when ng-if is true.</p>
<p ng-show="showMessage">This message appears when ng-show is true.</p>
<p ng-hide="showMessage">This message appears when ng-hide is false.</p>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.showMessage = false;
});
</script>
</body>
</html>
Explanation:
ng-if="showMessage"→ Adds or removes the element from the DOM.ng-show="showMessage"→ Shows the element whenshowMessageis true.ng-hide="showMessage"→ Hides the element whenshowMessageis true.
4. Creating a Custom Directive
AngularJS allows developers to define custom directives using app.directive().
Example: Creating a Custom Directive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Directive Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h2>Custom Directive Example</h2>
<custom-message></custom-message>
<script>
var app = angular.module("myApp", []);
// Define a Custom Directive
app.directive("customMessage", function() {
return {
template: "<p>This is a custom directive!</p>"
};
});
</script>
</body>
</html>
Explanation:
app.directive("customMessage")→ Defines a directive named<custom-message>.template: "<p>This is a custom directive!</p>"→ Defines what the directive should display.
5. Benefits of Using Directives
Reusability → Create reusable UI components.
Improved Readability → Simplifies complex UI logic.
Better Code Structure → Separates logic from HTML.
Enhanced DOM Manipulation → Provides direct control over the DOM.
Easier Maintenance → Reduces code duplication.
6. Directives vs. Controllers
| Feature | Directives | Controllers |
|---|---|---|
| Purpose | Extends HTML with custom behavior | Handles business logic |
| Reusability | High (Reusable components) | Limited (Specific to a controller scope) |
| Focus | UI Manipulation | Data Management & Logic |
| Example | ng-repeat, ng-if, custom directives | $scope variables and functions |