معرفی کامپوننت‌ها (Components) در انگولار

در فصل گذشته معرفی کلی و اجمالی از بخش‌های مختلف نرم‌افزارهای مبتنی بر فریم‌ورک قدرتمند انگولار را ارائه کردیم. حال در این فصل می‌خواهیم به یکی از اجزای بسیار مهم اپلیکیشن‌ های انگولار بپردازیم. درست حدس زدید، کامپوننت انگولار (Component) به عنوان یکی از اجزای اصلی این فریم ورک به حساب می‌ آید. در ادامه با این بخش بیشتر آشنا شوید.

کامپوننت (Component) در انگولار چیست؟

کامپوننت‌ها به عنوان کلید اصلی و قلب تپنده‌ی نرم‌افزارهای مبتنی بر فریم‌ورک قدرتمند انگولار، می‌باشند. اگر به نام‌گذاری فایل‌های موجود در پوشه‌ی app توجه داشته باشید، تمامی اسامی با پسوند component. همراه هستند و این امر اهمیت مبحث کامپوننت‌ها را نشان می‌دهد.

همانطور که در فصل گذشته مشاهده کردید، کامپوننت والد به صورت پیش‌فرض app-root نام دارد که در ابتدای برنامه، با فراخوانی آدرس http://localhost:4200 بارگذاری می‌شوند.

کامپوننت‌ها می‌توانند به قسمت‌های کوچک‌تری تبدیل شوند. اگر بخواهیم برای این جمله یک مثال واقعی مطرح کنیم بدین صورت است:

شما فرض کنید یک ماشین در حال حرکت را مشاهده می‌کنید، چیزی که در برابر چشمهای شما قرار گرفته است تنها یک ماشین متحرک است و یک کامپوننت واحد را ملاحظه می‌کنید در حالیکه این کامپوننت واحد از درون به قسمت‌های مختلف مانند گاز، موتور، بنزین، چرخ‌ها و ... تقسیم‌بندی شده است.

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

بنابراین هر کامپوننت همانطور که مستحضر هستید دارای فایل html و css و فرمان‌های کنترلی جدا می‌باشد. این امکان بی نظیر و فوق العاده است! یعنی شما می‌توانید یک نرم‌افزار خیلی پیچیده را به کامپوننت‌های کوچک‌تر تقسیم‌بندی کرده و کارهای پردازشی را ساده‌تر انجام دهید. از مزایای استفاده از کامپوننت‌ها می‌توان به سادگی در کدنویسی، کاهش تکرار کدها، ارائه مفهوم ارث‌بری در کامپوننت‌ها و ... اشاره کرد.

تعریف یک کامپوننت در انگولار

قبل از اینکه به نحوه‌ی کدنویسی و تعریف ساختار یک کامپوننت بپردازیم باید یادآور شویم که یک کامپوننت مادر در ابتدای ایجاد پروژه به صورت پیشفرض در پوشه app قرار می‌گیرد که با نام app.component شناخته می‌شود.

۱) ایجاد یک پوشه درون پوشه app

برای اینکه کامپوننت‌های فرزند (به کامپوننت‌هایی گفته می‌شود که به صورت دستی ساخته و به مجموعه اضافه خواهند شد) از کامپوننت والد app جدا شود، بهتر است در پوشه‌ی app یک پوشه‌ی دیگر ایجاد کنیم. در این آموزش قصد داریم یک کامپوننت به نام server به عنوان کامپوننت فرزند به سیستم انگولار معرفی کنیم.

۲) ایجاد یک فایل با پسوند ts. درون پوشه‌ی server

پس از ایجاد پوشه‌ در مسیر app روی آن راست کلیک کرده و سپس یک فایل با پسوند ts. ایجاد می‌کنیم. توجه داشته باشید که یک سری قوانین خاص برای نام‌گذاری این فایل‌ها وجود دارد. بنابراین برای هر کامپوننتی که اضافه می‌کنید بهتر است نام پوشه را به عنوان نام کامپوننت برگزینید. در نهایت با پسوند component.ts. آن را ایجاد کنیم. بنابراین فایل ما به صورت زیر خواهد بود

server.component.ts

سپس محتویات درون این فایل را به صورت زیر کدنویسی می‌کنیم:

export class ServerComponent {
    
}

همانطور که مشاهده می‌کنید هر کامپوننت به صورت یک کلاس export تعریف می‌شود. وقتی هر چیزی را به صورت کلاس تعریف می‌کنیم یعنی می‌توانیم آن را مقداردهی اولیه کرده، از روی آن شیء ایجاد کنیم و مباحث ارث بری را روی آن پیاده‌سازی کنیم.

حال وقتی یک کلاس به صورت export تعریف می‌شود یعنی می‌توان از آن در سایر بخش‌های پروژه استفاده کرد. همانطور که ملاحظه کردید از کلاس AppComponent در فایل main.ts‌ استفاده کردیم.

نام کامپوننتی که به صورت کلاس تعریف می‌کنیم باید PascalCase بوده و پس از نوشتن اسم کامپوننت که در اینجا Server است عبارت Component را به آن اضافه کنیم. بنابراین داریم ServerComponent.

تا به اینجای کار ما یک فایل تایپ اسکریپت ایجاد کرده‌ایم که هیچ تفاوتی از نظر ساختاری با سایر کلاس‌ها ندارد. اما با اضافه کردن یک مفسر به این کلاس، ویژگی و قابلیت خاص‌تری به آن اضافه می‌کنیم.

مفسرها در انگولار به وفور یافت شده و با علامت @ معرفی می‌شوند.

