এনজিডমুলেলে ঘোষণা, সরবরাহকারী এবং আমদানির মধ্যে পার্থক্য কী?

Question

আমি কৌণিকটি বোঝার চেষ্টা করছি (কখনও কখনও Angular2 + নামে পরিচিত), তারপরে আমি এসে পৌঁছেছি @Module:

1. আমদানি

2. ঘোষণা

3. প্রোভাইডার

কৌনিক দ্রুত শুরু অনুসরণ করা

Answer 1

কৌণিক ধারণা

• imports অন্যান্য মডিউলগুলির রফতানি ঘোষণাগুলি বর্তমান মডিউলে উপলব্ধ করে
• declarationsহ'ল বর্তমান মডিউল থেকে অন্যান্য মডিউলে অন্য নির্দেশকের জন্য উপলব্ধ মডিউল থেকে নির্দেশাবলী (উপাদান এবং পাইপ সহ) তৈরি করা। নির্দেশাবলী, উপাদান বা পাইপগুলির নির্বাচকগুলি কেবলমাত্র ঘোষিত বা আমদানি করা হলে এইচটিএমএলের বিপরীতে মিলে যায়।
• providersডিআই (নির্ভরতা ইনজেকশন) এর কাছে পরিচিত পরিষেবাগুলি এবং মানগুলি তৈরি করা হয়। এগুলি মূল স্কোপে যুক্ত হয় এবং এগুলি অন্যান্য পরিষেবাগুলিতে বা নির্দেশে ইনজেকশনের সাথে যুক্ত হয় যা তাদের নির্ভরতা হিসাবে রয়েছে।

এর জন্য একটি বিশেষ ক্ষেত্রে providersহ'ল অলস বোঝাই মডিউলগুলি যা তাদের নিজস্ব শিশুকে ইনজেক্টর দেয়। providersএকটি অলস লোড মডিউল কেবল ডিফল্টরূপে এই অলস লোডযুক্ত মডিউলকে সরবরাহ করা হয় (অন্যান্য মডিউলগুলির সাথে পুরো অ্যাপ্লিকেশনটি নয়)।

মডিউলগুলি সম্পর্কে আরও বিশদ জানতে https://angular.io/docs/ts/latest/guide/ngmodule.html দেখুন

• exportsউপাদানগুলি, নির্দেশিকা এবং পাইপগুলিকে মডিউলগুলিতে উপলব্ধ করে যা এই মডিউলটিকে যুক্ত করে imports। exportsকমনমনোডিয়াল এবং ফর্মস মডুলির মতো মডিউলগুলি পুনরায় রফতানি করতেও ব্যবহার করা যেতে পারে যা প্রায়শই ভাগ করা মডিউলগুলিতে করা হয়।

• entryComponentsঅফলাইন সংকলনের জন্য উপাদানগুলি নিবন্ধভুক্ত করে যাতে সেগুলি ব্যবহার করা যায় ViewContainerRef.createComponent()। রাউটার কনফিগারেশনে ব্যবহৃত উপাদানগুলি অন্তর্নিহিতভাবে যুক্ত করা হয়েছে।

টাইপস্ক্রিপ্ট (ES2015) আমদানি করে

import ... from 'foo/bar'(যা কোনওটির সমাধান হতে পারেindex.ts ) টাইপস্ক্রিপ্ট আমদানির জন্য। আপনি যখনই অন্য টাইপ স্ক্রিপ্ট ফাইলে ঘোষিত টাইপস্ক্রিপ্ট ফাইলে একটি সনাক্তকারী ব্যবহার করেন তখন এগুলি আপনার দরকার।

কৌণিক এর @NgModule() importsএবং টাইপ করা বিষয় importহয় সম্পূর্ণরূপে পৃথক ধারণা ।

JDriven - টাইপস্ক্রিপ্ট এবং ES6 আমদানি বাক্য গঠনও দেখুন

তাদের বেশিরভাগ হ'ল প্রকৃত ECMAScript 2015 (ES6) মডিউল সিনট্যাক্স যা টাইপস্ক্রিপ্ট পাশাপাশি ব্যবহার করে।

Comments

আমি মনে করি, তবে আমি নিশ্চিত নই যে সর্বশেষতম সুপারিশটি হল forRoot()একটি অলস-বোঝা মডিউল ব্যবহারের পরিবর্তে অ্যাপ-ওয়াইড সরবরাহকারীগুলিকে একটি কোর মড্যুলেলে রাখার । তুমি কি একমত? দেখুন কোর মডিউল । মূলের জন্য # ভাগ করা-মডিউল-এর লিঙ্কটি আর বিদ্যমান নেই।

