2016-08-21 7 views
189
में घोषणाओं, प्रदाताओं और आयात में क्या अंतर है

मैं कोणीय (कभी कभी Angular2 +) को समझने के लिए कोशिश कर रहा हूँ, तो मैं @Module भरNgModule

  1. आयात
  2. घोषणा आया
  3. प्रदाता

बाद Angularjs-2 quick start

+1

यह कोणीय-2 नहीं है, न ही कोणीय 2. यह केवल कोणीय है। AngularJS nowdays ऊपर 2. – adripanico

उत्तर

278

अंगुल ar अवधारणाओं

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

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

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

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

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

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

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

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

भी देखें jDriven - TypeScript and ES6 import syntax

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

+1

मुझे लगता है कि संस्करणों के लिए एक पुरानी उल्लेख करने के लिए प्रयोग किया जाता है, और कोणीय, लेकिन मैं, यकीन नहीं है कि नवीनतम सिफारिश नहीं बल्कि का उपयोग करने से, एक CoreModule में एप्लिकेशन चौड़ा प्रदाताओं डाल करने के लिए है ' एक आलसी लोड मॉड्यूल में forRoot() '। क्या आप सहमत हैं? [कोर मॉड्यूल] देखें (https://angular.io/docs/ts/latest/guide/ngmodule.html#!#core-module)। # साझा-मॉड्यूल-रूट-रूट का लिंक अब मौजूद नहीं है। –

+1

उत्कृष्ट स्पष्टीकरण। धन्यवाद, @ गुंटर-ज़ोचबाउर। केवल उल्लेख है कि afaik 'import' एक जेएस (ES2015) कार्यक्षमता है, _not_ एक टाइपस्क्रिप्ट एक है। :) –

+0

@ cassi.lup संकेत के लिए धन्यवाद। मैंने अपना जवाब अपडेट किया। –

45

imports: समर्थन मॉड्यूल आयात करने के लिए प्रयोग किया जाता है FormsModule, RouterModule, CommonModule, या किसी अन्य विशेष रूप से निर्मित सुविधा मॉड्यूल पसंद करती है।

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

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

यहां विस्तार से पढ़ें: https://angular.io/docs/ts/latest/guide/ngmodule.html

1

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

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'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    UserComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 
संबंधित मुद्दे