अपनी भाषा चुनें
Angular Front-End Development कोर्स
दुनिया भर में 2 मिलियन से अधिक छात्र

Angular Front-End Development कोर्स

शुरुआत से एंगुलर में महारत हासिल करें और प्रोडक्शन-रेडी सिंगल-पेज एप्लिकेशन विश्वास के साथ बनाएं। यह कोर्स टाइपस्क्रिप्ट फंडामेंटल्स और कंपोनेंट आर्किटेक्चर से लेकर NgRx स्टेट मैनेजमेंट, SSR और CI/CD डिप्लॉयमेंट तक सब कुछ कवर करता है। चाहे आप अपने फ्रंट-एंड कौशल को उन्नत कर रहे हों या पेशेवर एंगुलर डेवलपमेंट में संक्रमण कर रहे हों, यह वह संपूर्ण तकनीकी रोडमैप है जिसकी आपको आवश्यकता है।

Dedika व्यवसायों के लिए

आप क्या सीखेंगे:

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

आप व्यावहारिक रूप से कैसे पढ़ते हैं Angular Front-End Development कोर्स

आप कैसे अभ्यास करते हैं Angular Front-End Development कोर्स

आपके लिए जो एक कंपनी हैं और अपनी टीम को प्रशिक्षित करना चाहते हैं

Dedika फॉर बिज़नेस में, कोर्स में आपकी कंपनी की ज़रूरत के अनुसार आपके अपने व्यवसाय के उदाहरण और अभ्यास शामिल हैं।

यहाँ क्लिक करें

कोर्स की सामग्री

8 अध्याय • 40 पाठ4 से 360 घंटे (आप तय करते हैं)

अध्याय 1विवरण देखें

एंगुलर फ़ाउंडेशन और एनवायरनमेंट सेटअप

  • पाठ 1 • एंगुलर मॉड्यूल और एप्लिकेशन बूटस्ट्रैप

    NgModules, रूट AppModule और एंगुलर एप्लिकेशन को कैसे बूटस्ट्रैप करता है, इसकी व्याख्या करता है। कंपोनेंट बनाने से पहले आवश्यक संरचनात्मक संदर्भ प्रदान करता है।

  • पाठ 2 • एंगुलर के लिए TypeScript अनिवार्यताएँ

    Angular कोड आत्मविश्वास से लिखने के लिए आवश्यक TypeScript types, interfaces और decorators का परिचय देता है। JavaScript ज्ञान को Angular के टाइप किए गए इकोसिस्टम से जोड़ता है।

  • पाठ 3 • एंगुलर फ्रेमवर्क का परिचय

    आधुनिक फ्रंट-एंड डेवलपमेंट में Angular की भूमिका और इसके MVC-प्रेरित आर्किटेक्चर को कवर करता है। बाद के सभी फ्रेमवर्क विषयों के लिए वैचारिक आधार तैयार करता है।

  • पाठ 4 • डेवलपमेंट एनवायरनमेंट सेट करना

    Node.js, npm और Angular CLI को इंस्टॉल और कॉन्फ़िगर करता है। सुनिश्चित करता है कि प्रत्येक छात्र के पास एक सुसंगत, पुनरुत्पादनीय स्थानीय कार्यक्षेत्र हो।

  • पाठ 5 • अपना पहला एंगुलर प्रोजेक्ट स्कैफोल्ड करना

    नया प्रोजेक्ट जनरेट करने के लिए Angular CLI का उपयोग करता है और जनरेट की गई फ़ाइल संरचना का पता लगाता है। एनवायरनमेंट सेटअप को व्यावहारिक प्रोजेक्ट निर्माण से जोड़ता है।

अध्याय 2विवरण देखें

