AngularJS में Directives ये HTML के Elements के लिए Attributes होते है |
जैसे HTML में Element के लिए id, class या style ये attributes होते है |
AngularJS Directives ये HTML को विस्तृत करके और भी कार्यक्षमता प्रदान करता है |
निचे AngularJS Directives को दिया गया है |
- ng-app : ये directive AngularJS Application को define करता है |
- ng-model : ये directive Application data पर form elements(input, textarea, select) को bind करता है |
- ng-bind : ये directive application variable पर <p> element के innerHTML को bind करता है |
Example for Directives in AngularJS
Source Code :
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app = "" ng-init = "fruits = ['Orange','Mango','Banana','PineApple']">
Enter Name: <input type = "text" ng-model = "name"><br />
Hiii ! <span ng-bind = "name.toUpperCase()"></span><br />
<ol>
<li ng-repeat = "f in fruits">
{{ "fruit : " + f }}
</li>
</ol>
</div>
</body>
</html>
Output :
Hiii !
- {{ "fruit : " + f }}
User-Defined Directive in AngularJS
Page के Left side पर सभी Built-In Directives दी गयी है , लेकिन AngularJS में User-Defined Directives भी create की जाती है |
Directive को create किया जाता तब तब उसका इस्तेमाल Element या Element के Attibute के रूप में भी किया जाता है |
User-Defined Directive create करने के लिए 'directive()' function का इस्तेमाल किया जाता है |
अगर camelCase में Directive define की जाती है तब उस element को add करने के लिए हर Uppercase letter से पहले '-'(hyphen) दिया जाता है |
User-Defined Directive ये case-sensitive होती है और Directive define करते वक्त उसका पहला character lowercase में दिया जाता है |
Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="app">
<div my-Directive></div>
<my-Directive></my-Directive>
</div>
<script>
var myapp = angular.module("app", []);
myapp.directive("myDirective", function() {
return {template : "Hello World" };
});
</script>
</body>
</html>
Output :
Hello World
Hello World
AngularJS के सभी Directives को left side पर दिए गए है |