NgModule में घोषणाओं, प्रदाताओं और आयात के बीच अंतर क्या है?

Question

मैं एंगुलर (जिसे कभी-कभी एंगुलर 2 + भी कहा जाता है) को समझने की कोशिश कर रहा हूं, तो मुझे पता चला @Module:

1. आयात

2. घोषणाओं

3. प्रदाताओं

कोणीय त्वरित शुरुआत के बाद

Answer 1

कोणीय अवधारणाओं

• imports वर्तमान मॉड्यूल में उपलब्ध अन्य मॉड्यूल की निर्यातित घोषणाएं करता है
• declarationsवर्तमान मॉड्यूल में अन्य निर्देशों के लिए उपलब्ध वर्तमान मॉड्यूल से निर्देश (घटक और पाइप सहित) बनाने के लिए कर रहे हैं। निर्देशों, घटकों या पाइपों के चयनकर्ताओं को केवल घोषित या आयात किए जाने पर HTML के विरुद्ध मिलान किया जाता है।
• providersसेवाओं और मूल्यों को डीआई (निर्भरता इंजेक्शन) के लिए जाना जाता है। उन्हें जड़ दायरे में जोड़ा जाता है और वे अन्य सेवाओं या निर्देशों के लिए इंजेक्ट होते हैं जो उन्हें निर्भरता के रूप में होते हैं।

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

मॉड्यूल के बारे में अधिक जानकारी के लिए https://angular.io/docs/ts/latest/guide/ngmodule.html भी देखें

• exportsइस मॉड्यूल को जोड़ने वाले मॉड्यूल में घटक, निर्देश और पाइप उपलब्ध कराता है imports। exportsकॉमनमॉडल और फॉर्ममॉड्यूल जैसे मॉड्यूल को फिर से निर्यात करने के लिए भी इस्तेमाल किया जा सकता है, जो अक्सर साझा मॉड्यूल में किया जाता है।

• entryComponentsऑफ़लाइन संकलन के लिए घटकों को पंजीकृत करता है ताकि उनका उपयोग किया जा सके ViewContainerRef.createComponent()। राउटर कॉन्फ़िगरेशन में उपयोग किए गए घटकों को अंतर्निहित रूप से जोड़ा जाता है।

टाइपस्क्रिप्ट (ES2015) आयात करता है

import ... from 'foo/bar'(जो हल हो सकता है aindex.ts ) टाइपस्क्रिप्ट आयात के लिए हैं। जब भी आप किसी टाइपस्क्रिप्ट फ़ाइल में एक पहचानकर्ता का उपयोग करते हैं, जो किसी अन्य टाइपस्क्रिप्ट फ़ाइल में घोषित होती है, तो आपको इनकी आवश्यकता होती है।

कोणीय के @NgModule() importsऔर टाइपप्रति importहैं पूरी तरह से अलग अवधारणाओं ।

यह भी देखें jDriven - TypeScript और ES6 import syntax

उनमें से अधिकांश वास्तव में सादे ECMAScript 2015 (ES6) मॉड्यूल सिंटैक्स हैं जो टाइपस्क्रिप्ट भी उपयोग करता है।

Comments

मुझे लगता है, लेकिन मुझे यकीन नहीं है, कि ले forRoot()-लोडेड मॉड्यूल का उपयोग करने के बजाय, कोर-मोड में ऐप-वाइड प्रदाताओं को रखने के लिए नवीनतम सिफारिश है । क्या आप सहमत हैं? कोर मॉड्यूल देखें । # साझा-मॉड्यूल-फॉर-रूट का लिंक अब मौजूद नहीं है।

— मार्क राजकोक

बहुत बढ़िया स्पष्टीकरण। धन्यवाद, @ günter-zöchbauer। केवल उल्लेख नहीं है कि afaik है importएक जे एस (ES2015) कार्यक्षमता, है न एक टाइपप्रति एक। :)

— cassi.lup