कंपोनेंट, टेम्पलेट और डेटा बाइंडिंग

  • पाठ 1 • बिल्ट-इन स्ट्रक्चरल डायरेक्टिव्स

    DOM संरचना को गतिशील रूप से नियंत्रित करने के लिए *ngIf, *ngFor और *ngSwitch को लागू करता है। प्रदर्शित करता है कि कैसे डायरेक्टिव्स टेम्पलेट अभिव्यक्तता को बढ़ाते हैं।

  • पाठ 2 • प्रॉपर्टी और इवेंट बाइंडिंग

    प्रॉपर्टी बाइंडिंग के माध्यम से वन-वे डेटा फ़्लो और इवेंट बाइंडिंग के माध्यम से यूज़र-इवेंट हैंडलिंग सिखाता है। कंपोनेंट लॉजिक को DOM एलिमेंट्स और यूज़र इंटरैक्शन से जोड़ता है।

  • पाठ 3 • टेम्पलेट सिंटैक्स और एक्सप्रेशन

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

  • पाठ 4 • कंपोनेंट लाइफसाइकिल हुक्स

    ngOnInit से ngOnDestroy तक पूर्ण लाइफसाइकिल हुक अनुक्रम का अन्वेषण करता है। सिखाता है कि इनिशियलाइज़ेशन और क्लीनअप के लिए प्रत्येक हुक का उपयोग कब और क्यों करना है।

  • पाठ 5 • एंगुलर कंपोनेंट की संरचना

    @Component डेकोरेटर, मेटाडेटा प्रॉपर्टी और कंपोनेंट लाइफसाइकिल को तोड़ता है। प्रत्येक Angular UI एलिमेंट के लिए बिल्डिंग ब्लॉक स्थापित करता है।

अध्याय 3विवरण देखें

कंपोनेंट संचार और डायरेक्टिव्स

  • पाठ 1 • ViewChild और ContentChild क्वेरीज़

    क्वेरीज़ के माध्यम से चाइल्ड कंपोनेंट इंस्टेंस और प्रोजेक्ट की गई सामग्री को प्रोग्रामेटिक रूप से एक्सेस करता है। टेम्पलेट बाइंडिंग से परे उन्नत कंपोनेंट समन्वय सक्षम करता है।

  • पाठ 2 • @Input के साथ पैरेंट-टू-चाइल्ड संचार

    कंपोनेंट ट्री में डेटा पास करने के लिए @Input का उपयोग करता है और सेटर के साथ इनपुट को मान्य करता है। Angular में प्राथमिक डाउनवर्ड डेटा-फ़्लो पैटर्न स्थापित करता है।

  • पाठ 3 • कस्टम स्ट्रक्चरल डायरेक्टिव्स बनाना

    DOM में हेरफेर करने के लिए TemplateRef और ViewContainerRef का उपयोग करके स्ट्रक्चरल डायरेक्टिव्स को लागू करता है। पुन: प्रयोज्य लेआउट लॉजिक बनाने की छात्रों की क्षमता का विस्तार करता है।

  • पाठ 4 • कस्टम एट्रिब्यूट डायरेक्टिव्स बनाना

    DOM संरचना को बदले बिना होस्ट एलिमेंट की उपस्थिति या व्यवहार को संशोधित करने वाले डायरेक्टिव्स बनाता है। अध्याय 2 में प्रस्तुत डायरेक्टिव पैटर्न को सुदृढ़ करता है।

  • पाठ 5 • @Output के साथ चाइल्ड-टू-पैरेंट संचार

    कंपोनेंट ट्री में कस्टम इवेंट उत्सर्जित करने के लिए @Output और EventEmitter का उपयोग करता है। द्विदिश पैरेंट-चाइल्ड संचार पैटर्न को पूरा करता है।

अध्याय 4विवरण देखें

