एंगुलर एक टाइपस्क्रिप्ट डेवलपमेंट प्लेटफॉर्म और फ्रेमवर्क है जिसका उपयोग सिंगल-पेज एप्लिकेशन बनाने के लिए किया जाता है।

कोणीय का एक जटिल इतिहास है। डेवलपर्स ने इस ढांचे के पहले संस्करण (AngularJS) के निर्माण के लिए जावास्क्रिप्ट का उपयोग किया। एंगुलरडेवलपर्स ने बाद में एंगुलर के सभी क्रमिक संस्करणों के निर्माण के लिए टाइपस्क्रिप्ट का उपयोग किया (पहले संस्करण में बग की संख्या के कारण)।

2021 तक, कोणीय का नवीनतम संस्करण 12.0 है। इस लेख में, आप एंगुलरफ्रेमवर्क के बारे में जानने के लिए आवश्यक सभी चीजें सीखेंगे।

कोणीय क्या है?

बहुत से लोग एंगुलरस को एक फ्रेमवर्क बताते हैं, और हालांकि यह परिभाषा गलत नहीं है, एंगुलर सिर्फ एक फ्रेमवर्क नहीं है। कोणीय भी एक विकास मंच है। इसका मतलब है कि इसमें एक हार्डवेयर और सॉफ्टवेयर सिस्टम है, जो एंगुलर एप्लिकेशन चलाता है।

हालाँकि यह टाइपस्क्रिप्ट पर बनाया गया है, आप प्लेटफ़ॉर्म के अधिकांश कोड जावास्क्रिप्ट में लिख सकते हैं। अधिकांश चौखटे की तरह, कोणीय घटक-आधारित है। इसका मतलब है कि कोणीय उपयोगकर्ता इंटरफ़ेस के प्रत्येक अनुभाग को एक स्वतंत्र इकाई के रूप में माना जाता है, जो पुन: प्रयोज्य कोड और स्केलेबल अनुप्रयोगों के निर्माण की ओर जाता है।

कोणीय का उपयोग करने के लिए, आपको HTML, CSS और जावास्क्रिप्ट से परिचित होना होगा (टाइपस्क्रिप्ट को जानना एक संपत्ति है, लेकिन आवश्यकता नहीं है)। एंगुलर की तुलना अक्सर वीयूजेएस और रिएक्टजेएस से की जाती है, और मुख्य शिकायतों में से एक यह है कि एंगुलर में सीखने की अवस्था अधिक होती है।

सम्बंधित: ReactJS क्या है, और इसका उपयोग किस लिए किया जा सकता है?

यह कोई आश्चर्य की बात नहीं है, क्योंकि एंगुलर (एक विकास मंच होने के नाते) में आपके लिए परिचित होने के लिए बड़ी संख्या में मुख्य संरचनाएं हैं। इन संरचनाओं में शामिल हैं:

• मॉड्यूल
• अवयव
• टेम्पलेट्स

और इन मुख्य विशेषताओं को समझने से यह सुनिश्चित होगा कि आप एंगुलर डेवलपर बनने की राह पर हैं।

कोणीय फाइलों की खोज

कोणीय एप्लिकेशन आपके नए प्रोजेक्ट फ़ोल्डर में कई फाइलें उत्पन्न करता है (जैसा कि आप नीचे दी गई छवि में देख सकते हैं)। अपने कंप्यूटर पर एंगुलर कैसे स्थापित करें, इस पर निर्देशों के लिए एंगुलर की आधिकारिक वेबसाइट देखें.

मुख्य प्रोजेक्ट फ़ोल्डर में अधिक महत्वपूर्ण फाइलों में से एक है पैकेज.जेसन फ़ाइल। यह फ़ाइल आपको आपके प्रोजेक्ट का नाम बताती है कि आप अपना प्रोजेक्ट कैसे शुरू करें (एनजी सर्व), अपनी परियोजना का निर्माण कैसे करें (एनजी बिल्ड), और अपनी परियोजना का परीक्षण कैसे करें (एनजी परीक्षण) अन्य बातों के अलावा।

आपके मुख्य प्रोजेक्ट फ़ोल्डर में भी दो फ़ोल्डर हैं-नोड_मॉड्यूल तथा एसआरसी. NS एसआरसी फ़ोल्डर वह जगह है जहाँ आप अपना सारा विकास करेंगे; इसमें कई फाइलें और फोल्डर होते हैं।

स्रोत फ़ोल्डर

NS Styles.css फ़ाइल वह जगह है जहां आप अपनी सभी वैश्विक स्टाइलिंग प्राथमिकताएं रखेंगे, और index.html फ़ाइल एकल पृष्ठ है जो आपके ब्राउज़र में प्रस्तुत होता है।

index.html फ़ाइल की खोज करना

केवल एक चीज जिसे आप बदलना चाहते हैं index.html फ़ाइल ऊपर आवेदन का शीर्षक है। NS ऊपर दिए गए HTML फ़ाइल के मुख्य भाग में टैग करें app.component.ts फ़ाइल, जो ऐप फ़ोल्डर के भीतर स्थित है (जैसा कि आप नीचे दी गई छवि में देख सकते हैं)।

