क्या आपको अपनी Angular साइट को जल्द से जल्द और आसानी से ऐक्सेस करना है? आप बिलकुल सही जगह पर आए हैं!
कोणीय क्या है?
Angular यूज़र इंटरफ़ेस बनाने के लिए एक फ़्रेमवर्क है. इससे आपको बिल्डिंग ब्लॉक की मदद से, मैनेज किए जा सकने वाले और बड़े स्तर पर इस्तेमाल किए जा सकने वाले ऐप्लिकेशन को तुरंत सेट अप करने में मदद मिलती है. Angular, डेवलपर को वेब, मोबाइल या डेस्कटॉप पर लाइव ऐप्लिकेशन बनाने की सुविधा देता है.
इस संग्रह में क्या है?
यह संग्रह एक Angular ऐप्लिकेशन को ऑप्टिमाइज़ करने के लिए पांच मुख्य क्षेत्रों पर फ़ोकस करता है:
- उपयोगकर्ता का कन्वर्ज़न और यूज़र ऐक्टिविटी बढ़ाने के लिए, अपने ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाना
- Angular सर्विस वर्कर की मदद से, खराब नेटवर्क पर आपके ऐप्लिकेशन की भरोसेमंद कंपनी को पहले से बेहतर बनाना
- प्रीरेंडरिंग और सर्वर साइड रेंडरिंग का इस्तेमाल करके, अपने ऐप्लिकेशन को सर्च इंजन और सोशल मीडिया बॉट के लिए खोजने लायक बनाना
- उपयोगकर्ता को iOS/Android ऐप्लिकेशन जैसा ही अनुभव देने के लिए, आपके ऐप्लिकेशन को इंस्टॉल किया जा सकता है
- अपने ऐप्लिकेशन को सभी उपयोगकर्ताओं के लिए इस्तेमाल करने लायक और समझने लायक बनाने के लिए, उसकी सुलभता में सुधार करना
संग्रह की प्रत्येक पोस्ट उन तकनीकों का वर्णन करेगी जिन्हें आप सीधे अपने ऐप्लिकेशन पर लागू कर सकते हैं.
इस संग्रह में क्या नहीं है?
यह संग्रह मान लेता है कि आप पहले से ही Angular और TypeScript के बारे में जानते हैं. अगर आपको अभी उनके साथ भरोसा नहीं है, तो TypeScript दस्तावेज़ देखें. साथ ही, angular.io पर 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 Universal के साथ सर्वर साइड रेंडरिंग
- Angular CLI के साथ वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें
- कोडलाइज़र की मदद से सुलभता ऑडिटिंग