सर्विसेज़, डिपेंडेंसी इंजेक्शन और HTTP

  • पाठ 1 • एंगुलर सर्विसेज़ बनाना और प्रदान करना

    CLI के साथ सर्विसेज़ जनरेट करता है और उन्हें मॉड्यूल, कंपोनेंट या रूट स्कोप पर रजिस्टर करता है। साझा लॉजिक के लिए घर के रूप में सर्विस लेयर स्थापित करता है।

  • पाठ 2 • HTTP क्लाइंट और REST API इंटीग्रेशन

    HttpClientModule को कॉन्फ़िगर करता है और GET, POST, PUT और DELETE अनुरोध करता है। सर्विस लेयर को वास्तविक बैक-एंड डेटा स्रोतों से जोड़ता है।

  • पाठ 3 • एरर हैंडलिंग और HTTP इंटरसेप्टर्स

    catchError के साथ वैश्विक एरर हैंडलिंग और इंटरसेप्टर के साथ अनुरोध/प्रतिक्रिया परिवर्तन लागू करता है। प्रोडक्शन-तैयार HTTP संचार पैटर्न तैयार करता है।

  • पाठ 4 • डिपेंडेंसी इंजेक्शन गहराई से

    DI पदानुक्रम, इंजेक्शन टोकन और प्रोवाइडर प्रकारों का अन्वेषण करता है। ऐप भर में निर्भरताओं को कैसे हल किया जाता है, इस पर सूक्ष्म-नियंत्रण सक्षम करता है।

  • पाठ 5 • RxJS ऑब्ज़र्वेबल्स का परिचय

    Angular के async API के साथ काम करने के लिए आवश्यक Observables, Subjects और कोर ऑपरेटरों का परिचय देता है। छात्रों को रिएक्टिव HTTP और इवेंट हैंडलिंग पैटर्न के लिए तैयार करता है।

अध्याय 5विवरण देखें

एंगुलर रूटिंग और नेविगेशन

  • पाठ 1 • रूट गार्ड और एक्सेस कंट्रोल

    रूट की सुरक्षा के लिए CanActivate, CanDeactivate और CanLoad गार्ड लागू करता है। प्रमाणीकरण और प्राधिकरण को नेविगेशन लेयर में एकीकृत करता है।

  • पाठ 2 • लेज़ी लोडिंग और रूट रिज़ॉल्वर

    ऐप को ऑन-डिमांड लोड किए जाने वाले फ़ीचर मॉड्यूल में विभाजित करता है और रिज़ॉल्वर के साथ डेटा प्री-फ़ेच करता है। प्रारंभिक लोड प्रदर्शन और यूज़र एक्सपीरियंस में सुधार करता है।

  • पाठ 3 • नेस्टेड रूट और नेम्ड आउटलेट

    पैरेंट रूट के अंतर्गत चाइल्ड रूट संरचित करता है और सहायक व्यू के लिए नामित आउटलेट का उपयोग करता है। बड़े अनुप्रयोगों में जटिल लेआउट आवश्यकताओं का समर्थन करता है।

  • पाठ 4 • राउटर सेटअप और बुनियादी नेविगेशन

    RouterModule को रूट परिभाषाओं के साथ कॉन्फ़िगर करता है और राउटर-आउटलेट और राउटरलिंक जोड़ता है। सभी नेविगेशन सुविधाओं के लिए नींव स्थापित करता है।

  • पाठ 5 • रूट पैरामीटर और क्वेरी स्ट्रिंग

    ActivatedRoute से गतिशील रूट सेगमेंट और वैकल्पिक क्वेरी पैरामीटर पढ़ता है। विवरण व्यू और फ़िल्टर की गई सूची पृष्ठों को सक्षम करता है।

अध्याय 6विवरण देखें