और क्या निर्यात है [] NgModule में निर्यात की तरह चूसना: [MatCheckBox]

— उमर

ईमानदारी से कहूं तो मुझे लगता है कि के NgModule के डिजाइन कोणीय अनाड़ी है और साथ तुलना अस्पष्ट Vue और प्रतिक्रिया । आपको अन्य मॉड्यूल के साथ आयात करने की आवश्यकता होती है imports, लेकिन अपने घोषणापत्र (घटक, निर्देश, पाइप) के साथ निर्यात करें exports। तो, प्रमुख लक्ष्य importsऔर exportsअलग चीजें हैं। इसके बजाय, प्रमुख लक्ष्य exportsआपका है declarations। आप अपने घटक की घोषणा करते हैं declarations, लेकिन गतिशील लोड किए गए घटक के लिए, आपको उन्हें डालने की आवश्यकता है entryComponents। इस बीच, providersडीआई द्वारा एक और कहानी में प्रबंधित किया जाता है।

— xuemind

एक घुमावदार जवाब एक घुमावदार ढांचे का वर्णन

— Donato

Answer 2

imports समर्थन मॉड्यूल का उपयोग करने के लिए उपयोग किया जाता है जैसे कि FormsModule, RouterModule, CommonModule, या किसी अन्य कस्टम-निर्मित सुविधा मॉड्यूल।

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

Providers मॉड्यूल में घटकों, निर्देशों, पाइपों द्वारा आवश्यक सेवाओं को इंजेक्ट करने के लिए उपयोग किया जाता है।

Comments

"घोषणाएँ: घटकों, निर्देशों, पाइपों की घोषणा करने के लिए उपयोग किया जाता है जो वर्तमान मॉड्यूल से संबंधित हैं। घोषणाओं के अंदर सब कुछ एक दूसरे को जानते हैं।" इसका स्वीकृत उत्तर होना चाहिए

— दीन जॉन

Answer 3

घटक घोषित किए जाते हैं, मॉड्यूल आयात किए जाते हैं, और सेवाएं प्रदान की जाती हैं। एक उदाहरण मैं साथ काम कर रहा हूँ:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Comments

मुझे इस स्पष्टीकरण की सादगी पसंद है, लेकिन यह मुझे आश्चर्यचकित करता है कि क्यों सिर्फ एक "सामान नहीं है। लगता है कि वे सभी एक ही चीज़ से निपट रहे हैं, जो वर्तमान घटक के लिए कोड के अन्य टुकड़े उपलब्ध करा रहा है।

— redOctober13

@ redOctober13 मैं सहमत हूं। उदाहरण के लिए Node.js में, सब कुछ उसी तरह से आयात किया जाता है, भले ही वह DB मॉडल, मॉड्यूल, सेवा या स्थापित 3 पार्टी पैकेज हो। और मुझे लगता है कि रिएक्टजस के साथ भी ऐसा ही होता है

— सैनसोलो

Answer 4

कोणीय @NgModuleनिर्माण:

1. import { x } from 'y';: यह ES2015/ES6अन्य फ़ाइलों से कोड आयात करने के लिए मानक टाइपस्क्रिप्ट सिंटैक्स ( मॉड्यूल सिंटैक्स) है। यह कोणीय विशिष्ट नहीं है । इसके अलावा यह तकनीकी रूप से मॉड्यूल का हिस्सा नहीं है, इस फ़ाइल के दायरे में आवश्यक कोड प्राप्त करना आवश्यक है।
2. imports: [FormsModule]: आप यहां अन्य मॉड्यूल आयात करते हैं। उदाहरण के लिए हम FormsModuleनीचे दिए गए उदाहरण में आयात करते हैं। अब हम उस कार्यक्षमता का उपयोग कर सकते हैं जिसे FormsModule को इस पूरे मॉड्यूल में पेश करना है।
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: आप अपने घटक, निर्देश, और पाइप यहां डालते हैं। एक बार यहां घोषित करने के बाद आप उन्हें पूरे मॉड्यूल में उपयोग कर सकते हैं। उदाहरण के लिए अब हम दृश्य (html फ़ाइल) OnlineHeaderComponentमें उपयोग कर सकते हैं AppComponent। कोणीय जानता है OnlineHeaderComponentकि इसे कहां खोजना है क्योंकि यह में घोषित किया गया है @NgModule।
4. providers: [RegisterService]: यहां इस विशिष्ट मॉड्यूल की हमारी सेवाओं को परिभाषित किया गया है। आप निर्भरता इंजेक्शन के साथ इंजेक्शन द्वारा अपने घटकों में सेवाओं का उपयोग कर सकते हैं।

