Angularjs - Directives in Hindi




Angular में डायरेक्टिव का उपयोग HTML की कार्य क्षमता के विस्तार को बड़ा देता है हमको AngularJs में कई सारे डायरेक्टिव मिल जाते है और इनका उपयोग हम अपनी जरूरत के हिसाब से अपने प्रोजेक्ट में कर सकते हैं अगर हम चाहे तो अपनी जरूरत के अनुसार खुद का डायरेक्टिव भी बना सकते हैं

AngularJS में directives एक new attributes हैं जिसका का यूज़ HTML का विस्तार करने के लिए किए जाता है angularJS में अंतर्निहित निर्देशों का एक सेट है जो आपके अनुप्रयोगों की कार्यक्षमता को प्रदान करता हैं; इसके अलावा, यह आपको अपने खुद के निर्देशों को भी परिभाषित करने देता है इस ट्यूटोरियल में हम कुछ सामान्य निर्देशों के बारे में चर्चा करेंगे

यह lesson directives की मूल बातें पर आधारित है और इस lesson में हम सीखेंगे की कैसे निर्देशों के माध्यम से हम अपने खुद के HTML एक्सटेंशन का निर्माण कर सकते हो AngularJS वेब डेवलपर्स के लिए एक आकर्षक ढांचा है यह वास्तव में applications के निर्माण का एक बिल्कुल अलग तरीका है

ng-app directive

यह directive रूट तत्व को परिभाषित करके एक angularJS अनुप्रयोग को शुरू करता है और web page जिसमें एप्लिकेशन शामिल है लोड होने पर यह automatic रूप से AngularJS अनुप्रयोग को प्रारंभ या bootstrap करता है इसके अलावा, इस निर्देश का उपयोग करके विभिन्न angularJS मॉड्यूल को भी लोड किया जा सकता है

<div ng-app="" ng-init="firstName='Rahul'">
 <p>Name:  <input type="text" ng-model="firstName"> </p>
 <p>You wrote: {{ firstName }} </p>
 </div>

ng-init directive

AngularJS एप्लिकेशन डेटा के प्रारंभ में यह instructions बहुत महत्वपूर्ण होता है यह उपयोग किए जाने वाले different चर के मानों को असाइन करने के लिए यूज़ होता है निम्नलिखित उदाहरण बताता है कि JSON सिंटैक्स का उपयोग करते हुए देशों की एक array कैसे प्रारंभ करें।

<div ng-app = "" ng-init = "countries = [{locale:'en-JP',name:'Japan'}, 
{locale:'en-PAK',name:'Pakistan'}, {locale:'en-AF',name:'Afghanistan'}]">  
   ...  
</div> 

Example Code

<!DOCTYPE html>
<html>  
  <head>  
      <title>AngularJS Directives</title>  
   </head>  
     
   <body>  
      <h1>This is Application</h1>  
        
      <div ng-app = "" ng-init = "countries = [{locale:'en-FIN',name:'Finland'}, {locale:'en-NOR',name:'Norway'}, {locale:'en-CAN',name:'Canada'}]">   
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>  
         <p>Hello <span ng-bind = "name"></span>!</p>  
         <p>This is the List of Countries</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>  

Example Result

AngularJS Directives

This is Application

Enter your Name:

Hello !

This is the List of Countries

  1. {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}