एंगुलर फॉर्म: टेम्पलेट-ड्रिवन और रिएक्टिव

  • पाठ 1 • FormArray के साथ डायनामिक फॉर्म

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

  • पाठ 2 • वैलिडेटर और कस्टम वैलिडेशन

    सिंक्रोनस और एसिंक्रोनस वैलिडेटर लागू करता है और पुन: प्रयोज्य कस्टम वैलिडेटर फ़ंक्शन बनाता है। सबमिशन से पहले डेटा अखंडता सुनिश्चित करता है।

  • पाठ 3 • फॉर्म सबमिशन और स्थिति प्रबंधन

    पॉलिश किया हुआ UX देने के लिए फॉर्म सबमिशन, रीसेट और डर्टी/टच्ड स्थिति को संभालता है। फॉर्म डेटा को अध्याय 4 में प्रस्तुत सर्विस कॉल से जोड़ता है।

  • पाठ 4 • टेम्पलेट-ड्रिवन फॉर्म

    टेम्पलेट में घोषणात्मक रूप से फॉर्म बनाने के लिए ngForm, ngModel और बिल्ट-इन वैलिडेटर का उपयोग करता है। न्यूनतम TypeScript ओवरहेड के साथ फॉर्म अवधारणाओं का परिचय देता है।

  • पाठ 5 • रिएक्टिव फॉर्म फ़ंडामेंटल

    FormControl, FormGroup और ReactiveFormsModule के साथ प्रोग्रामेटिक रूप से फॉर्म बनाता है। फॉर्म स्थिति और वैलिडेशन पर स्पष्ट, परीक्षण योग्य नियंत्रण प्रदान करता है।

अध्याय 7विवरण देखें

स्थिति प्रबंधन और रिएक्टिव पैटर्न

  • पाठ 1 • NgRx Entity और DevTools

    NgRx Entity के साथ कलेक्शन प्रबंधन को सरल बनाता है और Redux DevTools के साथ स्थिति का निरीक्षण करता है। स्टोर-भारी सुविधाओं के विकास और डीबगिंग को गति देता है।

  • पाठ 2 • NgRx Store का परिचय

    NgRx इंस्टॉल करता है और एक फ़ीचर स्लाइस के लिए actions, reducers और store को परिभाषित करता है। Angular इकोसिस्टम के भीतर Redux पैटर्न स्थापित करता है।

  • पाठ 3 • BehaviorSubject के साथ सर्विस-आधारित स्थिति

    एक सर्विस में BehaviorSubject का उपयोग करके कंपोनेंट में स्थिति को संग्रहीत और साझा करता है। NgRx शुरू करने से पहले एक हल्का स्थिति समाधान प्रदान करता है।

  • पाठ 4 • साइड इफेक्ट के लिए NgRx Effects

    NgRx Effects का उपयोग करके reducers के बाहर HTTP कॉल जैसे async संचालन को संभालता है। Reducers को शुद्ध रखता है और साइड-इफेक्ट लॉजिक को केंद्रीकृत करता है।

  • पाठ 5 • सेलेक्टर और कंपोनेंट इंटीग्रेशन

    मेमोइज़्ड सेलेक्टर बनाता है और Store सर्विस के माध्यम से कंपोनेंट से actions डिस्पैच करता है। NgRx store को कंपोनेंट लेयर से जोड़ता है।

अध्याय 8विवरण देखें

प्रदर्शन, परीक्षण और डिप्लॉयमेंट

  • पाठ 1 • डिप्लॉयमेंट स्ट्रैटेजी और CI/CD इंटीग्रेशन

    Angular बिल्ड्स को स्टैटिक होस्टिंग पर डिप्लॉय करता है और सतत वितरण के लिए स्वचालित पाइपलाइन को एकीकृत करता है। कोड से प्रोडक्शन तक विकास जीवनचक्र को बंद करता है।

  • पाठ 2 • कंपोनेंट और सर्विसेज़ का यूनिट टेस्टिंग

    कंपोनेंट, सर्विसेज़ और पाइप के लिए Jasmine और TestBed के साथ यूनिट टेस्ट लिखता है। इंटीग्रेशन से पहले अलग-अलग इकाइयों को पृथक रूप से मान्य करता है।

  • पाठ 3 • बंडल ऑप्टिमाइज़ेशन और बिल्ड कॉन्फ़िगरेशन

    इष्टतम बंडल आकार के लिए प्रोडक्शन बिल्ड, ट्री शेकिंग और डिफरेंशियल लोडिंग कॉन्फ़िगर करता है। वास्तविक दुनिया की डिप्लॉयमेंट बाधाओं के लिए ऐप तैयार करता है।

  • पाठ 4 • Cypress के साथ एंड-टू-एंड टेस्टिंग

    पूर्ण एप्लिकेशन व्यवहार को मान्य करने के लिए Cypress के साथ यूज़र-फ़्लो टेस्टिंग को स्वचालित करता है। यथार्थवादी ब्राउज़र-आधारित परिदृश्यों के साथ यूनिट टेस्ट को पूरक करता है।

  • पाठ 5 • चेंज डिटेक्शन और परफॉर्मेंस ऑप्टिमाइज़ेशन

    Angular की डिफ़ॉल्ट और OnPush चेंज डिटेक्शन रणनीतियों और प्रोफ़ाइलिंग टूल की व्याख्या करता है। बड़े कंपोनेंट ट्री में अनावश्यक पुन: रेंडर को कम करता है।

