Angular Introduction in Hindi

WHAT IS ANGULAR

Angular गूगल का बनाया हुआ एक जावास्क्रिप्ट फ्रेमवर्क है जिसका उपयोग क्लाइंट एप्लीकेशन बनाने के लिए किया जाता है। 

Angular का उपयोग किसी भी प्रकार के प्लेटफार्म जैसे विंडोज लिनक्स, मैक इत्यादि पर किया जा सकता है। Angular की यह विशेषता इसे प्लेटफॉर्म इंडिपेंडेंट बनाती है। दूसरे शब्दों में Angular किसी प्लेटफार्म पर निर्भर नहीं करता है।

Angular का उपयोग कर सिंगल पेज वेब एप्लीकेशन का निर्माण किया जाता है। सिंगल पेज वेब एप्लीकेशन ऐसा एप्लीकेशन होता है जिसके भीतर कंपोनेंट्स का उपयोग कर वेब पेज का निर्माण किया जाता है। एप्लीकेशन के भीतर एक ही वेबपेज होता है और उस वेबपेज के ऊपर कंपोनेंट्स की लेआउट की मदद से एप्लीकेशन का निर्माण होता है। कंपोनेंट्स को जरूरत के हिसाब से डाला और निकाला जा सकता है। दूसरे शब्दों में, समयानुसार कॉम्पोनेंट्स का निर्माण और क्षय होता है और रनटाइम एनवायरमेंट समय समय उनका निर्माण और विनाश करता है ताकि मेमोरी की किसी प्रकार की लीकेज ना हो। कंपोनेंट के बारे में पूरे विस्तार से आगे हम देखेंगे।

WHY SINGLE PAGE WEB APPLICATION

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

कॉम्पोनेंट एंगुलर एप्लीकेशन की मूलभूत इकाई है। यह Angular का बिल्डिंग ब्लॉक है जिसकी मदद से संपूर्ण एंगुलर एप्लीकेशन का विकास किया जाता है।

BRIEF HISTORY OF ANGULAR

Angular कंपोनेंट को पूरी तरह समझने से पहले Angular के विकास के इतिहास पर दृष्टिपात करते हैं।

Angular का इतिहास लगभग 12 साल पुराना है। Angular का सबसे पहला वर्शन 2010 में आया था उसके लगभग 6 साल के बाद 2016 में Angular का अगला वर्शन आया। यह वर्शन पुराने वर्जन की खामियों को ध्यान में रखते हुए बिल्कुल नए सिरे से लिखा गया था। Angular 2 के बाद Angular के जितने भी नए वर्शन आए हैं वे सारे वर्शन backward compatible हैं। Angular के सबसे पुराने वर्शन को AngularJS के नाम से जाना जाता है।

Angular 3 को गूगल ने जारी नहीं किया बल्कि सीधे Angular 4 को जारी किया गया। इसके पीछे कारण यह था की एंगुलर के दूसरे वर्शन में राउटर का वर्जन 3 दे दिया गया था जो कि अगले वर्शन के साथ तालमेल नहीं बिठा पा रहा था। अतः तीसरे वर्शन को त्याग कर सीधे चौथे वर्शन के साथ एंगलर को प्रस्तुत किया गया। 

यह बात याद रखने लायक है कि गूगल Angular के नए वर्शन को लगभग 6 महीने के अंतराल में जारी करता है। वर्तमान में Angular वर्जन 12 आ चुका है Angular 2 वर्जन से लेकर अब तक जितने भी वर्शन हुए हैं, उन सभी वर्शन में लगातार सुधार हुआ है और Angular का अगला वर्शन पिछले वर्शन के साथ बैकवर्ड कंपैटिबल है। 

HOW TO UPGRADE ANGULAR APPLICATION

Angular के किसी भी पुराने वर्शन को नए वर्शन में अपग्रेड किया जा सकता है। अपग्रेड करते समय यह ध्यान रखना चाहिए की सीधे एक वर्शन से नवीनतम वर्शन पर जंप नहीं करना चाहिए बल्कि हर अगले वर्शन ऑपरेट करते हुए नवीनतम वर्शन अपग्रेड करना चाहिए। मान लीजिए आप के पास Angular एप्लीकेशन वर्शन 5 है और आप उस वर्शन को Angular के आठवें वर्जन में परिवर्तित करना चाहते हैं तो आप अपग्रेड करने के लिए वर्शन 5 से 6 पर अपडेट करेंगे। फिर वर्शन 6 से 7 पर और अंत में वर्शन 8 पर अपग्रेड करना होगा। ऐसा नहीं करने पर एप्लीकेशन में विसंगतियां उत्पन्न हो सकती है। 

