AngularJS - पर्यावरण सेटअप

इस अध्याय में बताया गया है कि वेब एप्लिकेशन डेवलपमेंट में इस्तेमाल होने वाली एंगुलरजेएस लाइब्रेरी को कैसे सेट किया जाए। यह निर्देशिका संरचना और इसकी सामग्री के बारे में संक्षेप में बताता है।

जब आप लिंक खोलेंगे https://angularjs.org/, आप देखेंगे कि AngularJS लाइब्रेरी को डाउनलोड करने के लिए दो विकल्प हैं -

View on GitHub - इस बटन पर क्लिक करके, आपको GitHub पर ले जाया जाता है और सभी नवीनतम स्क्रिप्ट प्राप्त होती हैं।
Download AngularJS 1 - इस बटन पर क्लिक करने से, एक स्क्रीन जो आपको दिखाई गई डायलॉग बॉक्स के रूप में दिखाई देती है -

यह स्क्रीन एंगुलर JS का उपयोग करने के विभिन्न विकल्प देती है -

Downloading and hosting files locally
- दो अलग-अलग विकल्प हैं: विरासत और नवीनतम। नाम स्वयंभू हैं। लिगेसी में संस्करण 1.2.x से कम है और नवीनतम संस्करण 1.3.x के साथ आता है।
- हम कम से कम, असम्पीडित या ज़िपित संस्करण के साथ भी जा सकते हैं।
CDN access- आपके पास सीडीएन तक भी पहुंच है। CDN आपको क्षेत्रीय डेटा केंद्रों तक पहुँच प्रदान करता है। इस मामले में, Google होस्ट है। सीडीएन अपने सर्वर से फ़ाइलों की मेजबानी की जिम्मेदारी को बाहरी लोगों की एक श्रृंखला में स्थानांतरित करता है। यह एक लाभ भी प्रदान करता है कि यदि आपके वेब पेज के आगंतुक ने पहले से ही CDN से AngularJS की एक प्रति डाउनलोड कर रखी है, तो उसे फिर से डाउनलोड करने की कोई आवश्यकता नहीं है।

हम इस ट्यूटोरियल में लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं।

उदाहरण

अब हमें AngularJS लाइब्रेरी का उपयोग करके एक सरल उदाहरण लिखते हैं। आइए हम नीचे के रूप में दिखाए गए एक HTML फ़ाइल myfirstexample.html बनाते हैं -

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

आइये उपरोक्त कोड के बारे में विस्तार से जानते हैं -

AngularJS शामिल करें

हम HTML पृष्ठ में AngularJS JavaScript फ़ाइल शामिल करते हैं ताकि हम इसका उपयोग कर सकें -

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

आप इसकी आधिकारिक वेबसाइट पर AngularJS का नवीनतम संस्करण देख सकते हैं।

AngularJS एप्लिकेशन को इंगित करें

इसके बाद, यह बताना आवश्यक है कि HTML के किस भाग में AngularJS ऐप है। आप AngularJS ऐप के रूट HTML एलीमेंट में ng-app विशेषता जोड़कर ऐसा कर सकते हैं। आप इसे या तो html एलिमेंट या बॉडी एलिमेंट में जोड़ सकते हैं जैसा कि नीचे दिखाया गया है -

<body ng-app = "myapp">
</body>

राय

देखिए यह हिस्सा -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

एनजी-नियंत्रक एंगुलरजेएस को बताता है कि इस दृश्य के साथ किस नियंत्रक का उपयोग करना है। helloTo.title इस स्थान पर HTML में helloTo.title नाम के मॉडल मान को लिखने के लिए AngularJS को बताता है।

नियंत्रक

नियंत्रक हिस्सा है -

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

यह कोड myapp नाम के कोणीय मॉड्यूल में HelloController नामक एक नियंत्रक फ़ंक्शन को पंजीकृत करता है । हम उनके संबंधित अध्यायों में मॉड्यूल और नियंत्रकों के बारे में अधिक अध्ययन करेंगे । नियंत्रक फ़ंक्शन कोणीयुलर नोड्यूल (...) के माध्यम से कोणीय में पंजीकृत किया जाता है। नियंत्रक (...) फ़ंक्शन कॉल।

$ स्कोप पैरामीटर मॉडल कंट्रोलर फ़ंक्शन को दिया जाता है। कंट्रोलर फंक्शन में एक हेल्लो टोटो जावास्क्रिप्ट ऑब्जेक्ट जोड़ा जाता है, और उस ऑब्जेक्ट में यह एक टाइटल फील्ड जोड़ता है ।

क्रियान्वयन

उपरोक्त कोड को myfirstexample.html के रूप में सहेजें और इसे किसी भी ब्राउज़र में खोलें। आपको निम्न आउटपुट देखने को मिलते हैं -

Welcome AngularJS to the world of Tutorialspoint!

ब्राउज़र में पेज लोड होने पर क्या होता है? आइये देखते हैं -

HTML दस्तावेज़ को ब्राउज़र में लोड किया गया है, और ब्राउज़र द्वारा मूल्यांकन किया गया है।
AngularJS JavaScript फ़ाइल लोड की गई है, कोणीय वैश्विक ऑब्जेक्ट बनाया गया है।
नियंत्रक कार्यों को पंजीकृत करने वाले जावास्क्रिप्ट को निष्पादित किया जाता है।
इसके बाद, AngularJS एप्लिकेशन को HTML के माध्यम से स्कैन करके AngularJS एप्लिकेशन के साथ-साथ दृश्य भी खोजा जा सकता है।
दृश्य स्थित होने के बाद, यह उस दृश्य को संबंधित नियंत्रक फ़ंक्शन से जोड़ता है।
अगला, AngularJS नियंत्रक कार्यों को निष्पादित करता है।
यह तब नियंत्रक द्वारा आबादी वाले मॉडल के डेटा के साथ विचारों को प्रस्तुत करता है। पेज अब तैयार है।