— রাজকোক

দুর্দান্ত ব্যাখ্যা। আপনাকে ধন্যবাদ, @ günter-zöchbauer। কেবল উল্লেখ করা যায় যে আফাইক importএকটি জেএস (ES2015) কার্যকারিতা, কোনও টাইপস্ক্রিপ্ট নয় । :)

— cassi.lup

এবং এনজিডমুলেলে রফতানি কী হয় রফতানির মতো স্তন্যপান: [ম্যাটচেকবক্স]

— ওমর ইসইদ

সত্যি বলতে, আমি মনে করি এর NgModule নকশা কৌণিক কদাকার এবং সঙ্গে তুলনা অস্পষ্ট Vue এবং প্রতিক্রিয়া । আপনার সাথে অন্য মডিউল আমদানি করা দরকার importsতবে এর সাথে আপনার ডিক্লেয়ারেবলগুলি (উপাদান, নির্দেশিকা, পাইপ) রফতানি করুন exports। সুতরাং, প্রধান লক্ষ্যগুলি importsএবং exportsবিভিন্ন জিনিস। পরিবর্তে, এর প্রধান লক্ষ্য exportsআপনার declarations। আপনি নিজের উপাদানটি ঘোষনা করেছেন declarationsতবে গতিশীল লোড উপাদানগুলির জন্য আপনাকে এগুলি রাখা দরকার entryComponents। ইতিমধ্যে, providersডিআই দ্বারা অন্য গল্পে পরিচালিত হয়।

— xuemind

একটি বিভ্রান্ত কাঠামো বর্ণনা করে একটি সংশ্লেষিত উত্তর

— দোনাতো

Answer 2

imports ফর্মস মোডুল, রাউটারমডুল, কমনমডুল বা অন্য কোনও কাস্টম-মেড বৈশিষ্ট্য মডিউল যেমন সমর্থনকারী মডিউলগুলি আমদানি করতে ব্যবহৃত হয়।

declarationsবর্তমান মডিউলটির অন্তর্ভুক্ত উপাদান, নির্দেশাবলী, পাইপগুলি ঘোষনা করতে ব্যবহৃত হয়। ঘোষণার অভ্যন্তরের প্রত্যেকে একে অপরকে চেনে। উদাহরণস্বরূপ, যদি আমাদের কোনও উপাদান থাকে তবে ব্যবহারকারীর নাম বলুন, যা ব্যবহারকারীর নামগুলির একটি তালিকা প্রদর্শন করে এবং আমাদের কাছে একটি পাইপও রয়েছে, বলে টুপারপাইপ, যা একটি স্ট্রিংকে একটি বড় অক্ষরের স্ট্রিংয়ে রূপান্তর করে। এখন আমরা যদি আমাদের ইউজারনেম কম্পোনেন্টে বড় হাতের অক্ষরে ইউজারনেমগুলি দেখাতে চাই তবে আমরা আগে তৈরি হওয়া টাপারপাইপটি ব্যবহার করতে পারি তবে প্রশ্নটি কীভাবে ইউজারনেম কম্পোনেন্ট জানে যে টুপারপাইপটি বিদ্যমান এবং এটি কীভাবে এটি অ্যাক্সেস করতে এবং ব্যবহার করতে পারে। এখানে ঘোষণাগুলি আসুন, আমরা ইউজারনেম কম্পোনেন্ট এবং টাপারপাইপ ঘোষণা করতে পারি।

Providers মডিউলটিতে উপাদান, নির্দেশিকা, পাইপ দ্বারা প্রয়োজনীয় পরিষেবাগুলি ইনজেকশনের জন্য ব্যবহৃত হয়।

Comments

"ঘোষণা: বর্তমান মডিউলের অন্তর্ভুক্ত উপাদান, নির্দেশাবলী, পাইপগুলি ঘোষণার জন্য ব্যবহৃত হয় decla ঘোষণার অভ্যন্তরের সমস্ত কিছু একে অপরকে জানে" " এটি গ্রহণযোগ্য উত্তর হওয়া উচিত