FEATURES OF ANGULAR

अब हम Angular की कुछ विशेषताओं का जिक्र करेंगे। 

Angular की एक विशेषता यह है कि सिंगल पेज एप्लिकेशन बनाने के लिए बहुत ही मशहूर है। यद्यपि कंपटीशन में फेसबुक का बनाया जावास्क्रिप्ट फ्रेमवर्क React मार्केट में उपलब्ध है परंतु मार्केट में सबसे ज्यादा पकड़ Angular की है।

Angular की सबसे बड़ी खूबी यह है कि इस फ्रेमवर्क की मदद से एप्लीकेशन को डिवेलप करने के लिए गूगल ने full-fledged फ्रेमवर्क तैयार किया है और एप्लिकेशन विकास के लिए डेवलपर को थर्ड पार्टी पर डिपेंडेंसीज कम होती है। इसके विपरीत फेसबुक के रिएक्ट की मदद से एप्लीकेशन को बनाने में थर्ड पार्टी पैकेज की बहुत ज्यादा जरूरत पड़ती है। रिएक्ट वस्तुतः लाइब्रेरी है और यह थर्ड पार्टी पैकेज पर निर्भर है। 

Angular एप्लीकेशन में MVC डिजाइन पेटर्न का उपयोग किया जाता है। MVC डिजाइन पेटर्न सिपरेशन ऑफ कंसर्न को ध्यान में रखकर एप्लीकेशन को डिवेलप करने में सहायक होता है जिसके कारण एप्लीकेशन की मेंटेनेंस आसान हो जाती है। 

WHAT IS ANGULAR COMPONENT

अब हम देखते हैं कि Angular के भीतर MVC के लिए क्या उपलब्ध है। Angular में कॉम्पोनेंट का उपयोग कर एप्लीकेशन को डिवेलप किया जाता है। अब सवाल यह है कि कंपोनेंट क्या होता है। कंपोनेंट वस्तुतः टेंप्लेट फाइल, सीएसएस फाइल और टाइप्स्क्रिप्ट फाइल्स का समूह होता है। टेंपलेट से अभिप्राय एचटीएमएल फाइल के भीतर Angular directives इत्यादि के उपयोग से है इसके बारे में हम आगे देखेंगे।

टेंपलेट की स्टाइलिंग के लिए सीएसएस फाइल का उपयोग किया जाता है जो कंपोनेंट का हिस्सा माना जाता है।

Angular एप्लीकेशन वस्तुतः कंपोनेंट्स का बना होता है। एक कंपोनेंट MVC डिजाइन पेटर्न को ध्यान में रखते हुए बनाया जाता है।

Angular कंपोनेंट को समझने के लिए सबसे अच्छा उपाय यह है कि हम Angular के डेवलपमेंट सेटअप को अपने सिस्टम इंस्टॉल करें और एप्लीकेशन का निर्माण करें। जब हम Angular एप्लीकेशन का विकास करते हैं तो इसी प्रक्रिया में हम एंगलर को अच्छी तरीके से समझ पाते हैं।

ANGULAR DEVELOPMENT SETUP

सबसे पहले हम node.js पैकेज को अपने सिस्टम में इनस्टॉल करते हैं। नोड जेएस को इंस्टॉल करने के लिए हम node.js के यूआरएल https://nodejs.org/en/ पर जाते हैं और उसे अपने सिस्टम पर इंस्टॉल करते हैं। अगर आप विंडोज प्लेटफार्म का उपयोग कर रहे हैं तो विंडोज के लिए नोड जेएस इंस्टॉल करें। नोड जेएस को इंस्टॉल करने पर उसके साथ एनपीएम का पैकेज भी अपने आप इंस्टॉल हो जाता है। नोड जेएस के बारे में मार्गदर्शन के लिए इस यूआरएल https://nodejs.org/en/docs/guides/ पर जाइए 

अब हम समझते हैं कि नोड जेएस और एनपीएम का उपयोग क्या है और यह क्यों इनस्टॉल किया गया। 

NODE.JS