उदाहरण मॉड्यूल:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 5

एक त्वरित धोखा शीट जोड़ना जो कोणीय के साथ लंबे समय तक ब्रेक के बाद मदद कर सकता है:

---

घोषणाओं

उदाहरण:

declarations: [AppComponent]

हम यहां क्या इंजेक्ट कर सकते हैं? अवयव, पाइप, निर्देश

---

आयात

उदाहरण:

imports: [BrowserModule, AppRoutingModule]

हम यहां क्या इंजेक्ट कर सकते हैं? अन्य मॉड्यूल

---

प्रदाता

उदाहरण:

providers: [UserService]

हम यहां क्या इंजेक्ट कर सकते हैं? सेवाएं

---

बूटस्ट्रैप

उदाहरण:

bootstrap: [AppComponent]

हम यहां क्या इंजेक्ट कर सकते हैं? मुख्य घटक जो इस मॉड्यूल द्वारा उत्पन्न किया जाएगा (घटक पेड़ के लिए शीर्ष मूल नोड)

---

प्रवेश घटक

उदाहरण:

entryComponents: [PopupComponent]

हम यहां क्या इंजेक्ट कर सकते हैं? गतिशील रूप से उत्पन्न घटक (उदाहरण के लिए ViewContainerRef.createComponent () का उपयोग करके)

---

निर्यात

उदाहरण:

export: [TextDirective, PopupComponent, BrowserModule]

हम यहां क्या इंजेक्ट कर सकते हैं? घटक, निर्देश, मॉड्यूल या पाइप जिन्हें हम किसी अन्य मॉड्यूल में उपयोग करना चाहते हैं (इस मॉड्यूल को आयात करने के बाद)

Comments

निर्यात के बारे में क्या?

— lugte098

@ lugte098 मैंने इस सूची में निर्यात जोड़ा है

— Przemek Struci Sepski

मैं स्पष्टीकरण के लिए इस लेआउट को प्यार करता हूं, बहुत ही सुपाच्य है। धन्यवाद!

— एरोन जॉर्डन

Answer 6

1. घोषणाएँ : यह संपत्ति इस मॉड्यूल से संबंधित अवयवों, निर्देशों और पाइपों के बारे में बताती है।
2. निर्यात : घोषणाओं का सबसेट जो अन्य NgModules के घटक टेम्पलेट्स में दृश्यमान और प्रयोग करने योग्य होना चाहिए।
3. आयात : अन्य मॉड्यूल जिनके निर्यात वर्ग को इस NgModule में घोषित घटक टेम्पलेट्स की आवश्यकता होती है।
4. प्रदाताओं : सेवाओं के निर्माता जिन्हें यह NgModule सेवाओं के वैश्विक संग्रह में योगदान देता है; वे एप्लिकेशन के सभी भागों में सुलभ हो जाते हैं। (आप घटक स्तर पर प्रदाताओं को भी निर्दिष्ट कर सकते हैं, जिन्हें अक्सर पसंद किया जाता है।)
5. बूटस्ट्रैप : मुख्य एप्लिकेशन दृश्य, जिसे रूट घटक कहा जाता है, जो अन्य सभी एप्लिकेशन दृश्यों को होस्ट करता है। केवल मूल NgModule बूटस्ट्रैप गुण सेट करना चाहिए।