AngularJS हेलो वर्ल्ड: आपका पहला उदाहरण प्रोग्राम

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

⚡ स्मार्ट सारांश

AngularJS हेलो वर्ल्ड प्रोग्राम को केवल एक HTML फ़ाइल, एक स्क्रिप्ट संदर्भ और दो डायरेक्टिव, ng-app और ng-controller की आवश्यकता होती है, ताकि डबल-ब्रैकेट एक्सप्रेशन के माध्यम से कंट्रोलर स्कोप वेरिएबल को पेज में बाइंड किया जा सके।

  • 🔘 एनजी-ऐप: ng-app विशेषता रूट एलिमेंट को चिह्नित करती है और नामित AngularJS मॉड्यूल को स्वचालित रूप से बूटस्ट्रैप करती है।
  • ️ एनजी-कंट्रोलर: ng-controller, helloWorldCtrl को h1 एलिमेंट से जोड़ता है, जिससे कंट्रोलर स्कोप वहां उपलब्ध हो जाता है।
  • ✅ स्कोप बाइंडिंग: कंट्रोलर के अंदर $scope.message असाइन करने से व्यू में प्रदर्शित {{message}} एक्सप्रेशन को फीड किया जाता है।
  • 🧪 एक फाइल: एक एचटीएमएल फाइल और एक स्क्रिप्ट रेफरेंस से उदाहरण चलाया जा सकता है, इसके लिए किसी बिल्ड स्टेप की आवश्यकता नहीं है।
  • ️ समस्या निवारण: स्क्रीन पर दिखने वाले अक्षरशः कोष्ठक का मतलब लगभग हमेशा यही होता है कि लाइब्रेरी लोड नहीं हुई या ng-app मौजूद नहीं है।
  • 📊 संस्करण नोट: AngularJS के लिए समर्थन जनवरी 2022 में समाप्त हो गया, जिसका अंतिम संस्करण 1.8.3 था; नया काम Angular में किया जाना चाहिए।
विस्तार में पढ़ें

AngularJS हैलो वर्ल्ड एनजी-ऐप और एनजी-कंट्रोलर का उपयोग करने वाला पहला उदाहरण प्रोग्राम है

AngularJS एप्लिकेशन की शक्ति को देखने का सबसे अच्छा तरीका AngularJS में अपना पहला बुनियादी प्रोग्राम "हेलो वर्ल्ड" ऐप बनाना है।

आप कई एकीकृत विकास वातावरणों का उपयोग कर सकते हैं AngularJS विकास के क्षेत्र में, कुछ लोकप्रिय तकनीकों का उल्लेख नीचे किया गया है। हमारे उदाहरण में, हम उपयोग कर रहे हैं Webstorm हमारे आईडीई के रूप में.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. विजुअल स्टूडियो

नमस्ते दुनिया, AngularJS

संस्करण नोट: AngularJS 1.x का लॉन्ग टर्म सपोर्ट 31 दिसंबर 2021 को समाप्त हो गया, और फ्रेमवर्क टीम इसकी पुष्टि करती है। AngularJS के लिए समर्थन आधिकारिक तौर पर समाप्त हो गया है। जनवरी 2022 में, 1.8.3 अंतिम रिलीज़ थी और इसके बाद कोई सुरक्षा पैच जारी नहीं किए गए। नीचे दिए गए प्रत्येक चरण और कोड ब्लॉक को ठीक उसी रूप में संरक्षित किया गया है जैसा लिखा गया था। नए प्रोजेक्ट आधुनिक एंगुलर में होने चाहिए, जहां यही प्रक्रिया शुरू होती है। एनजी सर्व और एक स्टैंडअलोन घटक और अभी भी उसी का उपयोग करता है {{ }} इंटरपोलेशन सिंटैक्स।

नीचे दिया गया उदाहरण AngularJS में अपना पहला “Hello world” एप्लिकेशन बनाने का सबसे आसान तरीका दिखाता है।

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

