AngularJS Application की शक्ति को देखने का सबसे अच्छा तरीका है कि आप Angular.JS में अपना पहला बेसिक प्रोग्राम "Hello World" ऐप बनाएं।
कई एकीकृत विकास वातावरण हैं जिन्हें आप AngularJS विकास के लिए उपयोग कर सकते हैं, उनमें से कुछ लोकप्रिय हैं जिनका उल्लेख नीचे किया गया है। हमारे उदाहरण में, हम अपने IDE के रूप में वेबस्टॉर्म का उपयोग कर रहे हैं।
- वेबस्टॉर्म
- उदात्त पाठ
- कोणीयजेएस ग्रहण
- विजुअल स्टूडियो
नमस्ते दुनिया, AngularJS
नीचे दिया गया उदाहरण AngularJS में आपके पहले "हैलो वर्ल्ड" एप्लिकेशन को बनाने का सबसे आसान तरीका दिखाता है।
Guru99 {{message}}
कोड स्पष्टीकरण:
- " एनजी-ऐप " कीवर्ड का उपयोग यह बताने के लिए किया जाता है कि इस एप्लिकेशन को कोणीय js एप्लिकेशन माना जाना चाहिए। इस एप्लिकेशन को कोई भी नाम दिया जा सकता है।
- नियंत्रक वह है जो व्यावसायिक तर्क रखने के लिए उपयोग किया जाता है। H1 टैग में, हम कंट्रोलर को एक्सेस करना चाहते हैं, जिसमें "HelloWorld" को प्रदर्शित करने के लिए तर्क होगा, इसलिए हम कह सकते हैं, इस टैग में हम "HelloWorldCtrl" नाम के कंट्रोलर को एक्सेस करना चाहते हैं।
- हम "संदेश" नामक एक सदस्य चर का उपयोग कर रहे हैं जो "हैलो वर्ल्ड" संदेश प्रदर्शित करने के लिए एक प्लेसहोल्डर के अलावा कुछ भी नहीं है।
- "स्क्रिप्ट टैग" का उपयोग कोणीय.जेएस स्क्रिप्ट को संदर्भित करने के लिए किया जाता है जिसमें कोणीय जेएस के लिए सभी आवश्यक कार्यक्षमता होती है। इस संदर्भ के बिना, यदि हम किसी भी AngularJS फ़ंक्शन का उपयोग करने का प्रयास करते हैं, तो वे काम नहीं करेंगे।
- "नियंत्रक" वह स्थान है जहां हम वास्तव में अपना व्यावसायिक तर्क बना रहे हैं, जो हमारा नियंत्रक है। प्रत्येक कीवर्ड की बारीकियों को बाद के अध्यायों में समझाया जाएगा। यह ध्यान रखना महत्वपूर्ण है कि हम 'HelloWorldCtrl' नामक एक नियंत्रक विधि को परिभाषित कर रहे हैं जिसे Step2 में संदर्भित किया जा रहा है।
- हम एक "फ़ंक्शन" बना रहे हैं जिसे तब कहा जाएगा जब हमारा कोड इस नियंत्रक को कॉल करेगा। $ स्कोप ऑब्जेक्ट AngularJS में एक विशेष ऑब्जेक्ट है जो Angular.js के भीतर उपयोग की जाने वाली एक वैश्विक ऑब्जेक्ट है। $ गुंजाइश ऑब्जेक्ट का उपयोग नियंत्रक और दृश्य के बीच डेटा का प्रबंधन करने के लिए किया जाता है।
- हम "संदेश" नामक एक सदस्य चर बना रहे हैं, इसे "हैलोवर्ल्ड" का मान निर्दिष्ट करें और सदस्य चर को गुंजाइश ऑब्जेक्ट में संलग्न करें।
नोट : एनजी-नियंत्रक निर्देश एंगुलरजेएस (चरण # 2) में परिभाषित एक कीवर्ड है और इसका उपयोग आपके एप्लिकेशन में नियंत्रकों को परिभाषित करने के लिए किया जाता है। यहाँ हमारे आवेदन में, हमने 'HelloWorldCtrl' नामक कंट्रोलर को परिभाषित करने के लिए एनजी-कंट्रोलर कीवर्ड का उपयोग किया है। नियंत्रक के लिए वास्तविक तर्क (चरण # 5) में बनाया जाएगा।
यदि कमांड को सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
संदेश 'हैलो वर्ल्ड' प्रदर्शित किया जाएगा।
