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