एनोटेटेड एंगुलरजेएस हेलो वर्ल्ड एचटीएमएल फ़ाइल जिसमें ng-app, ng-controller, स्क्रिप्ट संदर्भ और स्कोप वेरिएबल के लिए सात क्रमांकित कॉलआउट हैं।

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code स्पष्टीकरण:

  1. "एनजी-ऐप"AngularJS" कीवर्ड का उपयोग यह दर्शाने के लिए किया जाता है कि इस एप्लिकेशन को AngularJS एप्लिकेशन माना जाना चाहिए। इस एप्लिकेशन को कोई भी नाम दिया जा सकता है।
  2. कंट्रोलर वह है जिसका उपयोग बिजनेस लॉजिक को रखने के लिए किया जाता है। h1 टैग में, हम एक्सेस करना चाहते हैं। नियंत्रकजिसमें "हेलो वर्ल्ड" प्रदर्शित करने का लॉजिक होगा, इसलिए हम कह सकते हैं कि इस टैग में हम "हेलोवर्ल्डकंट्रोल" नामक कंट्रोलर को एक्सेस करना चाहते हैं।
  3. हम “message” नामक एक सदस्य चर का उपयोग कर रहे हैं जो “Hello World” संदेश प्रदर्शित करने के लिए एक प्लेसहोल्डर के अलावा कुछ नहीं है।
  4. “स्क्रिप्ट टैग” का उपयोग angular.js स्क्रिप्ट को संदर्भित करने के लिए किया जाता है, जिसमें AngularJS के लिए सभी आवश्यक कार्यक्षमताएँ मौजूद होती हैं। इस संदर्भ के बिना, यदि हम किसी भी AngularJS फ़ंक्शन का उपयोग करने का प्रयास करते हैं, तो वे काम नहीं करेंगे।
  5. "कंट्रोलर" वह जगह है जहाँ हम वास्तव में अपना बिज़नेस लॉजिक बना रहे हैं, जो हमारा कंट्रोलर है। प्रत्येक कीवर्ड की बारीकियों को आगे के अध्यायों में समझाया जाएगा। ध्यान देने वाली बात यह है कि हम 'HelloWorldCtrl' नामक एक कंट्रोलर मेथड को परिभाषित कर रहे हैं, जिसका संदर्भ चरण 2 में दिया गया है।
  6. हम एक फ़ंक्शन बना रहे हैं जिसे हमारे कोड द्वारा इस कंट्रोलर को कॉल करने पर कॉल किया जाएगा। $scope ऑब्जेक्ट AngularJS में एक विशेष ऑब्जेक्ट है जो AngularJS के भीतर उपयोग किया जाने वाला एक वैश्विक ऑब्जेक्ट है। $scope ऑब्जेक्ट का उपयोग कंट्रोलर और व्यू के बीच डेटा को प्रबंधित करने के लिए किया जाता है।
  7. हम "मैसेज" नामक एक सदस्य चर बना रहे हैं, उसे "हेलो वर्ल्ड" का मान असाइन कर रहे हैं और सदस्य चर को स्कोप ऑब्जेक्ट से जोड़ रहे हैं।

ध्यान दें: एनजी-कंट्रोलर निर्देश एक कीवर्ड है जिसे परिभाषित किया गया है AngularJS (चरण 2) में ng-controller का उपयोग आपके एप्लिकेशन में कंट्रोलर को परिभाषित करने के लिए किया जाता है। हमारे एप्लिकेशन में, हमने 'HelloWorldCtrl' नामक कंट्रोलर को परिभाषित करने के लिए ng-controller कीवर्ड का उपयोग किया है। कंट्रोलर के लिए वास्तविक लॉजिक (चरण 5) में बनाया जाएगा।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

'हैलो वर्ल्ड' संदेश प्रदर्शित होगा।

ब्राउज़र विंडो शीर्षक GuruAngularJS स्कोप वेरिएबल से "हेलो वर्ल्ड" शीर्षक को रेंडर करना 99

AngularJS को कैसे लोड करें: CDN या स्थानीय फ़ाइल

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

