ANGULAR JS | Directives of Angular JS By. Sunrise Computers
ANGULAR JS
ANGULAR JS | DIRECTIVES
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
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 = "students = ['Lalit','Vikas','Manish','Prince']">
Enter Name: <input type = "text" ng-model = "name"><br />
Hiii ! <span ng-bind = "name.toUpperCase()"></span><br />
<ol>
<li ng-repeat = "s in students">
{{ "student : " + f }}
</li>
</ol>
</div>
</body>
</html>
Output :
Enter Name: Students
Hiii ! Students
Students : Lalit
Students : Vikas
Students : Manish
Students : Prince
ANGULAR JS | DIRECTIVES | USER - DEFINED
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
For Any Doubt Clear on Telegram Discussion Group
Comments
Post a Comment