NgModule શું છે?

Question

NgModule શું છે?

Accepted Answer

**NgModule** એ `@NgModule` ડેકોરેટર સાથે સુશોભિત વર્ગ છે જે સંબંધિત ઘટકો, નિર્દેશો, પાઇપ્સ અને સેવાઓને એક સુસંગત બ્લોકમાં જૂથબદ્ધ કરે છે, જે Angular ને કહે છે કે તેમને કીવી રીતે કમ્પાઇલ અને તાર કરવા હોય. (નોટ: આધુનિક Angular ને NgModules ની તુલનામાં **સ્ટેન્ડલોન ઘટકો** પર વધુ પ્રશંસા છે, પરંતુ NgModules ને સમજવું હજી પણ મોટાભાગના હાલના કોડબેસ માટે જરૂરી છે.)

## NgModule નું શરીર

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## ચાર મુખ્ય અરે

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

ઘટક **એક** મોડ્યુલમાં જ જાહેર કરી શકાય છે, અને તે મોડ્યુલના ટેમ્પ્લેટમાં ઉપયોગી થવા માટે જાહેર કરવો આવશ્યક છે (અથવા સ્ટેન્ડલોન તરીકે આયાત કરવો આવશ્યક છે).

## મૂળ મોડ્યુલ

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

પ્રતિ (સ્ટેન્ડલોન નથી) অ্যাપ્લિકેશન એક મૂળ `AppModule` ધરાવે છે જેમાં શરૂ કરનાર ઘટક નામ આપતો `bootstrap` અરે છે.

## વિશેષતા મોડ્યુલો અને સંગઠન

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

એપ્લિકેશનો **વિશેષતા મોડ્યુલો** (એક પ્રતિ ડોમેન ક્ષેત્ર) અને **શેર કરેલ મોડ્યુલ** (સામાન્ય ઘટકો/પાઇપ્સ)માં ગોઠવાય છે, કોડબેસને મોડ્યુલર રાખે છે અને સુવિધા દીઠ આલસ્ય લોડિંગ સક્ષમ કરે છે.

## સ્ટેન્ડલોનમાં પરિવર્તન

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

આધુનિક Angular ઘટકોને **સ્ટેન્ડલોન** બનવા દે છે — તેમની પોતાની અવલંબિતાઓ સીધા જાહેર કરીને — NgModule બોઇલરપ્લેટ ઘટાડે છે અથવા દૂર કરે છે.

## તે શા માટે મહત્વપૂર્ણ છે

NgModules Angular ના પરંપરાગત સંગઠન અને અવલંબિતા-વાયરિંગ પદ્ધતિ છે — `declarations`/`imports`/`exports`/`providers` ને સમજવું મોટાભાગના હાલના Angular અ્যાપ્લિકેશનમાં નેવિગેટ કરવા અને આલસ્ય લોડિંગને સમજવા માટે જરૂરી છે.

જ્યારે નવો કોડ સ્ટેન્ડલોન ઘટકો તરફ વલણ ધરાવે છે, NgModule જ્ઞાન વાસ્તવિક-વિશ્વ Angular કામ માટે હજી પણ આવશ્યક છે.