उस फाइल को लाने के दो तरीके हैं।

  1. CDN कॉपी का संदर्भ लें। यह उदाहरण इंगित करता है code.angularjs.org और पिन संस्करण 1.6.9। वह होस्ट अभी भी 1.x बिल्ड प्रदान करता है, उच्चतम संस्करण 1.8.2 है, जबकि Google होस्टेड लाइब्रेरी में अब AngularJS सूचीबद्ध नहीं है।
  2. स्थानीय प्रति डाउनलोड करें। फ़ाइल को HTML पेज के बगल में सेव करें और स्क्रिप्ट टैग को उस फ़ाइल की ओर इंगित करें। स्थानीय कॉपी होने से उदाहरण ऑफ़लाइन भी काम करता रहेगा, जो तब महत्वपूर्ण होता है जब कोई प्रॉक्सी CDN को ब्लॉक कर देता है।
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

उपयोग angular.js सीखते समय और angular.min.js उत्पादन में: बिना मिनिमाइज़ किए बिल्ड पठनीय स्टैक प्रिंट करता है tracजबकि मिनिफाइड बिल्ड में नाम बदले गए वेरिएबल्स की रिपोर्ट होती है।

फाइल लोड हो जाने के बाद, ng-app यह फ्रेमवर्क शुरू करता है। AngularJS दस्तावेज़ के लोड होने के बाद उस विशेषता को खोजता है, उस तत्व को संकलन रूट मानता है, और उसके मान में उल्लिखित मॉड्यूल को बूटस्ट्रैप करता है। इसके तीन परिणाम होते हैं:

  • केवल पहला ng-app किसी पेज पर मौजूद पेज अपने आप बूटस्ट्रैप हो जाता है। दूसरे पेज को अनदेखा कर दिया जाता है जब तक कि वह पेज पूरी तरह से तैयार न हो जाए। angular.bootstrap इसे मैन्युअल रूप से कॉल किया जाता है।
  • मान में पंजीकृत मॉड्यूल का नाम होना चाहिए। कोणीय मॉड्यूलअन्यथा कंसोल रिपोर्ट करता है [$injector:modulerr].
  • रखकर ng-app पर html उदाहरण के तौर पर, element पूरे दस्तावेज़ को AngularJS के अंतर्गत ले आता है; एक संकरा कंटेनर भी काम करता है।
मिस न करें:

{{ }} एक्सप्रेशन और ng-model बाइंडिंग कैसे काम करते हैं

चारों ओर दोहरे ब्रेसेस message h1 टैग में मौजूद टेक्स्ट एक प्लेसहोल्डर नहीं है जो लोड होने पर एक बार भर जाता है। AngularJS उस टेक्स्ट नोड को आसपास के नोड्स पर वॉचर के रूप में कंपाइल करता है। क्षेत्रइसलिए प्रतिपादित आउटपुट tracks $scope.message जब तक वह पेज मौजूद रहेगा।

यह चक्र तीन चरणों में चलता है।

  1. नियंत्रक एक मान लिखता है $scope.
  2. डाइजेस्ट पास प्रत्येक देखे गए एक्सप्रेशन की तुलना उसके पिछले परिणाम से करता है।
  3. जिन अभिव्यक्तियों के मान में परिवर्तन हुआ है, उन्हें उसी स्थान पर पुनः प्रस्तुत किया जाता है।

इसलिए एक इंटरपोलेटेड एक्सप्रेशन एकतरफा होता है, स्कोप से व्यू की ओर। दोतरफा बाइंडिंग की आवश्यकता होती है। एनजी मॉडल, निदेश फॉर्म नियंत्रणों के लिए डिज़ाइन किया गया। जोड़ें <input ng-model="message"> शीर्षक के बगल में, बॉक्स में टाइप करें, और प्रत्येक कीस्ट्रोक पर शीर्षक बदल जाएगा, क्योंकि ng-model फ़ील्ड मान को उसी स्कोप प्रॉपर्टी पर वापस लिखता है जिसे एक्सप्रेशन देखता है।