— দ্বীন জন

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 আমি সম্মত। উদাহরণস্বরূপ নোড.জেসে, কোনও ডিবি মডেল, মডিউল, পরিষেবা বা তৃতীয় পক্ষের প্যাকেজ ইনস্টল হওয়া নির্বিশেষে সবকিছু একইভাবে আমদানি করা হয়। এবং আমি মনে করি রিএ্যাকটিজেএস

— সানসোলো

Answer 4

কৌণিক @NgModuleগঠন:

1. import { x } from 'y';: ES2015/ES6অন্যান্য ফাইল থেকে কোড আমদানির জন্য এটি স্ট্যান্ডার্ড টাইপস্ক্রিপ্ট সিনট্যাক্স ( মডিউল সিনট্যাক্স)। এটি কৌনিক নির্দিষ্ট নয় । এছাড়াও এটি প্রযুক্তিগতভাবে মডিউলটির অংশ নয়, এই ফাইলটির ক্ষেত্রের মধ্যে প্রয়োজনীয় কোডটি পাওয়া কেবল প্রয়োজনীয়।
2. imports: [FormsModule]: আপনি এখানে অন্যান্য মডিউল আমদানি করুন। উদাহরণস্বরূপ আমরা FormsModuleনীচের উদাহরণে আমদানি করি । এখন আমরা ফর্মসমোডুলের এই মডিউল জুড়ে যে কার্যকারিতা সরবরাহ করতে হবে তা ব্যবহার করতে পারি।
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: আপনি এখানে আপনার উপাদান, নির্দেশিকা এবং পাইপ রেখেছেন। একবার এখানে ঘোষিত আপনি এখন পুরো মডিউল জুড়ে এটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ আমরা এখন ব্যবহার করতে পারেন OnlineHeaderComponentমধ্যে AppComponentদৃশ্য (HTML ফাইল)। কৌণিক জানে কোথায় 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]

আমরা এখানে কি ইনজেকশন করতে পারি? গতিশীলভাবে উত্পন্ন উপাদানগুলি (উদাহরণস্বরূপ ভিউকন্টেইনারআরফ.ক্রিয়েট কম্পোনেন্ট () ব্যবহার করে)

---

রপ্তানির

উদাহরণ:

export: [TextDirective, PopupComponent, BrowserModule]

আমরা এখানে কি ইনজেকশন করতে পারি? উপাদানগুলি, নির্দেশাবলী, মডিউলগুলি বা পাইপগুলিতে আমরা অন্য মডিউলে তাদের অ্যাক্সেস দেখতে চাই (এই মডিউলটি আমদানির পরে)

Comments

রফতানির কী হবে?

— lugte098

@ lugte098 আমি এই তালিকায় রফতানি যোগ করেছি

— প্রেজেক স্ট্রুসিস্কি

আমি এই লেআউটটি খুব ডাইজেবল, ব্যাখ্যাটির জন্য পছন্দ করি। ধন্যবাদ!

— হারুন জর্ডান

Answer 6

1. ঘোষণা : এই সম্পত্তিটি এই মডিউলটির অন্তর্ভুক্ত উপাদানগুলি, নির্দেশাবলী এবং পাইপগুলি সম্পর্কে বলে।
2. রফতানি : ঘোষণার সাবসেটটি অন্য এনজিএমডিউলগুলির উপাদান টেম্পলেটগুলিতে দৃশ্যমান এবং ব্যবহারযোগ্য হবে।
3. আমদানি : অন্যান্য মডিউলগুলির রফতানি ক্লাসগুলি এই এনজিডমুলেলে ঘোষিত উপাদান টেম্পলেটগুলির দ্বারা প্রয়োজনীয়।
4. সরবরাহকারীগণ : পরিষেবাগুলির স্রষ্টা যা এই এনজিএমডিউল বিশ্বব্যাপী পরিষেবাগুলির সংগ্রহে অবদান রাখে; তারা অ্যাপ্লিকেশনের সমস্ত অংশে অ্যাক্সেসযোগ্য হয়ে ওঠে। (আপনি উপাদানগুলির পর্যায়ে সরবরাহকারীও নির্দিষ্ট করতে পারেন, যা প্রায়শই পছন্দ করা হয়))
5. বুটস্ট্র্যাপ : মূল অ্যাপ্লিকেশন ভিউ, যাকে মূল উপাদান বলা হয়, যা অন্যান্য সমস্ত অ্যাপের মতামতকে হোস্ট করে। কেবল রুট এনজিডমুলেটের বুটস্ট্র্যাপের সম্পত্তি সেট করা উচিত।