प्रमाणन

आपका मान्य समापन प्रमाणपत्र

यह कोर्स आपके लिए है:

  • जावास्क्रिप्ट डेवलपर्स: एक संरचित, एंटरप्राइज़-ग्रेड फ्रंट-एंड फ्रेमवर्क अपनाने के लिए तैयार।

  • रिएक्ट या Vue डेवलपर्स: अपने पेशेवर टूलकिट में एंगुलर विशेषज्ञता जोड़ने के इच्छुक।

  • बैक-एंड डेवलपर्स: आधुनिक फ्रंट-एंड कौशल की आवश्यकता वाली फुल-स्टैक भूमिकाओं में विस्तार कर रहे हैं।

  • कंप्यूटर साइंस ग्रेजुएट्स: अकादमिक ज्ञान को उद्योग-मानक एंगुलर डेवलपमेंट से जोड़ रहे हैं।

  • फ्रीलांस वेब डेवलपर्स: बड़े, अधिक जटिल क्लाइंट प्रोजेक्ट के लिए योग्य बनने का लक्ष्य।

  • करियर बदलने वाले: एक ठोस प्रोग्रामिंग फाउंडेशन से नौकरी-तैयार फ्रंट-एंड कौशल बना रहे हैं।

हमारे छात्रों की राय

आपकी कक्षाएं बिल्कुल परफेक्ट हैं। मैंने एक साल का पैकेज खरीदा है और अंततः मुझे अपनी रुचि के विभिन्न विषयों को बिना प्लेटफॉर्म बदले सीखने का अवसर मिला है... आप जो कुछ भी करते हैं उसके लिए धन्यवाद, मैंने पहले ही आपको अन्य लोगों को सुझाया है...
Giulio Carlo
Giulio Carloडिजिटल मार्केटिंग के छात्र
मुझे पसंद है कि कैसे पाठ सीधे मुद्दे पर आते हैं और कैसे मैं अध्याय बदल सकती हूं और उस सामग्री को छोड़ सकती हूं जिसकी मुझे जरूरत नहीं है।
Mariana Ferres
Mariana Ferresफोटोग्राफी की छात्रा
मुझे सामग्री और वीडियो की प्रस्तुति और ट्रांसक्रिप्शन का तरीका पसंद है, जो प्रक्रिया को तेज़ बनाता है!
Luciana Alvarenga
Luciana Alvarengaनेल डिज़ाइन की छात्रा
प्लेटफॉर्म तेज़ है, उपयोग में आसान है। सामग्री की विविधता और पूरक वीडियो सीखने में बहुत मदद करते हैं।
André Felipe
André Felipeप्रॉम्प्ट इंजीनियरिंग के छात्र

मुख्य क्षमताएँ

सामान्य प्रश्न

Dedika कौन है?

क्या प्रमाणपत्र भारत में मान्य है?

क्या कोर्स मुफ्त हैं?

कोर्स का कार्यभार क्या है?

कोर्स कैसे होते हैं?

कोर्स कैसे काम करते हैं?

कोर्स की अवधि क्या है?

कोर्स की लागत या कीमत क्या है?

EAD या ऑनलाइन कोर्स क्या है और यह कैसे काम करता है?

PDF कोर्स