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 एप्लिकेशन के अंत को इंगित करता है।