در قسمت قبلی به طور کلی با یک کامپوننت و دلایل استفاده از آن آشنا شدیم. به طور خلاصه می توان گفت که ما در یک برنامه آنگولار کدهائی به زبان HTML ایجاد می کنیم که برنامه تعاملی ما را به وجود می آورند. ولی تنها یکسری از تگ های استاندارد HTML مانند <form> و یا <video> در مرورگر وب تعریف شده اند. مسئله اینجاست که چگونه میتوانیم تگ های دلخواه خودمان را ایجاد کنیم ؟ مثلا یک تگ <weather> ایجاد کنیم که وضعیت آب و هوا را در صفحه وب نمایش دهد. یا اینکه یک تگ <login> تعریف کنیم که عملیات ورود کاربر را کنترل نماید .دلیل اصلی استفاده از یک کامپوننت در آنگولار نیز ایجاد و استفاده از تگهای سفارشی می باشد.

 

ایجاد یک کامپوننت

در این قسمت یک کامپوننت ابتدائی ایجاد خواهیم کرد. ایجاد یک فایل کامپوننت به دو صورت انجام پذیر است :

• حالت اول ایجاد یک فایل جدید و خالی است که در این حالت کدهای اولیه مورد نیاز به صورت دستی نوشته می شوند.
• حالت دوم استفاده از Angular CLI و اجرای دستور generate به صورت زیر :

$ ng generate component hello-world

 

پس از ایجاد کامپوننت، می توانیم با استفاده از تگ app-hello-world به صورت زیر در صفحه HTML، کامپوننت را فراخوانی کنیم:

<app-hello-world></app-hello-world>

یک کامپوننت ساده از اجزای زیر تشکیل می شود :

• دکوراتور (decorator) کامپوننت
• کلاس تعریف کننده کامپوننت

 

اجازه دهید نگاهی به کد کامپوننت خود بیاندازیم :

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

@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

 constructor() { }

 ngOnInit() {
 }

 }

نگران نباشید. در ادامه با تمامی این دستورات آشنا خواهید شد.

 

تزریق وابستگی ها

کد import ماژولهائی را تعریف می کند که ما قصد داریم از کدهای نوشته شده در آنها در کامپوننت خود استفاده کنیم. این دستور از دو قسمت تشکیل می شود. در قسمت اول نام ماژول مورد نظر قرار دارد و در قسمت دوم آدرس محل قرار گیری ماژول مورد نظر. در اینجا ما به کامپایلر آنگولار اعلام می کنیم که قصد داریم از کدهای نوشته شده در دو شیء Component و OnInit که در "@angular/core" قرار دارند استفاده کنیم.

 

دکوراتور کامپوننت

پس از تزریق وابستگی های مورد نیاز، دکوراتور کامپوننت قرار دارد :

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

دکوراتورها در حقیقت فراداده هائی (metadata) هستند که به کد ما اضافه می شوند. زمانی که ما از دکوراتور component در این کلاس استفاده می کنیم، در واقع مشخص میکنیم که کلاس مورد نظر یک کلاس کامپوننت است.

دکوراتور یک کامپوننت از چند قسمت تشکیل می شود. قسمت اول selector یا همان نامی است که به عنوان تگ HTML استفاده می شود. در این کامپوننت ما میخواهیم که نام <app-hello-world> را برای فراخوانی کامپوننت تعریف کنیم. برای اینکار کد زیر را به دکوراتور اضافه می کنیم :

@Component({
  selector: 'app-hello-world'
})

اضافه کردن قالب HTML

اضافه کردن کدهای قالب HTMl به یک کامپوننت به دو صورت امکان پذیر است :

1. گزینه template در دکوراتور Component:

در این حالت کدهای HTML به صورت مستقیم و به شکل زیر در کلاس کامپوننت قرار داده می شوند:

@Component({
  selector: 'app-hello-world',
  template: `
  	<p>
  	hello-world works inline!
  	</p>
  	`
 })