همانطور که در فصل گذشته نیز مشاهده کردید مفسر NgModule@ و Component@ در کدها وجود داشتند. بنابراین هرگاه از علامت @ به همراه یک عبارت یا اسم استفاده کردیم می‌خواهیم یک توضیحات و در نهایت قابلیتی را به کلاس کامپوننت خود اضافه کنیم.

یعنی با استفاده از دکوراتور (Decorator) یا مفسرها به برنامه اطلاع می‌دهیم که این ویژگی‌ها و این متدها را قبل از اجرای کلاس مورد توجه قرار بده!

بنابراین کد بالا به صورت زیر ویرایش می‌شود:

@Component()

export class ServerComponent {
    
}

همانطور که ملاحظه می‌کنید اگر کدهای بالا را درون ادیتور خود قرار دهید با خطا مواجه خواهید شد بنابراین برای استفاده از قابلیت و ویژگی مفسرها یا دکوراتورها در کلاس (کامپوننت) موردنظر باید ابتدا آن را از هسته اصلی انگولار فراخوانی کنید.

برای این فراخوانی از دستور Import استفاده کرده و جزء Component را از هسته‌ی اصلی angular/core بارگذاری می‌کنیم. بنابراین داریم:

import {Component} from "@angular/core"

@Component()

export class ServerComponent {

}

سپس باید اطلاعات موردنیاز برای معرفی این کامپوننت را به مفسر Component ارائه دهیم تا مشخصه‌ی اصلی این کامپوننت تعیین گردد. بنابراین برای تکمیل کد بالا داریم:

import {Component} from "@angular/core"

@Component({
    selector: 'app-server'
})

export class ServerComponent {

}

در این مرحله سکلتور یک کامپوننت را به مفسر معرفی کردیم. این نام می‌تواند هر آنچه که شما دوست دارید باشد اما هرگز از نام‌های تکراری برای سکلتورهای خود استفاده نکنید.

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

بنابراین قالب موردنظر را باید مشابه کامپوننت app‌ ایجاد کرده و سپس به این مفسر اطلاع دهیم. در اینجا نام سکلتور app-server بوده و قالب در پوشه‌ی server با نام server.component.html ایجاد و در نهایت به مجموعه‌ی فایل‌ها اضافه خواهد شد. بنابراین در ادامه‌ی کدها داریم:

import {Component} from "@angular/core"

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

export class ServerComponent {

}

به هنگام تعریف یک قالب و ساختار در templateUrl از علامت /. استفاده کرده‌ایم، این علامت به معنی مسیردهی نسبی است.

یعنی شما می‌گویید نسبت به این فایل server.component.ts مسیر فایل server.component.html کجاست. وقتی یک نقطه قرار می‌دهیم یعنی در همین پوشه که فایل server.component.ts قرار گرفته است، فایل server.component.html نیز وجود دارد.

همچنین برای اینکه روند آموزش ادامه داشته باشد درون فایل server.component.html متن زیر را نوشته ایم:

<h3>This is a Server Component</h3>

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

معرفی یک کامپوننت به سیستم در انگولار

برای تعریف این کامپوننت باید به فایل app.module.ts مراجعه کنیم.

این فایل به عنوان معرف اصلی نرم‌افزار شما به حساب می‌آید و هر آنچه درون دکوراتور یا مفسر آن تعریف می‌شود نمایانگر روند اجرایی برنامه‌ی شماست.

برای درک بهتر فایل app.module.ts‌ را باز کنید. همانطور که مشاهده می‌کنید یک مفسر با نام NgModule@ ایجاد و در بخش بالایی صفحه توسط دستور import از هسته اصلی انگولار angular/core فراخوانی شده است. یعنی یک مفسر از نوع ماژول برای معرفی نرم‌افزار فراخوانی و در نهایت توضیحات لازم و اطلاعات کافی برای اجرا درون آن قرار گرفته است.

درون این مفسر NgModule@ ویژگی‌ها (Properties) زیادی وجود دارد که به ترتیب هر یک از آنها را توضیح می‌دهیم:

• declarations: این ویژگی کامپوننت‌هایی که در طول برنامه استفاده می‌شوند را معرفی می‌کند.
• bootstrap: این ویژگی به انگولار می‌گوید که:‌ هی انگولار قبل از همه‌ی برنامه‌ها، کامپوننت AppComponent رو به صورت خودکار راه‌اندازی کن!
• imports: این ویژگی ماژول‌‎های موردنیاز برای کار کردن با المان‌های کامپوننت‌ها را فراخوانی می‌کند.
• providers:  به عنوان سرویس‌دهنده‌ها معرفی می‌شوند که در مباحث بعدی بیشتر به آن می‌پردازیم.

حال به ادامه‌ی مثال قبل می‌‎پردازیم و در بخش declarations نام کامپوننت خود را اضافه می‌‎کنیم. توجه داشته باشید که با وارد کردن نام ServerComponent خطایی را ادیتور به شما ارائه می‌دهد، زیرا برای استفاده از یک کامپوننت ابتدا باید آن را فراخوانی کرد بنابراین در قسمت قبل از NgModule@ کامپوننت مربوطه را فراخوانی می‌کنیم:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {ServerComponent} from "./server/server.component";

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

حال برای استفاده از این کامپوننت فایل app.component.html را باز کرده و سپس دستور زیر را درون آن قرار می‌دهیم. توجه داشته باشید که با این روش از یک کامپوننت درون کامپوننت دیگر استفاده کرده‌ایم:

<h1>The App Component</h1>
<hr>
<app-server></app-server>

بسیار عالی دوستان عزیز تا به اینجای کار شما توانستید یک کامپوننت انگولاری را به صورت دستی (بدون استفاده از angular-cli) ایجاد کنید. در جلسه بعدی به نحوه ایجاد کامپوننت ها با استفاده از ساختار CLI می پردازیم. با ما همراه باشید.

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