एक्सप्रेशन जानबूझकर सीमित होते हैं। वे स्कोप प्रॉपर्टीज़ को पढ़ते हैं, स्कोप मेथड्स को कॉल करते हैं और अपरिभाषित मानों को चुपचाप सहन करते हैं, फिर भी वे वैरिएबल घोषित नहीं कर सकते, कंट्रोल-फ्लो स्टेटमेंट्स का उपयोग नहीं कर सकते या ग्लोबल ऑब्जेक्ट्स तक नहीं पहुँच सकते। window.

खाली पेज या अनुत्तरित {{ }} को कैसे ठीक करें

पहला AngularJS प्रोग्राम दो स्पष्ट तरीकों में से किसी एक में विफल हो जाता है: पृष्ठ खाली रहता है, या शाब्दिक पाठ {{message}} जहां 'हेलो वर्ल्ड' होना चाहिए, वहां यह दिखाई देता है। दोनों का मतलब है कि फ्रेमवर्क ने मार्कअप को अपने नियंत्रण में नहीं लिया। ब्राउज़र कंसोल खुला रखते हुए, नीचे दिए गए जांचों को क्रम से पूरा करें।

  1. लाइब्रेरी लोड हो गई है, इसकी पुष्टि करें। नेटवर्क पैनल खोलें और उसे ढूंढें angular.js अनुरोध। 404 त्रुटि या अप्राप्य सीडीएन होने पर स्क्रीन पर कोष्ठक अपरिवर्तित रहते हैं।
  2. स्क्रिप्ट पथ की जाँच करें। एक रिलेटिव पाथ HTML फ़ाइल वाले फ़ोल्डर के विरुद्ध रिजॉल्व होता है, इसलिए एक कॉपी में js सबफ़ोल्डर की आवश्यकता है js/angular.min.js.
  3. एनजी-ऐप को सत्यापित करें। किसी विशेषता का न होना या गलत वर्तनी होना यह दर्शाता है कि कुछ भी बूटस्ट्रैप नहीं होगा। विशेषता को हाइफ़न लगाकर लिखा जाता है। ng-app मार्कअप में, भले ही निर्देश कैमल केस में हो। Javaस्क्रिप्ट।
  4. कंसोल त्रुटि पढ़ें। [$injector:modulerr] इसका मतलब है कि ng-app द्वारा नामित मॉड्यूल कभी पंजीकृत नहीं हुआ था। [ng:areq] आमतौर पर इसका मतलब यह होता है कि मार्कअप में नियंत्रक का नाम, पास किए गए नाम से मेल नहीं खाता है। .controller().
  5. दूसरे ng-app की तलाश करें। केवल पहला भाग ही बूटस्ट्रैप किया जाता है, इसलिए किसी आंतरिक तत्व पर छोड़ी गई एक अतिरिक्त प्रतिलिपि चुपचाप पृष्ठ के उस भाग को निष्क्रिय कर देती है।

दो अन्य कारण शेष रिपोर्टों के अधिकांश भाग के लिए जिम्मेदार हैं।

  • फाइल प्रोटोकॉल। यह सिंगल-फाइल उदाहरण डिस्क से सीधे खोलने पर ठीक से चलता है, लेकिन XHR के माध्यम से प्राप्त कोई भी टेम्प्लेट ब्राउज़र के ओरिजिन नियमों द्वारा अवरुद्ध हो जाता है। टेम्प्लेट उपलब्ध होने पर फ़ोल्डर को HTTP के माध्यम से सर्व करें।
  • दांतों के ब्रेसेस की एक झलक। जब फ्रेमवर्क द्वारा संकलन से पहले मार्कअप रेंडर होता है, तो कुछ क्षणों के लिए मूल अभिव्यक्ति दिखाई देती है। जोड़ें ng-cloak तत्व के लिए, या अभिव्यक्ति को बदलें ng-bind="message"जो कभी भी अपना खुद का मार्कअप प्रदर्शित नहीं करता है।

