AngularJS निर्देश: एनजी-इनिट, एनजी-ऐप, एनजी-मॉडल और एनजी-रिपीट
जेम्स हार्टमैन
AngularJS में डायरेक्टिव क्या है?
A निर्देशक AngularJS में एक कमांड है जो HTML को नई कार्यक्षमता प्रदान करता है। जब Angular HTML कोड से गुजरता है, तो वह सबसे पहले पेज में निर्देशों को खोजेगा और फिर उसके अनुसार HTML पेज को पार्स करेगा। AngularJS निर्देश का एक सरल उदाहरण, जिसे हमने पिछले अध्यायों में देखा है, वह है "ng-model निर्देश"। इस निर्देश का उपयोग हमारे डेटा मॉडल को हमारे दृश्य से जोड़ने के लिए किया जाता है।
नोट: आप ng-init, ng-repeat और ng-model निर्देशों के साथ HTML पेज में बेसिक एंगुलर कोड रख सकते हैं, बिना कंट्रोलर की आवश्यकता के। इन निर्देशों के लिए तर्क Angular.js फ़ाइल में है जो Google द्वारा प्रदान की जाती है। नियंत्रक अगले स्तर के एंगुलर प्रोग्रामिंग निर्माण हैं जो व्यावसायिक तर्क की अनुमति देते हैं, लेकिन जैसा कि उल्लेख किया गया है कि किसी एप्लिकेशन को एंगुलर एप्लिकेशन होने के लिए नियंत्रक होना अनिवार्य नहीं है।
AngularJS में डायरेक्टिव कैसे बनाएं
जैसा कि हमने परिचय में परिभाषित किया है, AngularJS निर्देश कार्यक्षमता का विस्तार करने का एक तरीका है एचटीएमएल.
इसमें 4 निर्देश परिभाषित हैं AngularJS.
नीचे AngularJS निर्देशों की सूची दी गई है, साथ ही उनमें से प्रत्येक को समझाने के लिए उदाहरण भी दिए गए हैं।
AngularJS में ng-app
इसका उपयोग Angular.JS एप्लीकेशन को आरंभ करने के लिए किया जाता है। जब यह निर्देश HTML पेज में होता है, तो यह मूल रूप से Angular को बताता है कि यह HTML पेज एक Angular.js एप्लीकेशन है।
np-app का उदाहरण
नीचे दिया गया उदाहरण ng-app निर्देश का उपयोग करने का तरीका दिखाता है। इस उदाहरण में, हम बस यह दिखाने जा रहे हैं कि एक सामान्य HTML एप्लिकेशन को AngularJS एप्लिकेशन कैसे बनाया जाए।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
कोड स्पष्टीकरण:
- “ng-app” निर्देश हमारे div टैग में यह इंगित करने के लिए जोड़ा गया है कि यह एप्लिकेशन एक angular.js एप्लिकेशन है। ध्यान दें कि ng-app निर्देश किसी भी टैग पर लागू किया जा सकता है, इसलिए इसे बॉडी टैग में भी डाला जा सकता है।
- चूँकि हमने इस एप्लिकेशन को एक angular.js एप्लिकेशन के रूप में परिभाषित किया है, इसलिए अब हम angular.js कार्यक्षमता का उपयोग कर सकते हैं। हमारे मामले में, हम 2 स्ट्रिंग को जोड़ने के लिए एक्सप्रेशन का उपयोग कर रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट स्पष्ट रूप से अभिव्यक्ति का आउटपुट दिखाता है जो केवल इसलिए संभव हो पाया क्योंकि हमने एप्लिकेशन को AngularJS एप्लिकेशन के रूप में परिभाषित किया था।
AngularJS में ng-init
इसका उपयोग एप्लिकेशन डेटा को आरंभ करने के लिए किया जाता है। कभी-कभी आपको अपने एप्लिकेशन के लिए कुछ स्थानीय डेटा की आवश्यकता हो सकती है, यह ng-init निर्देश के साथ किया जा सकता है।
ng-init का उदाहरण
नीचे दिया गया उदाहरण दिखाता है कि ng-init निर्देश का उपयोग कैसे किया जाता है।
इस उदाहरण में, हम ng-init निर्देश का उपयोग करके “TutorialName” नामक एक चर बनाने जा रहे हैं और पृष्ठ पर उस चर का मान प्रदर्शित करेंगे।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
कोड स्पष्टीकरण:
- ng-init निर्देश को हमारे div टैग में "TutorialName" नामक एक स्थानीय चर को परिभाषित करने के लिए जोड़ा जाता है और इसे दिया गया मान "AngularJS" है।
- हम AngularJs में अभिव्यक्तियों का उपयोग "TutorialName" नाम के चर का आउटपुट प्रदर्शित करने के लिए कर रहे हैं, जिसे हमारे ng-init निर्देश में परिभाषित किया गया था।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट में,
- परिणाम स्पष्ट रूप से अभिव्यक्ति का आउटपुट दिखाता है जिसमें स्ट्रिंग “AngularJS” शामिल है। यह ng-init अनुभाग में चर 'TutorialName' को स्ट्रिंग “AngularJS” असाइन किए जाने के परिणामस्वरूप है।
AngularJS में ng-मॉडल
और अंत में, हमारे पास ng-model निर्देश है, जिसका उपयोग HTML नियंत्रण के मान को एप्लिकेशन डेटा से बांधने के लिए किया जाता है। नीचे दिया गया उदाहरण दिखाता है कि ng-model निर्देश का उपयोग कैसे किया जाता है।
एनजी-मॉडल का उदाहरण
इस उदाहरण में,
- हम “मात्रा” और “मूल्य” नामक 2 चर बनाने जा रहे हैं। ये चर 2 टेक्स्ट इनपुट नियंत्रणों से बंधे होने जा रहे हैं।
- फिर हम मूल्य और मात्रा दोनों मानों के गुणन के आधार पर कुल राशि प्रदर्शित करने जा रहे हैं।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
कोड स्पष्टीकरण:
- ng-init निर्देश को हमारे div टैग में दो स्थानीय चर परिभाषित करने के लिए जोड़ा जाता है; एक को "मात्रा" और दूसरे को "मूल्य" कहा जाता है।
- अब हम “लोग” और “पंजीकरण मूल्य” के टेक्स्ट बॉक्स को क्रमशः हमारे स्थानीय चर “मात्रा” और “मूल्य” से बांधने के लिए ng-model निर्देश का उपयोग कर रहे हैं।
- अंत में, हम कुल को एक अभिव्यक्ति के माध्यम से दिखा रहे हैं, जो कि मात्रा और मूल्य चर का गुणन है।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
- आउटपुट में लोगों और पंजीकरण मूल्य के मानों का गुणन स्पष्ट रूप से दिखाया गया है।
अब, यदि आप टेक्स्ट बॉक्स में जाकर लोगों और पंजीकरण मूल्य का मान बदलते हैं, तो कुल संख्या स्वतः ही बदल जाएगी।
- उपरोक्त आउटपुट केवल एंगुलरजेएस में डेटा बाइंडिंग की शक्ति को दर्शाता है, जो के उपयोग से प्राप्त किया जाता है एनजी-मॉडल निर्देश.
AngularJS में ng-रिपीट
इसका उपयोग HTML तत्व को दोहराने के लिए किया जाता है। नीचे दिया गया उदाहरण दिखाता है कि इसका उपयोग कैसे किया जाता है एनजी-रिपीट निर्देश.
एनजी-रिपीट का उदाहरण
इस उदाहरण में,
- हम एक सरणी चर में अध्याय नामों की एक सरणी बनाने जा रहे हैं और
- फिर सरणी के प्रत्येक तत्व को सूची आइटम के रूप में प्रदर्शित करने के लिए ng-repeat निर्देश का उपयोग करें
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
कोड स्पष्टीकरण:
- ng-init निर्देश को हमारे div टैग में "chapters" नामक एक चर को परिभाषित करने के लिए जोड़ा जाता है, जो 3 स्ट्रिंग्स वाला एक सरणी चर है।
- एनजी-रिपीट तत्व का उपयोग "नाम" नामक इनलाइन चर घोषित करके और अध्याय सरणी में प्रत्येक तत्व के माध्यम से जाकर किया जाता है।
- अंत में, हम स्थानीय इनलाइन चर 'names' का मान दिखा रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
- उपरोक्त आउटपुट केवल यह दर्शाता है कि ng-repeat निर्देश ने “chapters” नामक सारणी में प्रत्येक मान लिया और सारणी में प्रत्येक आइटम के लिए HTML सूची आइटम बनाए।
सारांश
- HTML की कार्यक्षमता बढ़ाने के लिए डायरेक्टिव का उपयोग किया जाता है। Angular इनबिल्ट डायरेक्टिव प्रदान करता है जैसे कि
- ng-app - इसका उपयोग कोणीय अनुप्रयोग को आरंभ करने के लिए किया जाता है।
- ng-init – इसका उपयोग एप्लिकेशन वैरिएबल बनाने के लिए किया जाता है
- ng-model – इसका उपयोग HTML नियंत्रणों को एप्लिकेशन डेटा से बांधने के लिए किया जाता है
- ng-repeat – कोणीय का उपयोग करके तत्वों को दोहराने के लिए उपयोग किया जाता है।
