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




angular-module (4)

কৌণিক @NgModule গঠন:

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

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

  1. আমদানি

  2. ঘোষণা

  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 { }

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

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

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

এখানে বিস্তারিত পড়ুন: https://angular.io/docs/ts/latest/guide/ngmodule.html


কৌণিক ধারণা

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

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

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

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

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

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

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

@NgModule() imports এবং টাইপস্ক্রিপ্ট import সম্পূর্ণ ভিন্ন ধারণা

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

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







angular-module