क्या अपनी 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 में बदलाव का पता लगाने की सुविधा को ऑप्टिमाइज़ करना
- Angular CDK की मदद से बड़ी सूचियों को वर्चुअलाइज़ करना
- ऐंगलर सर्विस वर्कर की मदद से, एसेट को पहले से कैश मेमोरी में सेव करना
- Angular CLI की मदद से, पहले से रेंडर किए गए रास्ते
- Angular Universal के साथ सर्वर साइड रेंडरिंग
- Angular CLI की मदद से वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ना