क्या आपको अपनी Angular साइट को ज़्यादा से ज़्यादा तेज़ और ऐक्सेस करने लायक बनाना है? आप बिलकुल सही जगह पर आए हैं!
एंगुलर क्या है?
Angular एक फ़्रेमवर्क है. इसे यूज़र इंटरफ़ेस बनाने के लिए इस्तेमाल किया जाता है. यह ऐसे बिल्डिंग ब्लॉक मुहैया कराता है जिनसे आपको रखरखाव के लायक और बढ़ाने लायक ऐप्लिकेशन को तेज़ी से सेट अप करने में मदद मिलती है. Angular, डेवलपर को वेब, मोबाइल या डेस्कटॉप पर लाइव ऐप्लिकेशन बनाने में मदद करता है.
इस संग्रह में क्या है?
यह कलेक्शन, Angular ऐप्लिकेशन को ऑप्टिमाइज़ करने के लिए पांच मुख्य क्षेत्रों पर फ़ोकस करता है:
- उपयोगकर्ता के कन्वर्ज़न और यूज़र ऐक्टिविटी को बढ़ाने के लिए, अपने ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाना
- Angular सर्विस वर्कर के साथ एसेट को पहले से कैश मेमोरी में सेव करना, खराब नेटवर्क पर आपके ऐप्लिकेशन की भरोसेमंद स्थिति को बेहतर बनाना
- प्रीरेंडरिंग और सर्वर-साइड रेंडरिंग का इस्तेमाल करके, सर्च इंजन और सोशल मीडिया बॉट के लिए अपने ऐप्लिकेशन को खोजने लायक बनाना
- उपयोगकर्ता अनुभव देने के लिए अपने ऐप्लिकेशन को इंस्टॉल करने लायक बनाना, ताकि iOS/Android ऐप्लिकेशन
- अपने ऐप्लिकेशन की सुलभता को बेहतर बनाना, ताकि उसे सभी उपयोगकर्ताओं के लिए इस्तेमाल करने लायक और समझने लायक बनाया जा सके
संग्रह की हर पोस्ट में उन तकनीकों के बारे में बताया जाएगा जिन्हें आप सीधे अपने ऐप्लिकेशन पर लागू कर सकते हैं.
इस संग्रह में क्या नहीं है?
यह कलेक्शन मानता है कि आपको Angular और TypeScript के बारे में पहले से जानकारी है. अगर आपको अब भी इस बारे में भरोसा नहीं है, तो angular.io पर TypeScript दस्तावेज़ और Angular के साथ शुरुआत करने से जुड़ी गाइड देखें.
प्रोजेक्ट शुरू करें
Angular कमांड लाइन इंटरफ़ेस (सीएलआई) की मदद से, एक आसान क्लाइंट-साइड Angular ऐप्लिकेशन को आसानी से सेट अप किया जा सकता है. इस पोस्ट में सीएलआई के बारे में कम शब्दों में जानकारी दी गई है. हालांकि, कलेक्शन की दूसरी पोस्ट में सर्वर-साइड रेंडरिंग और डिप्लॉयमेंट सपोर्ट जैसी बेहतर सुविधाओं को जोड़ने का तरीका बताया गया है.
सीएलआई सेट अप करें
शुरू करने के लिए, दुनिया भर में सीएलआई इंस्टॉल करें. साथ ही, इन निर्देशों का पालन करके पुष्टि करें कि आपके पास सबसे नया वर्शन है:
npm i -g @angular/cli
ng --version
पक्का करें कि आखिरी निर्देश, 8.0.3 या इसके बाद का वर्शन देता हो.
इसके अलावा, अगर आपको सीएलआई को दुनिया भर में इंस्टॉल नहीं करना है, तो उसे स्थानीय तौर पर इंस्टॉल करें और npx कमांड की मदद से चलाएं:
npm i @angular/cli
npx ng --version
प्रोजेक्ट बनाएं
नया प्रोजेक्ट रन बनाने के लिए:
ng new my-app
यह निर्देश आपके ऐप्लिकेशन के लिए शुरुआती फ़ाइलें और फ़ोल्डर का स्ट्रक्चर बनाएगा. साथ ही, उसकी ज़रूरत के मुताबिक नोड मॉड्यूल इंस्टॉल करेगा.
सेटअप की प्रोसेस पूरी होने के बाद, अपना ऐप्लिकेशन चलाने के लिए यह तरीका अपनाएं:
cd my-app
ng serve
अब आप http://localhost:4200 पर जाकर, अपना ऐप्लिकेशन ऐक्सेस कर सकते हैं.
आगे क्या करना है?
इस कलेक्शन के बाकी हिस्से में, आपको अपने Angular ऐप्लिकेशन की परफ़ॉर्मेंस, सुलभता, और एसईओ को बेहतर बनाने के तरीके के बारे में जानकारी मिलेगी. यहां बताया गया है कि इसमें क्या-क्या शामिल है:
- ऐंगुलर में रूट-लेवल कोड का बंटवारा
- ऐंग्युलर सीएलआई की मदद से परफ़ॉर्मेंस बजट
- Angular में, प्रीफ़ेच करने की रणनीतियों को रूट करें
- Angular में पहचान का ऑप्टिमाइज़ेशन बदलें
- Angular CDK की मदद से, बड़ी सूचियों का वर्चुअल वर्शन बनाएं
- ऐंग्युलर सर्विस वर्कर के साथ प्रीकैशिंग
- Angular CLI वाले रूट, प्री-रेंडरिंग
- ऐंगुलर यूनिवर्सल के साथ सर्वर-साइड रेंडरिंग
- Angular CLI वाला वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें
- कोडलीज़र की मदद से सुलभता की जांच करना