app.component.ts फाइल को एक्सप्लोर करना

'@angular/core' से {घटक} आयात करें;
@अवयव({
चयनकर्ता: 'ऐप-रूट',
templateUrl: './app.component.html',
स्टाइल यूआरएल: ['./app.component.css']
})
निर्यात वर्ग ऐपकंपोनेंट {
शीर्षक = 'माई-ऐप';
}

NS app.component.ts फ़ाइल का उपयोग करता है ऐप-रूट चयनकर्ता, जो में स्थित है index.html ऊपर फ़ाइल। यह का उपयोग करता है app.component.html एक टेम्पलेट के रूप में फ़ाइल और app.component.css शैली के लिए फ़ाइल।

NS app.component.css फ़ाइल जनरेट होने पर खाली होती है क्योंकि HTML लेआउट के साथ-साथ सभी स्टाइल प्राथमिकताएं, के भीतर होती हैं app.component.html फ़ाइल।

के साथ कोणीय अनुप्रयोग चलाना एनजी सर्व --ओपन कमांड आपके ब्राउज़र में निम्नलिखित प्रदर्शित करेगा:

अपने ब्राउज़र में प्रदर्शित होने वाली चीज़ों को बदलने के लिए, आपको संपादित करने की आवश्यकता होगी app.component.html फ़ाइल।

इस फ़ाइल की सामग्री को निम्न कोड से बदलना:

नमस्ते दुनिया

आपके ब्राउज़र में निम्न आउटपुट उत्पन्न करेगा:

कोणीय मॉड्यूल को समझना

प्रत्येक कोणीय एप्लिकेशन एक मूलभूत मॉड्यूल सिस्टम पर बनाया गया है, जिसे के रूप में जाना जाता है एनजीमॉड्यूल. प्रत्येक एप्लिकेशन में कम से कम एक होता है एनजीमॉड्यूल. कोणीय से दो मॉड्यूल उत्पन्न करता है एनजी न्यू आदेश (ऐप-रूटिंग.मॉड्यूल.ts तथा ऐप.मॉड्यूल.ts).

NS ऐप.मॉड्यूल.ts फ़ाइल में रूट मॉड्यूल है, जो एप्लिकेशन को चलाने के लिए मौजूद होना चाहिए।

app.module.ts फाइल को एक्सप्लोर करना

'@angular/core' से { NgModule } आयात करें;
'@ कोणीय/प्लेटफ़ॉर्म-ब्राउज़र' से { BrowserModule } आयात करें;
आयात { AppRoutingModule } './app-routing.module' से;
आयात {AppComponent} './app.component' से;
@NgModule({
घोषणाएं: [
ऐपकंपोनेंट
],
आयात: [
ब्राउज़र मॉड्यूल,
ऐप रूटिंग मॉड्यूल
],
प्रदाता: [],
बूटस्ट्रैप: [AppComponent]
})
निर्यात वर्ग AppModule { }

ऊपर दी गई फ़ाइल जावास्क्रिप्ट का उपयोग करती है आयात आयात करने के लिए बयान एनजीमॉड्यूल, NS ब्राउज़रमॉड्यूल, NS ऐपकंपोनेंट, और यह ऐप रूटिंग मॉड्यूल (जो परियोजना में दूसरा NgModule है)।

NS @NgModule डेकोरेटर आयात के बाद आता है। यह इंगित करता है कि ऐप.मॉड्यूल.ts फ़ाइल वास्तव में एक है एनजीमॉड्यूल. NS @NgModule डेकोरेटर तब कई सरणियों को कॉन्फ़िगर करता है: the घोषणाओं, NS आयात, NS प्रदाताओं, और यह बूटस्ट्रैप.

NS घोषणाओं सरणी एक विशिष्ट से संबंधित घटकों, निर्देशों और पाइपों को संग्रहीत करता है एनजीमॉड्यूल. हालांकि, केवल रूट मॉड्यूल के मामले में ऐपकंपोनेंट में संग्रहित है घोषणा सरणी (जैसा कि आप ऊपर दिए गए कोड में देख सकते हैं)।

NS आयात सरणी दूसरे को आयात करती है एनजीमॉड्यूल जिसे आप एप्लिकेशन में उपयोग कर रहे हैं। NS आयात उपरोक्त कोड में सरणी आयात करता है ब्राउज़रमॉड्यूल (जो इसे ब्राउज़र-विशिष्ट सेवाओं का उपयोग करने की अनुमति देता है, जैसे कि DOM रेंडरिंग), और ऐप रूटिंग मॉड्यूल (जो एप्लिकेशन को का उपयोग करने की अनुमति देता है कोणीय राउटर)।

सम्बंधित: वेबसाइटों का हिडन हीरो: डोम को समझना

NS प्रदाताओं सरणी में ऐसी सेवाएँ होनी चाहिए जो अन्य घटकों में हों एनजीमॉड्यूल इस्तेमाल कर सकते हैं।

