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