नोड जेएस जावास्क्रिप्ट का एक फ्रेमवर्क है जिसका उपयोग सर्वर साइड स्क्रिप्टिंग के लिए किया जाता है। हम जानते हैं कि जावास्क्रिप्ट एक क्लाइंट साइड स्क्रिप्टिंग लैंग्वेज है लेकिन नोड जेएस जावास्क्रिप्ट को सर्वर साइड स्क्रिप्टिंग के लिए उपयोगी बनाता है। इसको समझने के लिए हमें node.js के इतिहास को समझना होगा नोड जेएस का उदय और विकास American software engineer Ryan Dahl ने किया। 

अलग-अलग ब्राउज़र के भीतर जावास्क्रिप्ट के कोड को रन करने के लिए जावास्क्रिप्ट का रनटाइम एनवायरमेंट उपलब्ध होता है। उदाहरण के लिए मोज़िला फायरफॉक्स, गूगल क्रोम, ओपेरा और इसी प्रकार के अन्य ब्राउज़र के भीतर जावास्क्रिप्ट के कोड को रन करने के लिए जावास्क्रिप्ट का रनटाइम उपलब्ध होता है। ब्राउज़र के भीतर जावास्क्रिप्ट रनटाइम जावास्क्रिप्ट कोड को रन करता है। अब यदि जावास्क्रिप्ट के रनटाइम को सर्वर पर इंस्टॉल कर दिया जाए तो वह सर्वर के कोड को भी रन कर सकता है। इस बात को ध्यान में रखते हुए एबीसी डेवलपर ने गूगल क्रोम के जावास्क्रिप्ट रनटाइम को C++ प्रोग्रामिंग लैंग्वेज की मदद से सर्वर पर रन करने के काबिल बना दिया।

नोड जेएस की मदद से सर्वर साइड अर्थात बैक एंड के कोड को रन कराया जाता है।

NPM (Node Package Manager) की मदद से जावास्क्रिप्ट के अलग-अलग प्रकार के पैकेज को इंस्टॉल, अपग्रेड या अनइंस्टॉल किया जाता है। इस तरह यह एक पैकेज मैनेजर है।

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

Angular CLI

नोड जेएस और एनपीएम इंस्टॉल करने के बाद हम Angular CLI को इंस्टॉल करते हैं। इसकी मदद से डेवलपर कमांड लाइन का उपयोग करते हुए किसी भी पैकेज को इंस्टॉल या अनइनस्टॉल कर सकता है। साथ ही साथ, एंगलर के विभिन्न प्रकार के कमांड को कमांड लाइन पर रन कर सकता है। उदाहरण के लिए Angular के अंतर्गत विभिन्न प्रकार के कम्पोनेंट, मोड्यूल, सर्विसेज इत्यादि को क्रिएट करने के लिए Angular CLI कमांड का उपयोग होता है। इस कार्य में यह कमांड लाइन टूल काफी मददगार होता है।अतः Angular में कार्य करने के लिए इस कमांड लाइन टूल्स को इंस्टॉल करना आवश्यक है। ध्यान देकर इस कमांड लाइन टूल के बिना भी कंपोनेंट, मॉड्यूल या सर्विसेज इत्यादि को क्रिएट किया जा सकता है परंतु यह टूल Angular डेवलपर को अनेक प्रकार के झंझट से मुक्त कर देता है। अतः इसका इंस्टॉलेशन अवश्य करने की चाहिए।  Angular CLI  के बारे में मार्गदर्शन के लिए इस यूआरएल https://angular.io/cli पर जाइए 

Visual Studio Code

जैसा कि हम जानते हैं कि Angular में कोडिंग करने के लिए किसी अच्छे नोटपैड की जरूरत है और इसके लिए कई प्रकार के नोटपैड जैसे नोटपैड प्लस प्लस, विजुअल स्टूडियो कोड, विजुअल स्टूडियो IDE इत्यादि उपलब्ध है। हम इनमें से किसी की नोटपैड या IDE की मदद से अपना कोडिंग का कार्य कर सकते हैं परंतु आमतौर पर यह देखा गया है की विजुअल स्टूडियो कोड Angular की कोडिंग के लिए बहुत ही अच्छा नोटपैड है। यह Angular से संबंधित कई प्रकार के एक्सटेंशन को भी प्रदान करता है जिसके कारण विजुअल स्टूडियो कोड के भीतर डेवलपर द्वारा कार्य करना सरल हो जाता है। हम विजुअल स्टूडियो कोड को Angular डेवलपमेंट सेटअप के अंतर्गत इंस्टॉल करते हैं। विजुअल स्टूडियो कोड को इंस्टॉल करने के लिए हम निम्नलिखित यूआरएल पर जाते हैं।

