एंगुलरजेएस - निर्देश

HTML को विस्तारित करने के लिए AngularJS निर्देशों का उपयोग किया जाता है। वे विशेष गुण हैं जिनके साथ शुरू होता हैng-prefix। आइए हम निम्नलिखित निर्देशों पर चर्चा करें -

ng-app - यह निर्देश एक AngularJS एप्लीकेशन शुरू करता है।
ng-init - यह निर्देश एप्लिकेशन डेटा को इनिशियलाइज़ करता है।
ng-model - यह निर्देश उस मॉडल को परिभाषित करता है जो AngularJS में उपयोग किए जाने वाला चर है।
ng-repeat - यह निर्देश एक संग्रह में प्रत्येक आइटम के लिए HTML तत्वों को दोहराता है।

एनजी एप्लिकेशन निर्देश

एनजी एप्लिकेशन निर्देश एक AngularJS अनुप्रयोग शुरू होता है। यह जड़ तत्व को परिभाषित करता है। जब AngularJS Application लोड होता है, तब यह स्वचालित रूप से एप्लिकेशन को आरंभ या बूटस्ट्रैप करता है। इसका उपयोग AngularJS Application में विभिन्न AngularJS मॉड्यूल को लोड करने के लिए भी किया जाता है। निम्नलिखित उदाहरण में, हम <div> तत्व के एनजी-ऐप विशेषता का उपयोग करके एक डिफ़ॉल्ट AngularJS एप्लिकेशन को परिभाषित करते हैं।

<div ng-app = "">
   ...
</div>

एनजी-इनिट निर्देश

एनजी-इन-डायरेक्टिव एक एंगुलरजेएस एप्लिकेशन डेटा को इनिशियलाइज़ करता है। इसका उपयोग चर को मान प्रदान करने के लिए किया जाता है। निम्नलिखित उदाहरण में, हम देशों की एक सरणी को इनिशियलाइज़ करते हैं। हम देशों की सरणी को परिभाषित करने के लिए JSON सिंटैक्स का उपयोग करते हैं।

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
   {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

एनजी-मॉडल निर्देश

एनजी-मॉडल निर्देश एंगुलरजेएस एप्लिकेशन में उपयोग किए जाने वाले मॉडल / चर को परिभाषित करता है। निम्न उदाहरण में, हम एक मॉडल नामित परिभाषित नाम ।

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

एनजी-दोहराएँ निर्देश

एनजी-रिपीट निर्देश एक संग्रह में प्रत्येक आइटम के लिए HTML तत्वों को दोहराता है। निम्नलिखित उदाहरण में, हम देशों की सरणी पर पुनरावृति करते हैं।

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
</div>

उदाहरण

निम्नलिखित उदाहरण सभी उपर्युक्त निर्देशों का उपयोग दर्शाता है।

testAngularJS.htm

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
         {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

उत्पादन

वेब ब्राउज़र में फ़ाइल testAngularJS.htm खोलें । अपना नाम दर्ज करें और परिणाम देखें।