यदि इनमें से कोई भी लागू नहीं होता है, तो पृष्ठ को ऊपर दिए गए उदाहरण तक छोटा करें और अपना कोड एक-एक पंक्ति करके वापस जोड़ें।

अक्सर पूछे जाने वाले प्रश्न

ऊपर सूचीबद्ध चारों में से कोई भी तरीका काम करता है, और इस उदाहरण में इसका उपयोग किया गया है। Webstormक्योंकि यह प्रोग्राम एक ही स्थिर HTML फ़ाइल है, इसलिए एक साधारण टेक्स्ट एडिटर ही पर्याप्त है। IDE केवल डायरेक्टिव कंप्लीशन, लाइव रीलोड और इंटीग्रेटेड डिबगिंग जैसी सुविधाएँ प्रदान करता है।

$scope एक बाइंडिंग ऑब्जेक्ट है जो दो ऑब्जेक्ट्स के बीच साझा किया जाता है। नियंत्रक और इसका दृश्य। HelloWorldCtrl के अंदर $scope.message लिखने से h1 तत्व पर रखे गए एक्सप्रेशन के लिए वह प्रॉपर्टी दृश्यमान हो जाती है।

दोनों फ़ाइलों में एक ही फ्रेमवर्क है। angular.js को मिनिमाइज़ नहीं किया गया है, इसलिए त्रुटियाँ पठनीय स्रोत की ओर इशारा करती हैं। angular.min.js को उत्पादन के लिए संपीड़ित किया गया है और इसमें स्पष्ट निर्भरता एनोटेशन की आवश्यकता होती है, क्योंकि मिनिमाइज़ेशन उन पैरामीटर नामों को बदल देता है जिनकी AngularJS अन्यथा जाँच करता है।

यहां AngularJS का 1.x फ्रेमवर्क दिखाया गया है, जो डायरेक्टिव, $scope और प्लेन द्वारा संचालित है। Javaएंगुलर स्क्रिप्ट, यानी संस्करण 2 और उसके बाद के संस्करण, एक अलग स्क्रिप्ट है। TypeScript यह फ्रेमवर्क घटकों पर आधारित है और सक्रिय रूप से अनुरक्षित लाइन है।

मुख्य रूप से मौजूदा 1.x अनुप्रयोगों को बनाए रखने के लिए, जो अभी भी व्यापक रूप से उपयोग किए जाते हैं। बाइंडिंग, डायरेक्टिव और शब्दावली निर्भरता अन्तःक्षेपण स्थानांतरण संभव थे, लेकिन जनवरी 2022 में समर्थन समाप्त हो गया, इसलिए नए प्रोजेक्ट आधुनिक एंगुलर में ही होने चाहिए।

जी हां। प्रत्येक को एक ही मॉड्यूल पर .controller() के साथ रजिस्टर करें और ng-controller का उपयोग करके उन्हें अलग-अलग तत्वों से जोड़ें। प्रत्येक को अपना चाइल्ड स्कोप मिलता है, इसलिए समान नाम वाली प्रॉपर्टी स्वतंत्र रहती हैं।

आधुनिक सहायक 1.x कोडबेस को पढ़ते हैं और सुझाए गए घटक और सेवा समकक्षों के साथ निर्देशों, फ़िल्टरों और सेवाओं की एक सूची तैयार करते हैं। यह सूची स्कोरिंग के लिए उपयोगी है।ping काम, हालांकि हर नक्शाping अभी भी मैन्युअल सत्यापन की आवश्यकता है।

गिटहब कोपिलॉट कंट्रोलर बॉयलरप्लेट, $स्कोप असाइनमेंट और को पूरा करता है एनजी-सबमिट एक संक्षिप्त टिप्पणी से हैंडलर मिलते हैं, लेकिन इसका प्रशिक्षण आधुनिक एंगुलर की ओर झुका हुआ है, इसलिए जांच लें कि सुझाव वास्तव में 1.x सिंटैक्स का उपयोग करते हैं।

इस पोस्ट को संक्षेप में इस प्रकार लिखें: