कोणीय 4 - घटक

कोणीय 4 के साथ विकास का प्रमुख हिस्सा घटकों में किया जाता है। घटक मूल रूप से कक्षाएं हैं जो घटक की .html फ़ाइल के साथ बातचीत करते हैं, जो ब्राउज़र पर प्रदर्शित होती है। हमने अपने पिछले अध्यायों में फ़ाइल संरचना को देखा है। फ़ाइल संरचना में ऐप घटक है और इसमें निम्नलिखित फाइलें हैं -

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

उपरोक्त फाइलें डिफ़ॉल्ट रूप से बनाई गई थीं जब हमने कोणीय-क्ली कमांड का उपयोग करके नई परियोजना बनाई थी।

यदि आप खोलते हैं app.module.ts फ़ाइल, इसमें कुछ पुस्तकालय हैं जो आयात किए गए हैं और एक घोषणापत्र भी है जिसे इस प्रकार दिया गया है -

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

घोषणाओं में AppComponent चर शामिल है, जिसे हमने पहले ही आयात कर लिया है। यह मूल घटक बन जाता है।

अब, कोणीय-क्लि में अपना स्वयं का घटक बनाने के लिए एक कमांड है। हालाँकि, डिफ़ॉल्ट रूप से बनाए गए एप्लिकेशन घटक हमेशा माता-पिता बने रहेंगे और बनाए गए अगले घटक बाल घटक बनाएंगे।

अब घटक बनाने के लिए कमांड चलाते हैं।

ng g component new-cmp

जब आप कमांड लाइन में उपरोक्त कमांड चलाते हैं, तो आपको निम्न आउटपुट प्राप्त होंगे -

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

अब, यदि हम जाते हैं और फ़ाइल संरचना की जांच करते हैं, तो हमें src / app फ़ोल्डर के तहत बनाया गया नया-cmp नया फ़ोल्डर मिलेगा।

निम्न फ़ाइलें नए-सीएमपी फ़ोल्डर में बनाई गई हैं -

new-cmp.component.css - नए घटक के लिए css फ़ाइल बनाई गई है।
new-cmp.component.html - html फ़ाइल बनाई गई है।
new-cmp.component.spec.ts - इसका उपयोग इकाई परीक्षण के लिए किया जा सकता है।
new-cmp.component.ts - यहां, हम मॉड्यूल, गुण आदि को परिभाषित कर सकते हैं।

परिवर्तन app.module.ts फ़ाइल में निम्नानुसार जोड़े गए हैं -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

new-cmp.component.ts फ़ाइल निम्नानुसार उत्पन्न होती है -

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .

@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

यदि आप उपरोक्त new-cmp.component.ts फ़ाइल देखते हैं, तो यह NewCmpComponent नामक एक नया वर्ग बनाता है, जो OnInit.In को लागू करता है, जिसमें एक निर्माता और ngOnInit () नामक एक विधि है। जब कक्षा निष्पादित की जाती है, तो ngOnInit को डिफ़ॉल्ट रूप से कहा जाता है।

आइए देखें कि प्रवाह कैसे काम करता है। अब, एप्लिकेशन घटक, जो डिफ़ॉल्ट रूप से बनाया गया है, मूल घटक बन जाता है। बाद में जोड़ा गया कोई भी घटक बाल घटक बन जाता है।

जब हम url को हिट करते हैं http://localhost:4200/ ब्राउज़र, यह सबसे पहले index.html फ़ाइल को निष्पादित करता है जो नीचे दिखाया गया है -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</title>
      <base href = "/">
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

ऊपर सामान्य HTML फ़ाइल है और हमें ब्राउज़र में कुछ भी दिखाई नहीं देता है। बॉडी सेक्शन में टैग पर नज़र डालें।

<app-root></app-root>

यह डिफ़ॉल्ट रूप से कोणीय द्वारा बनाया गया रूट टैग है। इस टैग में संदर्भ हैmain.ts फ़ाइल।

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

AppModule को मुख्य पैरेंट मॉड्यूल के ऐप से आयात किया जाता है, और इसे बूटस्ट्रैप मॉड्यूल को दिया जाता है, जो Appmodule को लोड करता है।