WHY TYPESCRIPT WITH ANGULAR

Angular के भीतर कम्पोनेंट, मोड्यूल या सर्विस का निर्माण करने से पहले हम इस बात को समझते हैं कि Angular के अंतर्गत स्क्रिप्टिंग के लिए टाइपस्क्रिप्ट लैंग्वेज का उपयोग क्यों किया जाता है?

जैसा कि हम जानते हैं कि किसी भी वेब एप्लीकेशन के भीतर स्क्रिप्टिंग के लिए जावास्क्रिप्ट लैंग्वेज का उपयोग किया जाता है। ब्राउज़र जावास्क्रिप्ट लैंग्वेज को ही समझता है क्योंकि किसी भी ब्राउज़र के भीतर स्क्रिप्टिंग इंजन के रूप में जावास्क्रिप्ट इंजन का ही उपयोग होता है। इसी तरह ब्राउज़र के भीतर एचटीएमएल के मार्कअप को समझने के लिए एचटीएमएल इंजन का उपयोग होता है और सीएसएस को समझने के लिए सीएसएस इंजन का उपयोग होता है। इस प्रकार ब्राउज़र के भीतर तीन प्रकार के इंजन कार्यरत होते हैं। 

तो प्रश्न उत्पन्न होता है कि Angular के अंतर्गत स्क्रिप्टिंग के लिए टाइपस्क्रिप्ट लैंग्वेज का उपयोग क्यों किया जाता है? इसका उत्तर यह है कि यद्यपि ब्राउज़र के भीतर जावास्क्रिप्ट का उपयोग होता है तथापि Angular के भीतर स्क्रिप्टिंग के लिए टाइप्स्क्रिप्ट लैंग्वेज का उपयोग होता है। ब्राउज़र के भीतर टाइप्स्क्रिप्ट लैंग्वेज को ट्रांसकंपाइल कर जावास्क्रिप्ट लैंग्वेज में रूपांतरित कर दिया जाता है परंतु डेवलपमेंट के समय टाइप्स्क्रिप्ट लैंग्वेज का उपयोग करने से टाइपसेफ्टी की सुविधा उपलब्ध होती है। डेवलपर कंपाइल टाइम के समय ही कोड में किसी प्रकार के त्रुटि को चेक कर सकता है। जावास्क्रिप्ट लुजली टाइप लैंग्वेज है जिसके भीतर डाटा के टाइप्स के बारे में ज्यादा ध्यान नहीं दिया जाता है जबकि टाइप्स्क्रिप्ट एक टाइप्सेफ लैंग्वेज है। साथ ही,  टाइप्स्क्रिप्ट ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग के कंसेप्ट का पूरी तरह पालन करता है जबकि जावास्क्रिप्ट के भीतर ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग के कंसेप्ट का पूरी तरह अनुशीलन नहीं किया जाता है।

ANGULAR DECORATOR

Angular के भीतर कंपोनेंट, मॉड्यूल या सर्विस एक क्लास फाइल होता है जिसके ऊपर डेकोरेटर का उपयोग कर उसको कंपोनेंट, मॉड्यूल या सर्विस में रूपांतरित कर दिया जाता है। डेकोरेटर की पहचान @ सिंबल है। डेकोरेटर के {} के भीतर तत्सम्बन्धी कॉम्पोनेंट मॉड्यूल या सर्विस की प्रॉपर्टीज लिख दी जाती है। किसी क्लास को कंपोनेंट के रूप में प्रदर्शित करने के लिए @Component डेकोरेटर का उपयोग से जाता है। इसी प्रकार किसी क्लास को मॉड्यूल के रूप में दर्शाने के लिए @NgModule डेकोरेटर का उपयोग किया जाता है। 

ध्यान दे कि किसी डेकोरेटर के { } के भीतर क्लास से संबंधित प्रॉपर्टीज और उसके वैल्यूज को लिखा जाता है। उदाहरण के लिए, किसी क्लास को कंपोनेंट के रूप में प्रदर्शित करने के लिए उसके डेकोरेटर @Component के {} के भीतर विभिन्न प्रकार के प्रॉपर्टीज जैसे template, templateUrl,  का उपयोग किया जाता है। इसी तरह, किसी क्लास को मॉड्यूल के रूप में प्रदर्शित करने के लिए उसके डेकोरेटर @NgModule के {} के भीतर विभिन्न प्रकार के प्रॉपर्टीज जैसे  का उपयोग किया जाता है। 

