एंजुलरजेएस इन्स्ट्रक्शन

एंजुलरजेएस आपको एक नाम के अनुसार इस्तेमाल करने की अनुमति देता हैइन्स्ट्रक्शनके नए अभियात्मक विशेषताओं को विस्तारित करता है。

एंजुलरजेएस एक सेट इनबुट इन्स्ट्रक्शन्स है, जो आपके एप्लिकेशन को फंक्शन उपलब्ध कराता है。

AngularJS आदेश आपको अपने आदेश को बनाने की अनुमति देता है।

एंजुलरजेएस इन्स्ट्रक्शन

AngularJS आदेश HTML के विस्तारित एट्रिब्यूट हैं जो आदेश के पूर्व-संयोजक के साथ आते हैं ng-.

जब वेब पेज लोड होता है आदेश AngularJS एप्लिकेशन को चालू करता है。

ng-init आदेश एप्लिकेशन डाटा को चालू करता है。

ng-model डिरेक्टिव HTML नियंत्रक (input, select, textarea) के मूल्य को अनुप्रयोग डाटा के साथ बांधती है.

कृपया AngularJS आदेश संदर्भ में आपको AngularJS के सभी आदेशों के बारे में पढ़ें।

इंस्टांस

<div ng-app="" ng-init="firstName='Bill'">
<p>नाम: <input type="text" ng-model="firstName"></p>
<p>आपने लिखा: {{ firstName }}</p>
</ul>

स्वयं प्रयोग करें

जब वेब पेज लोड होता है आदेश नॉग जानता है कि <div> एलीमेंट AngularJS एप्लिकेशन का 'मालिक' है

डाटा बांधन

ऊपरी उदाहरण में {{ firstName }} एक्सप्रेशन एक AngularJS डाटा बांधन एक्सप्रेशन है。

AngularJS में डाटा बांधन AngularJS एक्सप्रेशन को AngularJS डाटा से बांधता है。

{{ firstName }} और ng-model="firstName" बांधे गए हैं।

अगले उदाहरण में, दो टेक्स्ट फील्ड दो नॉग-मॉडेल आदेशों के द्वारा बांधे गए हैं:

इंस्टांस

<div ng-app="" ng-init="quantity=1;price=5">
संख्या: <input type="number" ng-model="quantity">
लागत:    <input type="number" ng-model="price">
कुल डॉलर में: {{ quantity * price }}
</ul>

स्वयं प्रयोग करें

उपयोग करके ng-init अधिक आम नहीं है। आपको नियंत्रक के बारे में एक अध्याय में इसे सीखा जाएगा कि आपको डाटा को कैसे चालू करना है。

दोहराना HTML एलीमेंट

ng-repeat आदेश दोहराना HTML एलीमेंट:

इंस्टांस

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  {name:'Kai',country:'Denmark'}]
    <ul>
      {{ x }}
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

स्वयं प्रयोग करें

ng-repeat आदेश वास्तव में खण्ड के प्रत्येक आइटम के लिएएक बार HTML एलीमेंट को क्लोन करता है.

ऑब्जेक्ट अर्रेय के लिए उपयोग किया जाता है ng-repeat आदेश:

इंस्टांस

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
{name:'Kai',country:'Denmark'}]
  <ul>
    <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}
</li>
</ul>

स्वयं प्रयोग करें

</div>

अंगुलरजेएस डाटाबेस CRUD (सृजन, पढ़ना, अद्यतन, विलोपन) अनुप्रयोग के लिए बहुत ही सही है。

यदि ये ऑब्जेक्ट डाटाबेस से आए हों

जब वेब पेज लोड होता है ng-init डिरेक्टिव अंगुलरजेएस अनुप्रयोग कोng-app डिरेक्टिव.

जीत एलीमेंटजब वेब पेज लोड होता है ng-app डिरेक्टिवस्वचालित लोडस्वचालित रूप से इनिशियलाइज करता है.

ng-init डिरेक्टिव

ng-init ng-init डिरेक्टिव अंगुलरजेएस अनुप्रयोग कोप्रारंभिक मूल्य.

सामान्यतया, आप ng-init का प्रयोग नहीं करेंगे. आप नियंत्रक या मॉड्यूल का प्रयोग करेंगे.

आपको बाद में नियंत्रक और मॉड्यूल के बारे में अधिक जानकारी मिलेगी.

ng-model डिरेक्टिव

ng-model डिरेक्टिव HTML नियंत्रक (input, select, textarea) के मूल्य को अनुप्रयोग डाटा के साथ बांधती है.

ng-model डिरेक्टिव इसके अलावा भी कर सकते हैं:

  • अनुप्रयोग डाटा को टाइप तथ्यांक (संख्या, ईमेल, अनिवार्य) प्रदान करें
  • अनुप्रयोग डाटा को स्थिति (अवैध, अस्वीकृत, टच किया, त्रुटि) प्रदान करें
  • HTML एलीमेंट को CSS क्लास प्रदान करें
  • HTML एलीमेंट को HTML फॉर्म के साथ बांधा जाएगा

अगले चैप्टर में अधिक जानकारी पढ़ें ng-model डिरेक्टिव के बारे में जानकारी.

नए डिरेक्टिव बनाना

सभी आवृत्ति के अंगुलरजेएस डिरेक्टिव के अलावा, आप अपने डिरेक्टिव को भी बना सकते हैं。

नए डिरेक्टिव को बनाने के लिए .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 -->

स्वयं प्रयोग करें

सीमित

आप अपने इन्स्ट्रक्शन को केवल कुछ विधियों के माध्यम से कॉल करने में सीमित कर सकते हैं。

इंस्टांस

एक मान के रूप में जोड़कर "A" का restrict प्रकृति के लिए एटरिब्यूट, इस इन्स्ट्रक्शन को केवल एटरिब्यूट के माध्यम से कॉल किया जा सकता है:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

स्वयं प्रयोग करें

सही रिस्ट्रिक्ट वैल्यू

  • ई एलिमेंट नाम के लिए प्रयोग किया जाता है
  • ए प्रकृति के लिए प्रयोग किया जाता है
  • सी क्लास के लिए प्रयोग किया जाता है
  • एम टिप्पणी के लिए प्रयोग किया जाता है

डिफ़ॉल्ट में यह मान ईएयानि एलिमेंट नाम और अटरिब्यूट नाम दोनों को इन्स्ट्रक्शन कॉल कर सकते हैं。