NS बूटस्ट्रैप सरणी बहुत महत्वपूर्ण है क्योंकि इसमें प्रवेश घटक होता है जो कोणीय बनाता है और इसमें सम्मिलित करता है index.html मुख्य परियोजना फ़ोल्डर में फ़ाइल। प्रत्येक कोणीय अनुप्रयोग से लॉन्च होता है बूटस्ट्रैप जड़ में सरणी एनजीमॉड्यूल द्वारा बूटस्ट्रैपिंग NS एनजीमॉड्यूल (जिसमें एक प्रक्रिया शामिल है जो प्रत्येक घटक को सम्मिलित करती है बूटस्ट्रैप ब्राउज़र डोम में सरणी)।

कोणीय घटकों को समझना

प्रत्येक कोणीय घटक चार विशिष्ट फाइलों के साथ उत्पन्न होता है। यदि आप ऊपर दिए गए ऐप फ़ोल्डर की छवि पर एक नज़र डालते हैं, तो आपको निम्न फ़ाइलें दिखाई देंगी:

• app.component.css (एक सीएसएस फ़ाइल)
• app.component.html (एक टेम्पलेट फ़ाइल)
• app.component.spec.ts (एक परीक्षण विनिर्देश फ़ाइल)
• app.component.ts (एक घटक फ़ाइल)

उपरोक्त सभी फाइलें एक ही घटक से जुड़ी हैं। यदि आप का उपयोग करते हैं एनजी उत्पन्न एक नया घटक उत्पन्न करने के लिए कमांड, ऊपर वाले के समान चार फाइलें उत्पन्न की जाएंगी। NS app.component.ts फ़ाइल में शामिल है मूल घटक, जो घटक के विभिन्न पहलुओं (जैसे टेम्पलेट और शैली) को जोड़ता है।

app.component.ts फाइल को एक्सप्लोर करना

'@angular/core' से {घटक} आयात करें;
@अवयव({
चयनकर्ता: 'ऐप-रूट',
templateUrl: './app.component.html',
स्टाइल यूआरएल: ['./app.component.css']
})
निर्यात वर्ग ऐपकंपोनेंट {
शीर्षक = 'माई-ऐप';
}

NS app.component.ts फ़ाइल कोणीय के मूल से "घटक" आयात करने के लिए जावास्क्रिप्ट आयात विवरण का उपयोग करती है। फिर @अवयव डेकोरेटर वर्ग को एक घटक के रूप में पहचानता है। NS @अवयव डेकोरेटर में एक वस्तु होती है जिसमें a चयनकर्ता, ए टेम्पलेटयूआरएल, और ए शैली यूआरएल सरणी।

NS चयनकर्ता कहता है कोणीय किसी भी HTML टेम्पलेट में ऐप घटक का एक उदाहरण सम्मिलित करने के लिए जिसमें एक टैग है चयनकर्ता (ऐसा उपनाम)। और यदि आप में कोड पर एक नज़र डालते हैं index.html ऊपर फ़ाइल आप पाएंगे उपनाम।

मुख्य ऐप घटक फ़ाइल टेम्पलेट फ़ाइल से भी लिंक करती है, का उपयोग कर टेम्पलेटयूआरएल संपत्ति। यह है app.component.html फ़ाइल, जो बताती है कि एक कोणीय अनुप्रयोग में एक विशिष्ट घटक को कैसे प्रस्तुत किया जाना चाहिए।

वस्तु में अंतिम संपत्ति है शैली यूआरएल. यह गुण स्टाइल शीट की एक सरणी को संदर्भित करता है, जिसका अर्थ है कि आप कई स्टाइल शीट को लागू कर सकते हैं एक एकल घटक (ताकि आप वैश्विक स्टाइल शीट को src फ़ोल्डर में styleUrls सरणी के रूप में जोड़ सकें कुंआ)।

कोणीय टेम्पलेट को समझना

NS app.component.html फ़ाइल एक कोणीय टेम्पलेट का एक उदाहरण है। यह फ़ाइल एक HTML फ़ाइल के साथ-साथ एक घटक फ़ाइल (ऐप घटक) है। इसलिए, प्रत्येक घटक में एक HTML टेम्पलेट होना चाहिए, क्योंकि यह बताता है कि एक घटक DOM में कैसे प्रस्तुत होता है।

आगे क्या होगा?

DOM को समझना आपका अगला सबसे अच्छा कदम है। कोणीय मंच और ढांचे को लेना निस्संदेह चुनौतीपूर्ण है। हालाँकि, यह संभव है, और यह देखते हुए कि कोणीय अपने घटकों को DOM में प्रस्तुत करता है, DOM के बारे में सीखना - जैसा कि आप मास्टर करने का प्रयास करते हैं - एक और बढ़िया कदम है।

वेबसाइटों का हिडन हीरो: डोम को समझना

वेब डिज़ाइन सीखना और दस्तावेज़ ऑब्जेक्ट मॉडल के बारे में अधिक जानने की आवश्यकता है? यहां आपको DOM के बारे में जानने की जरूरत है।

आगे पढ़िए

लेखक के बारे में