जब किसी @Component कंपोनेंट या @NgModule डेकोरेटर को typescript क्लास फ़ाइल में यूज किया जाता है तब यह आवश्यक है कि तत्सम्बन्धी एंगुलर पैकेज को import किया जाए जिसका संबंध उस कंपोनेंट या मोड्यूल डायरेक्टिव से है।

इस तरह किसी भी टाइप्स्क्रिप्ट फाइल के भीतर तीन हिस्से हो जाते हैं। फ़ाइल के सबसे ऊपर इंपोर्ट स्टेटमेंट लिखा जाता है। उसके बाद डायरेक्टिव का उपयोग किया जाता है और सबसे नीचे क्लास का उपयोग किया जाता है। क्लास के साथ export कीवर्ड का उपयोग किया जाता है जिसका अर्थ यह होता है कि यह क्लास किसी दूसरे मॉड्यूल में उपयोग किया जा सकता है।

Angular में मॉड्यूल क्या होता है? 

मॉड्यूल Angular का एक क्लास होता है जिसका उपयोग विभिन्न प्रकार के कॉम्पोनेंट्स जिनका आपस में संबंध है, उनको समूहबद्ध कर मॉड्यूल के भीतर रखने हेतु किया जाता है। कहने का अभिप्राय यह है कि मॉड्यूल एक प्रकार का क्लास फाइल होता है जिसके भीतर कई सारे संबंधित कॉम्पोनेंट्स को रख दिया जाता है।

Angular एप्लिकेशन के भीतर एक रूट मॉड्यूल होता है जिसे AppModule के नाम से जाना जाता है। जब Angular को इंस्टॉल किया जाता है तो सबसे पहले बना बनाया मॉड्यूल मिलता है जिसे AppModule के नाम से जाना जाता है। ध्यान दें कि टाइप्स्क्रिप्ट के भीतर किसी क्लास का नाम PascalCase में लिखा जाता है।

ध्यान दें कि Angular के भीतर फाइल की नामकरण/नेमिंग कन्वेंशन होती है। जैसे किसी कंपोनेंट फाइल के नाम का suffix component होता है। इसी तरह, मॉड्यूल फाइल का suffix module होता है। डेवलपर को सदैव इस नामकरण का पालन करना चाहिए। जब Angular CLI द्वारा कॉम्पोनेंट या मॉड्यूल का निर्माण किया जाता है तो यह नामकरण कार्य अपने आप हो जाता है परंतु अगर डेवलपर स्वयं ही किसी फाइल का निर्माण कर रहा है तो उस परिस्थिति में डेवलपर को इस तरह के नमिंग कन्वेंशन का अनुपालन अवश्य करना चाहिए।

HTML Templates in Angular

जैसा कि हमने देखा कि Angular कंपोनेंट के मेटाडाटा के रूप में टेंपलेट का उपयोग किया जाता है। अब हम समझेंगे कि एंगलर में किसी कॉम्पोनेंट के एचटीएमएल टेंप्लेट का क्या उपयोग है। 

ANGULAR HTML TEMPLATES

Angular के भीतर MVC डिजाइन पेटर्न का अनुपालन किया जाता है। जैसा कि हम जानते हैं कि MVC के अंतर्गत डाटा के प्रेजेंटेशन के लिए View का उपयोग किया जाता है। Angular के भीतर के लिए View के रूप में एचटीएमएल टेंप्लेट का उपयोग किया जाता है। यह दो रूप में एंगुलर में उपयोग किया जाता है।

१) Inline HTML Templates

२) Linked HTML Templates

Angular के कंपोनेंट के भीतर इनलाइन HTML टेंप्लेट का उपयोग किया जा सकता है अथवा एक्सटर्नल अर्थात लिंक्ड एचटीएमएल टेंप्लेट का उपयोग किया जा सकता है। लिंक्ड एचटीएमएल टेंप्लेट का रिफरेंस component क्लास के decorator के भीतर दे दिया जाता है। लिंक्ड एचटीएमएल टेंप्लेट का रिफरेंस देने के लिए templateUrl प्रोपर्टी का उपयोग @Component decorator के metadata के रूप में किया जाता है परन्तु inline एचटीएमएल टेंप्लेट का रिफरेंस देने के लिए template प्रोपर्टी का उपयोग @Component decorator के metadata के रूप में किया जाता है।

