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