Angularjs in Hindi Directives

First Page

Angularjs मे Directives का उपयोग HTML की Working Capacity की Detailed को बड़ा देता है. AngularJs मे आप बहुत सारी Directive का उपयोग कर सकते है. इनका उपयोग आप अपनी जरूरत के हिसाब से अपने Project मे कर सकते है. दोस्तों अगर आप चाहे तो अपनी जरूरत के अनुसार अपनी Directive भी बना सकते है.

AngularJS मे Directives एक New Attributes है जिसका उपयोग HTML का विस्तार करने के लिए किए जाता है. Angularjs मे Built-in Instructions का एक Set है जो आपके Applications की कार्यक्षमता को प्रदान करता है. इसके अलावा यह आपको अपने खुद के Instructions को भी Define करने देता है.

AngularJS Web Developers के लिए एक Attractive Frame है यह वास्तव मे Applications के निर्माण का एक बिल्कुल अलग तरीका है.

ng-app Directive

यह Directive Root Element को Define करके एक AngularJS Applications को शुरू करता है और Web Page जिसमे Applications शामिल होते है Load होने पर यह Automatic रूप से AngularJS Applications को प्रारंभ या Bootstrap करता है. इसके अलावा इस Instructions का उपयोग करके विभिन्न AngularJS Module को भी Load किया जा सकता है.

<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 Applications Data के प्रारंभ मे यह Instructions बहुत महत्वपूर्ण होता है. यह उपयोग किए जाने वाले विभिन्न Variable की Values को असाइन करने के लिए उपयोग होता है.

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

ng-model Directive

यह AngularJS Application Data की Values को HTML Input Controls से जोड़ता है.

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

ng-repeat Directive

ng-repeat Directive Collection मे प्रत्येक Item के लिए HTML Elements को दोहराता है

<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>

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Directives Example</title>
      <script src = 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </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>   
   </body>
</html>

Output