हम inline एचटीएमएल टेंप्लेट का  का उपयोग तब करते हैं जब प्रजेंटेशन कोड कम हो परन्तु यदि प्रेजेंटेशन कोड ज्यादा हो तो ऐसी स्थिति में linked एचटीएमएल टेंप्लेट का  का प्रयोग करना चाहिए। लिंक्ड एचटीएमएल टेंप्लेट का फाइल एक्सटेंशन html होता है जिसका रिफरेंस कंपोनेंट क्लास के भीतर templateUrl प्रोपर्टी के वैल्यू के रूप में दे दिया जाता है। यह दोनों ही प्रॉपर्टीज template और templateUrl कंपोनेंट के metadata के रूप में डेकोरेटर के भीतर दिए जाते हैं।

ANGULAR CSS

HTML Template की स्टाइलिंग के लिए दो तकनीक उपलब्ध है। 

१) Inline CSS 

२) Linked CSS

Angular के भीतर एचटीएमएल टेंप्लेट की inline CSS स्टाइलिंग के लिए @Component decorator के metadata के रूप में styles प्रोपर्टी का उपयोग किया जाता है जबकि एचटीएमएल टेंप्लेट की Linked CSS स्टाइलिंग के लिए @Component decorator के metadata के रूप में styleUrls प्रोपर्टी का उपयोग किया जाता है।

ANGULAR MODULES

अभी तक में देखा कि कैसे किसी Angular कंपोनेंट के metadata के रूप में template और styles प्रॉपर्टी का उपयोग किया जाता है। जब Angular प्रोजेक्ट के भीतर एक ही मॉड्यूल होता है जिसे AppModule या root मॉड्यूल के नाम से जाना जाता है तब ऐसी स्थिति में जितने भी कॉम्पोनेंट्स हम प्रोजेक्ट में add करते हैं उन सारे कंपोनेंट्स का रेफरेंस AppModule के भीतर add हो जाता है। यह कार्य Angular CLI के द्वारा स्वतः ही हो जाता है।

प्रोजेक्ट के सारे कंपोनेंट को एक ही मॉड्यूल के रखना लॉजिकल नहीं है और ना ही मेंटेनेंस के लिहाज से उचित है क्योंकि जब एक ही मॉड्यूल के भीतर सारे कॉम्पोनेंट्स को रख दिया जाता है तो किसी भी डेवलपर के लिए यह निर्णय करना मुश्किल हो जाता है कि प्रोजेक्ट के अलग-अलग मॉड्यूल का क्या कार्य है क्योंकि ऐसी हालत में प्रोजेक्ट में एक ही मॉड्यूल होता है। जबकि होना यह चाहिए कि प्रोजेक्ट को मॉडलर बनाने के लिए कई सारे लॉजिकल आधार पर अलग-अलग मॉड्यूलस का निर्माण किया जाए और उन मॉड्यूलस के भीतर उनसे संबंधित कंपोनेंटस को बनाया जाए।

परंतु जब डेवलपर के द्वारा किसी मॉड्यूल को Angular प्रोजेक्ट में add किया जाता है तो ऐसी स्थिति में किसी डेवलपर को मॉड्यूल में कंपोनेंट का रेफेरेंस add करने के लिए क्या करना चाहिए। एक तरीका तो यह है कि डेवलपर स्वयं इस कार्य को मैनुअली करें। दूसरा उपाय यह है कि Angular CLI  का उपयोग करते हुए यह कार्य किया जाए। Angular CLI  के द्वारा इस कार्य को करने के लिए निम्नलिखित  स्टेप्स को फॉलो करना चाहिए। 

डेवलपर को सबसे पहले अपने वांछनीय मॉड्यूल का निर्माण Angular CLI की मदद से कर लेना चाहिए। मॉड्यूल का निर्माण करने के बाद उसको सेलेक्ट कर लेना चाहिए और तब उस मॉड्यूल के भीतर जितने भी  कॉम्पोनेंट बनाने हो उन सब को Angular CLI की मदद से बना लेना चाहिए। ऐसा करने पर Angular CLI स्वतः ही उन सारे कंपोनेंट्स को बनाए गए मॉड्यूल के भीतर रिफरेंस दे देता है।

© अजीत कुमार, सर्वाधिकार सुरक्षित।

इस आलेख को उद्धृत करते हुए इस लेख के लिंक का भी विवरण दें। इस आलेख को कॉपीराइट सूचना के साथ यथावत साझा करने की अनुमति है। कृपया इसे ऐसे स्थान पर साझा न करें जहाँ इसे देखने के लिए शुल्क देना पडे।