دقت کنید که در این حالت ما کدهای HTML را درون تیکهای برگشتی (`…..`) قرار دادیم. این قابلیت جدید که توسط ES6 تعریف شده امکان استفاده از رشته های چند گانه را فراهم می کند. استفاده از تیکهای برگشتی باعث می شود تا بتوانیم به راحتی کدهای HTML را درون کامپوننت تعریف نمائیم.

 

2. تعیین فایل قالب خارجی با استفاده از templateUrl:

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

در کامپوننت ما کدهای HTML در فایل hello-world.component.html قرار دارند و در حقیقت می توان گفت قالب HTMl کامپوننت ما از این فایل بارگزاری می شود. جهت ثبت فایل قالب به صورت زیر عمل می کنیم :

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
})

با استفاده از آدرسی که در گزینه templateUrl قرار دارد، کامپایلر محل فایل قالب را که هم مسیر با فایل کامپوننت نیز می باشد پیدا نموده و کدهای نوشته شده را فراخوانی می کند.

 

کدام دو روش بهتر است ؟ فایل قالب جداگانه یا نوشتن کد ها درون دایرکتیو ؟

در واقع انتخاب روش درج کدهای قالب بستگی به شرایط برنامه دارد. برای مدت مدیدی باور عموم بر این بود که کدهای برنامه و کدهای قالب  می بایست به صورت جدا از هم نگهداری شوند. در حالی که این کار برای برخی از پروژه ها ساده تر است ولی ممکن است در برخی پروژه ها به دلیل جابجائی بین فایلها کارائی کاهش یابد.

بهتر است در صورتی که حجم قالب HTML از یک صفحه کمتر باشد، کدهای قالب را در داخل کامپوننت قرار داد و از ایجاد فایل خارجی پرهیز نمود. به این ترتیب مشاهده همزمان قالب HTMl و کدهای کامپوننت باعث ساده تر شدن بررسی تراکنشهای بین این دو خواهد شد.

 

ایجاد استایل CSS

سومین گزینه ای که در دکوراتور کامپوننت تعریف می شود، استایل css  است. همانند قالب HTML این استایل نیز به دو صورت تعریف می شود :

1. استفاده از styles جهت درج استایل داخلی

گزینه styles به صورت آرایه ای از رشته هاست که همانند کدهای HTML در template با استفاده از تیکهای برگشتی (`…`) تعریف می شوند. هر کدام از این رشته ها شامل تعدادی از استایل های CSS می باشد که مقدار هر استایل در مقابل آن و بعد از علامت : قرار دارد. همانند مثال زیر :

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styles: [
`
  .card {
background-color: gray;
color: yellow;
           }
`
  ]
})

2. تعیین فایل استایل خارجی با استفاده از styleUrls

همانند گزینه templateUrl این امکان برای برنامه نویس فراهم است که کلیه کدهای استایل CSS را در یک فایل خارجی قرار داده و سپس آدرس فایل خارجی را در دکوراتور کامپوننت تعریف کند. همانند پارامتر styles، پارامتر StyleUrls نیز می تواند آرایه ای متشکل از یک یا چند فایل استایل خارجی باشد. به صورت زیر :

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

معمولاً برای راحتی کار فایل استایل نیز همانند فایل قالب HTML همنام با فایل کامپوننت و با پسوند .css بوده و در همان پوشه فایل کامپوننت قرار دارد.

 

خلاصه

در این آموزش ابتدا یک کامپوننت ایجاد کردیم. سپس با قسمتهای تشکیل دهنده تعریف یک کامپوننت آشنا شدیم.

ابتدا کدهای نوشته شده در ماژول های خارجی را توسط import به کامپوننت تزریق می کنیم. سپس با استفاده از دایرکتیو component کلاس کامپوننت را تعریف می کنیم.

جهت استفاده از کامپوننت به صورت یک تگ در قالب HTMl، توسط گزینه selector یک نام برای کامپوننت تعریف می کنیم.

سپس توسط پارامترهای templateUrl و template کدهای قالب HTMl را وارد می کنیم.

در نهایت با استفاده از پارامترهای styleUrls و styles کدهای css مورد نظر جهت استایل بندی قالب HTMl را تعریف می کنیم.

 

• قبلی