آموزش اجزای سازنده در انگولار ۷

آموزش اجزای سازنده در انگولار ۷

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش اجزای سازنده در انگولار ۷ خواهیم پرداخت.

بخش عمده ای از توسعه با انگولار ۷ در کامپوننت ها انجام می شود. کامپوننت ها اساساً کلاس هایی هستند که با فایل html کامپوننت که در مرورگر نمایش داده می شود تعامل دارند. ما ساختار فایل را در یکی از فصل های قبلی خود دیده ایم.

ساختار فایل دارای جزء برنامه است و از فایل های زیر تشکیل شده است –

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

و اگر مسیریابی انگولار را در حین راه اندازی پروژه خود انتخاب کرده باشید، فایل های مربوط به مسیریابی نیز اضافه می شوند و فایل ها به شرح زیر هستند –

• app-routing.module.ts

فایل های بالا به طور پیش فرض زمانی ایجاد می شوند که پروژه جدید را با استفاده از دستور angular-cli ایجاد کنیم.

اگر فایل app.module.ts را باز کنید، تعدادی کتابخانه دارد که وارد شده و همچنین یک دکلره است که به صورت زیر به appcomponent اختصاص داده می شود –

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

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

اعلان‌ها شامل متغیر AppComponent است که قبلاً آن را وارد کرده‌ایم. این جزء اصلی می شود.

اکنون angular-cli دستوری برای ایجاد کامپوننت خود دارد. با این حال، مؤلفه برنامه که به طور پیش فرض ایجاد می شود، همیشه به عنوان والد باقی می ماند و مؤلفه های بعدی ایجاد شده مؤلفه های فرزند را تشکیل می دهند.

اجازه دهید اکنون دستور ایجاد کامپوننت را با خط کد زیر اجرا کنیم

ng g component new-cmp

هنگامی که دستور بالا را در خط فرمان اجرا می کنید، خروجی زیر را دریافت خواهید کرد

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

حالا اگر برویم و ساختار فایل را بررسی کنیم، پوشه new-cmp جدید را خواهیم گرفت که در زیر پوشه src/app ایجاد شده است.

فایل های زیر در پوشه new-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 { AppRoutingModule } from './app-routing.module'; 
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,
      AppRoutingModule 
   ], 
   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', // selector to be used inside .html file. 
   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 را پیاده سازی می کند که در آن یک سازنده و متدی به نام ()ngOnInit وجود دارد. ngOnInit به طور پیش فرض زمانی که کلاس اجرا می شود فراخوانی می شود.

اجازه دهید بررسی کنیم که جریان چگونه کار می کند. اکنون کامپوننت برنامه که به طور پیش فرض ایجاد می شود به مولفه والد تبدیل می شود. هر مؤلفه ای که بعداً اضافه شود به مؤلفه فرزند تبدیل می شود.

وقتی در مرورگر “http://localhost:4200/” آدرس URL را می زنیم، ابتدا فایل index.html را اجرا می کند که در زیر نشان داده شده است –

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</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>

این تگ ریشه است که توسط Angular به طور پیش فرض ایجاد شده است. این تگ دارای مرجع در فایل 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).catch(err => console.error(err));

AppModule از برنامه ماژول والد اصلی وارد می شود و به ماژول بوت استرپ نیز داده می شود که باعث بارگیری appmodule می شود.

اجازه دهید اکنون فایل app.module.ts – را ببینیم

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

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

در اینجا، AppComponent نام داده شده است، به عنوان مثال، متغیری برای ذخیره مرجع app.component.ts و همان نام به bootstrap داده می شود. اجازه دهید اکنون فایل 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 7'; 
}

هسته انگولار وارد می‌شود و به عنوان Component نامیده می‌شود و از آن در Declarator به صورت – استفاده می‌شود.

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

در مرجع اعلام کننده به انتخابگر، templateUrl و styleUrl آورده شده است. انتخابگر در اینجا چیزی نیست جز برچسبی که در فایل index.html که در بالا دیدیم قرار داده شده است.

کلاس AppComponent دارای متغیری به نام title است که در مرورگر نمایش داده می شود. @Component از templateUrl به نام 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 به مؤلفه جدید ایجاد شده اشاره دارد.

اجازه دهید اکنون فایل های جدید ایجاد شده در new-cmp را بررسی کنیم.

new-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 را داریم. فایل استایل خالی است زیرا در حال حاضر نیازی به استایلی نداریم. اما زمانی که پروژه را اجرا می کنیم، چیزی مرتبط با کامپوننت جدید در مرورگر نمایش داده نمی شود.

مرورگر صفحه زیر را نشان می دهد –

ما چیزی مرتبط با کامپوننت جدید در حال نمایش نمی بینیم. جزء جدید ایجاد شده دارای یک فایل html با جزئیات زیر است –

<p>
   new-cmp works!
<p>

اما ما در مرورگر همان را دریافت نمی کنیم. اکنون اجازه دهید تغییرات مورد نیاز برای نمایش محتویات اجزای جدید در مرورگر را ببینیم.

انتخابگر ‘app-new-cmp’ برای مؤلفه جدید از new-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 باید در 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-cmp7></app-new-cmp>

هنگامی که تگ <app-new-cmp></app-new-cmp> اضافه می شود، تمام آنچه در فایل html وجود دارد، یعنی new-cmp.component.html کامپوننت جدید ایجاد شده در صفحه نمایش داده می شود. مرورگر به همراه داده های مؤلفه والد.

اجازه دهید جزئیات بیشتری را به مؤلفه جدید ایجاد شده اضافه کنیم و نمایشگر را در مرورگر ببینیم.

new-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() { }
}

در کلاس، یک متغیر به نام newcomponent اضافه کرده‌ایم و مقدار آن “Entered in new component create” است.

متغیر فوق به صورت زیر در فایل new-cmp.component.html اضافه می شود

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

اکنون از آنجایی که انتخابگر <app-new-cmp></app-new-cmp> را در app.component.html که .html جزء والد است قرار داده ایم، محتوای موجود در new-cmp.component. فایل html روی مرورگر نمایش داده می شود. همچنین مقداری css برای کامپوننت جدید در فایل new-cmp.component.css به شرح زیر اضافه می کنیم –

p { 
   color: blue; 
   font-size: 25px; 
}

بنابراین ما رنگ آبی و اندازه فونت را ۲۵ پیکسل برای تگ های p اضافه کرده ایم.

صفحه زیر در مرورگر نمایش داده می شود –

به همین ترتیب، می‌توانیم طبق نیاز خود، مؤلفه‌هایی ایجاد کرده و با استفاده از انتخابگر در فایل app.component.html، آن‌ها را پیوند دهیم.

منبع.

لیست جلسات قبل آموزش انگولار ۷

1. آموزش انگولار ۷
2. آموزش نمای کلی انگولار ۷
3. آموزش راه اندازی محیط انگولار ۷
4. آموزش راه اندازی پروژه در انگولار ۷