Angular App Structure | एंगुलर एप्प की रूपरेखा

Angular एप्प की कोडिंग शुरू करने से पहले उसके structure को जानना अति आवश्यक है। हम यहाँ पर केवल उनके बारे में जानेंगे तथा उनका प्रयोग हम आगे पढेंगे। आगे बढ़ने से पहले एक बार ज़रूर पढ़ लें। तो चलिए शुरू करतें हैं--

Module (मॉड्यूल)

प्रत्येक angular project में एक module ज़रूर होता है जिसको root module कहतें हैं। root module ही पूरे एप्प को load करता है। प्रोजेक्ट में प्रयोग होने वाले दूसरे helping module, components इत्यादि को यही पर import करते हैं।

Component (कॉम्पोनेन्ट)

Component किसी भी वेबसाइट के view का एक छोटा भाग होता है। जैसे: header, sidebar, footer इत्यादि। किसी भी कॉम्पोनेन्ट को हम छोटे छोटे कॉम्पोनेन्ट में विभाजित कर सकते हैं। जैसे: header को हम logo, वेबसाइट का नाम, सर्चबार, लॉगआउट बटन आदि में विभाजित कर सकते हैं। प्रत्येक component एक दूसरे से स्वतंत्र होते हैं अर्थात एक कॉम्पोनेन्ट के लिए लिखा गया कोड दूसरे कॉम्पोनेन्ट को प्रभावित नहीं करता है। एप्प में बनाये गये प्रत्येक component को root module में import करना पड़ता है. Component के ये भाग होते हैं:

• Component class, component के controller होता है. यहाँ पर लिखा कोड component के template में प्रोयोग किया जाता है. Service को हम component class में ही इंजेक्ट करते हैं.
• Component Template, component को view प्रदान करता है. यहाँ पर लिखा कोड हमे browser में दिखाई देता है. Directive का प्रोयोग हम template में ही करते हैं.
• Metadata: ये component class और template के बीच लिंक का कार्य करता है. Component class को उसके template, selector tag की जानकारी metadata से ही प्राप्त होती है. Metadata को हम  Decorator के माध्यम से define करते हैं.

Directive (डायरेक्टिव)

Angular में directive ऐसी युक्ति है जिससे हम html कोड को सुसज्जित करतें है। इसका प्रयोग हम कॉम्पोनेन्ट के template कोड में करतें हैं। डायरेक्टिव, DOM को परिवर्तीत करता है।

Pipe (पाइप)

Pipes का प्रयोग डाटा ट्रास्फोर्मेशन के लिए किया जाता है। जैसे lowercase डाटा को uppercase में परिवर्तित करना। इसका प्रोयोग प्रायः template में किया जाता है.

Metadata (मेटाडेटा)

Metadata के द्वारा हम ये बताते है कि सम्बंधित class को कैसे प्रोसेस करना है। Module, component, directive या pipe सबके class का metadata हम @decorator में माध्यम से बतातें हैं।

Data binding (डाटा बॉन्डिंग)

Component class और template कोड में प्रयुक्त वेरिएबल और फंक्शन का सामंजस्य डाटा बॉन्डिंग के द्वारा होता है। जैसे अगर class variable का मान बदलता है तो परिवर्तित मान टेम्पलेट में भी दिखने लगता है।

Service (सर्विस)

Component class और template से स्वतंत्र कोड हम सर्विस के द्वारा नियोजित करतें है। जैसे - सर्वर को AJAX request भेज कर employee की list लाना इत्यादि। Service को प्रयोग करने के लिए हम इसको component class में inject करतें हैं.