AngularJS निर्देश
AngularJS आपको Directive नामक नई विशेषताओं के साथ HTML का विस्तार करने देता है ।
AngularJS में अंतर्निहित निर्देशों का एक सेट है जो आपके अनुप्रयोगों को कार्यक्षमता प्रदान करता है।
AngularJS आपको अपने निर्देशों को परिभाषित करने की सुविधा भी देता है।
AngularJS निर्देश
AngularJS निर्देश उपसर्ग के साथ विस्तारित HTML विशेषताएँ हैं ng-।
निर्देश एक AngularJS एप्लिकेशन को ng-appइनिशियलाइज़ करता है।
ng-initनिर्देश एप्लिकेशन डेटा को इनिशियलाइज़ करता है ।
ng-modelनिर्देश HTML नियंत्रणों (इनपुट, चयन, टेक्स्टारिया) के मूल्य को एप्लिकेशन डेटा से बांधता है ।
हमारे AngularJS निर्देश संदर्भ में सभी AngularJS निर्देशों के बारे में पढ़ें ।
उदाहरण
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
निर्देश AngularJS को यह ng-appभी बताता है कि <div> तत्व AngularJS एप्लिकेशन का "स्वामी" है।
डेटा बाइंडिंग
उपरोक्त {{ firstName }}उदाहरण में अभिव्यक्ति, एक AngularJS डेटा बाध्यकारी अभिव्यक्ति है।
AngularJS में डेटा बाइंडिंग AngularJS डेटा के साथ AngularJS एक्सप्रेशन को बांधता है।
{{ firstName }}से बंधा हुआ है ng-model="firstName"।
अगले उदाहरण में दो टेक्स्ट फ़ील्ड दो एनजी-मॉडल निर्देशों के साथ बंधे हुए हैं:
उदाहरण
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
उपयोग करना ng-initबहुत आम नहीं है। आप नियंत्रकों के बारे में अध्याय में डेटा को इनिशियलाइज़ करना सीखेंगे।
HTML तत्वों को दोहराना
ng-repeatनिर्देश एक HTML तत्व को दोहराता है :
उदाहरण
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
ng-repeatनिर्देश वास्तव
में संग्रह में प्रत्येक आइटम के लिए एक बार HTML तत्वों को क्लोन करता है।
ng-repeatवस्तुओं की एक सरणी पर प्रयुक्त निर्देश :
उदाहरण
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS डेटाबेस CRUD (क्रिएट रीड अपडेट डिलीट) एप्लिकेशन के लिए एकदम सही है।
जरा सोचिए कि क्या ये ऑब्जेक्ट किसी डेटाबेस से रिकॉर्ड थे।
इन-ऐप निर्देश
ng-appनिर्देश एक AngularJS एप्लिकेशन के मूल तत्व को परिभाषित करता है।
वेब पेज लोड होने पर निर्देश ऑटो-बूटस्ट्रैप (स्वचालित रूप से प्रारंभ) एप्लिकेशन को स्वचालित ng-appकरेगा ।
गर्मी निर्देश
ng-initनिर्देश एक AngularJS एप्लिकेशन के लिए प्रारंभिक मानों को परिभाषित करता है।
आम तौर पर, आप एनजी-इनिट का उपयोग नहीं करेंगे। आप इसके बजाय एक नियंत्रक या मॉड्यूल का उपयोग करेंगे।
आप नियंत्रकों और मॉड्यूल के बारे में बाद में और जानेंगे।
मॉडलिंग निर्देश
ng-modelनिर्देश HTML नियंत्रणों (इनपुट, चयन, टेक्स्टारिया) के मूल्य को एप्लिकेशन डेटा से बांधता है ।
ng-modelनिर्देश भी कर सकते हैं :
- एप्लिकेशन डेटा (संख्या, ईमेल, आवश्यक) के लिए प्रकार सत्यापन प्रदान करें।
- एप्लिकेशन डेटा के लिए स्थिति प्रदान करें (अमान्य, गंदा, छुआ हुआ, त्रुटि)।
- HTML तत्वों के लिए CSS कक्षाएं प्रदान करें।
- HTML तत्वों को HTML रूपों में बाँधें।
ng-modelअगले अध्याय में निर्देश के बारे में और पढ़ें ।
नए निर्देश बनाएं
सभी अंतर्निहित AngularJS निर्देशों के अलावा, आप अपने स्वयं के निर्देश बना सकते हैं।
.directiveफ़ंक्शन का उपयोग करके नए निर्देश बनाए जाते हैं ।
नए निर्देश को लागू करने के लिए, नए निर्देश के समान टैग नाम वाला एक HTML तत्व बनाएं।
निर्देश का नामकरण करते समय, आपको ऊंट केस नाम का उपयोग करना चाहिए
w3TestDirective, लेकिन इसे लागू करते समय, आपको -अलग नाम का उपयोग करना चाहिए w3-test-directive:
उदाहरण
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
आप इसका उपयोग करके निर्देश लागू कर सकते हैं:
- तत्व का नाम
- गुण
- कक्षा
- टिप्पणी
नीचे दिए गए उदाहरण सभी समान परिणाम देंगे:
तत्व का नाम
<w3-test-directive></w3-test-directive>
गुण
<div w3-test-directive></div>
कक्षा
<div class="w3-test-directive"></div>
टिप्पणी
<!-- directive: w3-test-directive -->
प्रतिबंध
आप अपने निर्देशों को केवल कुछ तरीकों से लागू करने के लिए प्रतिबंधित कर सकते हैं।
उदाहरण
restrictमूल्य के साथ एक संपत्ति जोड़कर "A", निर्देश केवल विशेषताओं द्वारा लागू किया जा सकता है:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
कानूनी प्रतिबंध मान हैं:
Eतत्व नाम के लिएAविशेषता के लिएCकक्षा के लिएMटिप्पणी के लिए
डिफ़ॉल्ट रूप से मान है EA, जिसका अर्थ है कि तत्व नाम और विशेषता नाम दोनों निर्देश को लागू कर सकते हैं।