Understanding important files generated by Angular CLI new command| एंगुलर CLI के new कमांड के द्वारा बनाये गए महत्वपूर्ण फाइल का विवरण

जब हम Angular CLI से ng new कमांड के द्वारा नया प्रोजेक्ट बनाते हैं तो CLI एक फाइल स्ट्रक्चर generate करता है। जिनमे से कुछ फाइल एप्प डेवलपमेंट में सहायता करती हैं तो कुछ फाइल में प्रोग्रामर कोड्स लिखता है। यहाँ पर हम केवल उन फाइल के बारे में जानेंगे जो प्रोग्रामर के लिए जानना अति आवश्यक है। ये आवश्यक फाइल कुछ इस प्रकार हैं-

src/app/app.module.ts:

इस फ़ाइल के में हम अपने एप्प के root module को define करते है। इसके अंदर हम उन सभी module को import करतें हैं जो इस प्रोजेक्ट में प्रयोग किये जायेंगे। और इसी फाइल में हम उन सभी component को import और declare करते हैं जोकि इस प्रोजेक्ट का हिस्सा है।

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

जैसा कि हम देख सकतें हैं कि हमने लाइन 1 पर BrowserModule module को import किया है. ये module एप्प के rendering में सहायता करता है. लाइन 2 पर हमने NgModule decorator को import किया है जोकि module को define करने में प्रोयोग किया जाता है. लाइन 3 पर हमने AppComponent component को import किया है. हम जब भी नया component, service, pipe etc. बनायेगे तो उनको यहाँ पर import करेंगे.

हमने AppModule (root module) को @NgModule decorator की सहायता से define किया है. NgModule decorator के parameter :

• declarations: यहाँ पर import किये गये component, directive और pipe को declare करते हैं.
• imports: यहाँ पर import किये गये सभी module को declare करते हैं.
• providers: जब भी हम कोई service बनायेगे तो उसको प्रोयोग करने के ये उस service को यहाँ पर declare करते हैं.
• bootstrap: यहाँ पर उस component को declare करते हैं जिससे एंगुलर एप्प run करना स्टार्ट करता है. चूँकि AppComponent root component है इसलिए उसको यहाँ पर declare किया गया है.

src/main.ts:

इस फ़ाइल में लिखे कोड से ही हमारा प्रोजेक्ट bootstrap करता है। bootstrap का मतलब है एप्प को लोड करना और उसको run करना।

src/style.css :

इस फ़ाइल में एप्प से सम्बंधित ग्लोबल css कोड लिखते हैं। यहाँ पर लिखा कोड पूरे एप्प के style को प्रभावित करता है। bootstrap या कोई css लाइब्रेरी को इसी फाइल में import करतें हैं।

कॉम्पोनेन्ट फाइल्स : Angular CLI प्रत्येक कॉम्पोनेन्ट के लिए 4 फाइलें जेनेरेट करता है। इन फाइलों में लिखे कोड एक कॉम्पोनेन्ट का निर्माण करते हैं। ये फाइलें है-

src/app/app.component.ts:

इस फ़ाइल में हम कॉम्पोनेन्ट क्लास को डिफाइन करते हैं। कॉम्पोनेन्ट क्लास को @Component डेकोरेटर की सहायता से डिफाइन किया जाता है। कॉम्पोनेन्ट क्लास में डिफाइन वेरिएबल और फंक्शन डिफाइन करते है जो की उस कॉम्पोनेन्ट के कंट्रोलर की तरह व्यवहार करते हैं। जैसा की आप देख सकतें हैं:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msg = 'Hello World!';
}

पहली लाइन में हमने Component decorator को import किया है जो कि component class के metadata define करता है. component decorator के parameter इस प्रकार हैं:

• selector: component को प्रयोग करने के लिए उसके tag तो define करते हैं. यहाँ पर tag का प्रयोग हम कोड में जहाँ भी करेंगे component template वही पर render हो जायेगा.
• templateUrl: ये component template file के url को define करता है.
• styleUrls: ये component से सम्बंधित सभी css फाइल के url का array होता है.

src/app/app.component.html:

इस फ़ाइल में कॉपोनेंट से सम्बंधित html कोड लिखते हैं। कॉम्पोनेन्ट क्लास में डिफाइन वेरिएबल और फंक्शन का प्रयोग हम विभिन्न तरीके से इस फ़ाइल में प्रयोग करतें हैं।

src/app/app.component.css:

इस फ़ाइल में कॉम्पोनेन्ट से सम्बंधित css कोड लिखतें हैं। यहाँ पर लिखा css कोड केवल उसी कॉम्पोनेन्ट के html कोड के look को प्रभावित करता है। अगर आप पूरे एप्प के style को प्रभावित करना चाहते हैं तो ऐसे css कोड को src/style.css फाइल में लिखना होता है।

src/app/app.component.spec.ts:

इस फ़ाइल में हम कंपोनेंट के यूनिट टेस्टिंग से सम्बंधित कोड लिखतें हैं। अगर आप अभी Angular सीख रहें हैं तो इस फ़ाइल को edit न करें।