AngularJS - पहला आवेदन

वास्तविक हैलो वर्ल्ड बनाने से पहले ! AngularJS का उपयोग करते हुए आवेदन, हमें एक AngularJS आवेदन के भागों को देखते हैं। एक AngularJS एप्लिकेशन में तीन महत्वपूर्ण भाग शामिल हैं -

  • ng-app - यह निर्देश परिभाषित करता है और एक AngularJS एप्लिकेशन को HTML से जोड़ता है।

  • ng-model - यह निर्देश HTML इनपुट नियंत्रणों के लिए AngularJS एप्लिकेशन डेटा के मूल्यों को बांधता है।

  • ng-bind - यह निर्देश HTML टैग्स के लिए AngularJS Application डेटा को बांधता है।

AngularJS अनुप्रयोग बनाना

चरण 1: फ्रेमवर्क लोड करें

एक शुद्ध जावास्क्रिप्ट फ्रेमवर्क होने के नाते, इसे <Script> टैग का उपयोग करके जोड़ा जा सकता है।

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

चरण 2: एनजी-ऐप निर्देश का उपयोग करके AngularJS एप्लिकेशन को परिभाषित करें

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

चरण 3: एनजी-मॉडल निर्देश का उपयोग करके एक मॉडल नाम को परिभाषित करें

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

चरण 4: एनजी-बिंद निर्देश का उपयोग करके परिभाषित उपरोक्त मॉडल के मूल्य को बांधें

<p>Hello <span ng-bind = "name"></span>!</p>

निष्पादन AngularJS अनुप्रयोग

HTML पृष्ठ में उपर्युक्त तीन चरणों का उपयोग करें।

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

उत्पादन

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

कैसे AngularJS HTML के साथ एकीकृत करता है

  • एनजी-ऐप निर्देश एंगुलरजेएस एप्लिकेशन की शुरुआत को इंगित करता है।

  • एनजी-मॉडल निर्देश नाम से एक मॉडल चर बनाता है, जिसका उपयोग एचटीएमएल पेज के साथ और एनवाई-ऐप निर्देश वाले डिव के भीतर किया जा सकता है।

  • एनजी-बिंद तब नाम मॉडल का उपयोग करता है जिसे HTML <span> टैग में प्रदर्शित किया जाता है जब भी उपयोगकर्ता टेक्स्ट बॉक्स में इनपुट दर्ज करता है।

  • बंद करना </ div> टैग AngularJS एप्लिकेशन के अंत को इंगित करता है।