AngularJS Directives के प्रकार (Types of Directives)
AngularJS में मुख्य रूप से Directives दो प्रकार की होती हैं—
- Built-in Directives (इनबिल्ट डायरेक्टिव्स)
- Custom Directives (कस्टम डायरेक्टिव्स)
Directives HTML को dynamic और interactive बनाने का कार्य करती हैं।
1. Built-in Directives
ये वे Directives होती हैं जो AngularJS में पहले से बनी हुई होती हैं।
इनका उपयोग सीधे HTML में किया जा सकता है।
AngularJS कई built-in directives प्रदान करता है जैसे:
- ng-app
- ng-model
- ng-bind
- ng-repeat
- ng-show
- ng-hide
- ng-if
- ng-click
- ng-controller आदि।
2. Custom Directives
Custom Directives वे directives होती हैं जिन्हें programmer स्वयं बनाता है।
इनका उपयोग reusable components बनाने के लिए किया जाता है।
यानी Directive = अपना खुद का HTML Element/Tag बनाना, जिससे HTML को Reusable और आसान बनाया जा सके।
app.directive("myMessage", function() {
return {
template:"<h1>Hello Students</h1>"
};
});
myMessage नाम का Custom HTML Tag बनाओ।
जब भी<my-message>लिखा जाए,तो
<h1>Hello Students</h1>
दिखाओ।
Syntax
app.directive("directiveName", function() {
return {
template : "HTML Code"
};
});
Example:-
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<my-message></my-message>
<script>
var app = angular.module("myApp", []);
app.directive("myMessage", function() {
return {
template : "<h1>Hello Students</h1>"
};
});
</script>
</body>
</html>