अब हम देखते हैं app.module.ts फ़ाइल -

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

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

export class AppModule { }

यहाँ, AppComponent दिया गया नाम है, अर्थात, के संदर्भ को संग्रहीत करने के लिए चर app. Component.tsऔर वही बूटस्ट्रैप को दिया जाता है। अब हम देखते हैंapp.component.ts फ़ाइल।

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

कोणीय कोर को आयात किया जाता है और घटक के रूप में संदर्भित किया जाता है और इसका उपयोग निम्नानुसार किया जाता है -

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

चयनकर्ता के संदर्भ में, templateUrl तथा styleUrlदिया जाता है। यहां चयनकर्ता और कुछ नहीं है, लेकिन जो टैग इंडेक्स। Html फ़ाइल में रखा गया है, जिसे हमने ऊपर देखा था।

AppComponent में एक वैरिएबल है जिसका शीर्षक है, जिसे ब्राउज़र में प्रदर्शित किया जाता है।

@Component टेम्पलेट.कॉम का उपयोग करता है जिसे app.component.html कहा जाता है जो इस प्रकार है -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

यह सिर्फ HTML कोड और घुंघराले कोष्ठक में चर शीर्षक है। इसे मूल्य के साथ बदल दिया जाता है, जो इसमें मौजूद हैapp.component.tsफ़ाइल। इसे बाइंडिंग कहा जाता है। हम बाद के अध्याय में बाध्यकारी की अवधारणा पर चर्चा करेंगे।

अब जब हमने एक नया घटक बनाया है, जिसका नाम है new-cmp। उसी में शामिल हो जाता हैapp.module.ts फ़ाइल, जब एक नया घटक बनाने के लिए कमांड चलाया जाता है।

app.module.ts बनाए गए नए घटक का संदर्भ है।

आइए अब नए-सीएमपी में बनाई गई नई फाइलों की जांच करें।

नई-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

यहां, हमें कोर को भी आयात करना होगा। घटक का संदर्भ घोषणाकर्ता में उपयोग किया जाता है।

घोषणाकर्ता को चयनकर्ता कहा जाता है app-new-cmp और यह templateUrl तथा styleUrl।

.Html कहलाता है new-cmp.component.html इस प्रकार है -

<p>
   new-cmp works!
</p>

जैसा कि ऊपर देखा गया है, हमारे पास html कोड यानी p टैग है। स्टाइल फ़ाइल खाली है क्योंकि हमें वर्तमान में किसी स्टाइलिंग की आवश्यकता नहीं है। लेकिन जब हम परियोजना चलाते हैं, तो हमें ब्राउज़र में प्रदर्शित होने वाले नए घटक से संबंधित कुछ भी दिखाई नहीं देता है। अब हम कुछ जोड़ते हैं और बाद में ब्राउज़र में भी देखा जा सकता है।

चयनकर्ता, अर्थात app-new-cmp में जोड़ने की जरूरत है app.component .html फाइल इस प्रकार है -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<app-new-cmp></app-new-cmp>

जब <app-new-cmp></app-new-cmp> टैग जोड़ा जाता है, जो कि बनाए गए नए घटक की .html फ़ाइल में मौजूद है, मूल घटक डेटा के साथ ब्राउज़र पर प्रदर्शित होगा।

हमें देखने दो new component .html फ़ाइल और new-cmp.component.ts फ़ाइल।

नई-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

कक्षा में, हमने एक चर जोड़ा है जिसे नया घटक कहा जाता है और मूल्य है "Entered in new component created"।

उपरोक्त चर में बाध्य है .new-cmp.component.html फाइल इस प्रकार है -

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

अब चूंकि हमने शामिल कर लिया है <app-new-cmp></app-new-cmp> में चयनकर्ता app. component .html जो मूल घटक का .html है, नए घटक। html फ़ाइल (new-cmp.component.html) में मौजूद सामग्री निम्नानुसार ब्राउज़र पर प्रदर्शित होती है -

इसी तरह, हम घटकों का निर्माण कर सकते हैं और चयनकर्ता का उपयोग करके इसे लिंक कर सकते हैं app.component.html हमारी आवश्यकताओं के अनुसार फ़ाइल।