آموزش ماژول‌ها و کامپوننت‌ها Angular

در دنیای توسعه وب مدرن، فریم‌ورک‌های مختلفی برای ساخت برنامه‌های کاربردی پیچیده و مقیاس‌پذیر وجود دارند، اما Angular یکی از قدرتمندترین و محبوب‌ترین فریم‌ورک‌ها برای ساخت اپلیکیشن‌های وب است. یکی از ویژگی‌های برجسته Angular که آن را از سایر فریم‌ورک‌ها متمایز می‌کند، سازماندهی کدها با استفاده از “ماژول‌ها و کامپوننت‌ها” است. این دو مفهوم به توسعه‌دهندگان این امکان را می‌دهند که برنامه‌های خود را به بخش‌های کوچکتر، قابل مدیریت و تست‌پذیر تقسیم کنند.

آموزش Angular در این مقاله با تمرکز بر ماژول‌ها و کامپوننت‌ها، شما را با یکی از اصول پایه‌ای در ساخت اپلیکیشن‌های Angular آشنا می‌کند. ماژول‌ها در Angular به عنوان واحدهای سازمانی عمل می‌کنند که تمامی اجزای مختلف برنامه را جمع‌آوری می‌کنند، در حالی که کامپوننت‌ها مسئول نمایش داده‌ها و تعاملات با کاربر هستند. در این مقاله، شما خواهید آموخت که ماژول‌ها چه کاربردهایی دارند، چگونه می‌توان کامپوننت‌های سفارشی ایجاد کرد، و چگونه ارتباط بین کامپوننت‌ها را برقرار کنید تا برنامه‌ای انعطاف‌پذیر و قابل توسعه بسازید.با ما همراه باشید تا به طور کامل با مفاهیم “ماژول‌ها و کامپوننت‌ها Angular” آشنا شوید و نحوه استفاده از این ابزارها را برای ساخت برنامه‌های وب پیشرفته و کارآمد یاد بگیرید.

مقدمه به NgModules

آموزش Angular به ما کمک می‌کند تا در دنیای پیچیده توسعه برنامه‌های وب، ساختارهای منظم و قابل‌توسعه‌ای ایجاد کنیم. یکی از مفاهیم اساسی Angular که در سازماندهی و مدیریت کدهای برنامه‌ها به‌کار می‌رود، استفاده از ماژول‌ها است. ماژول‌ها به توسعه‌دهندگان این امکان را می‌دهند که برنامه‌های خود را به قسمت‌های کوچکتر و مدیریت‌شده تقسیم کنند، تا هم توسعه آن‌ها ساده‌تر شود و هم امکان تست و نگهداری راحت‌تری فراهم شود. در این بخش، به بررسی مفهوم “ماژول‌ها” در Angular و کاربرد آن‌ها خواهیم پرداخت.

تعریف ماژول‌ها و کاربرد آنها

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

به طور خلاصه، هر ماژول در Angular می‌تواند شامل اجزای زیر باشد:

کامپوننت‌ها: واحدهای مستقل رابط کاربری (UI) که تعاملات با کاربر را مدیریت می‌کنند.
دایرکتیوها: عناصر HTML را دستکاری کرده و رفتار جدیدی به آن‌ها اضافه می‌کنند.
سرویس‌ها: کدهای عمومی و منطق تجاری که بین بخش‌های مختلف برنامه به اشتراک گذاشته می‌شوند.
پایگاه داده‌ها و دسترسی‌ها: مانند HTTP Client برای ارتباط با APIها.

در Angular، هر برنامه حداقل یک ماژول اصلی به نام AppModule دارد که به‌عنوان ورودی و نقطه شروع برای برنامه شناخته می‌شود. این ماژول تمامی اجزا و وابستگی‌های دیگر برنامه را شامل می‌شود. به‌عنوان مثال، در برنامه‌ای که شامل بخش‌های مختلفی مانند صفحات مختلف یا ماژول‌های تخصصی است، می‌توانیم هر بخش را در یک ماژول مجزا قرار دهیم و آن‌ها را در AppModule وارد کنیم.

در ادامه، یک مثال ساده از یک ماژول در Angular آورده شده است که می‌تواند به‌عنوان نقطه شروع برای برنامه‌های پیچیده‌تر مورد استفاده قرار گیرد:

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

@NgModule({
  declarations: [AppComponent],   // معرفی کامپوننت‌ها
  imports: [BrowserModule],       // ماژول‌های وارد شده
  providers: [],                  // سرویس‌ها
  bootstrap: [AppComponent]       // کامپوننت اولیه برای اجرا
})
export class AppModule {}

در این مثال:

@NgModule: دکوراتور اصلی است که ماژول را تعریف می‌کند.
declarations: کامپوننت‌ها و دایرکتیوهایی که در این ماژول استفاده می‌شوند را مشخص می‌کند.
imports: ماژول‌هایی که در این ماژول به‌کار می‌روند (مانند BrowserModule) را وارد می‌کند.
providers: سرویس‌هایی که در این ماژول به اشتراک گذاشته می‌شوند را تعریف می‌کند.
bootstrap: کامپوننتی که هنگام شروع برنامه بارگذاری می‌شود.

ساخت ماژول‌های سفارشی برای سازماندهی بهتر کد

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

برای ایجاد یک ماژول سفارشی در Angular، از ابزار خط فرمان Angular (CLI) استفاده می‌کنیم. دستور زیر یک ماژول جدید به نام my-feature ایجاد می‌کند:

ng generate module my-feature

این دستور به‌طور خودکار یک پوشه به نام my-feature ایجاد کرده و فایل‌های اولیه مربوط به ماژول را در آن قرار می‌دهد. شما می‌توانید داخل این ماژول، کامپوننت‌ها، دایرکتیوها و سرویس‌های مربوط به ویژگی خاصی از برنامه را اضافه کنید. این ساختار کمک می‌کند تا کدها به‌صورت جداگانه مدیریت شده و توسعه‌پذیری پروژه بهبود یابد.

به‌طور کلی، استفاده از ماژول‌ها در Angular علاوه بر سازمان‌دهی بهتر کد، به توسعه‌دهندگان کمک می‌کند تا به‌راحتی وابستگی‌ها را مدیریت کرده و برنامه‌های مقیاس‌پذیر و قابل تست بسازند.

ایجاد و استفاده از کامپوننت‌ها

کامپوننت‌ها یکی از بنیادی‌ترین اجزای فریم‌ورک Angular هستند که نقش بسیار مهمی در ساختار و عملکرد برنامه ایفا می‌کنند. کامپوننت‌ها مسئول نمایش داده‌ها، مدیریت تعاملات کاربر و هماهنگ‌سازی با سرویس‌ها و داده‌های برنامه در رابط کاربری (UI) هستند. در این بخش، به بررسی نحوه ایجاد و استفاده از کامپوننت‌ها در Angular خواهیم پرداخت و نحوه ارتباط بین کامپوننت‌ها را توضیح خواهیم داد.

روش‌های ایجاد کامپوننت با CLI

برای ایجاد یک کامپوننت جدید در Angular، از ابزار خط فرمان Angular (CLI) استفاده می‌شود. دستور ng generate component یا ng g c این امکان را می‌دهد که به‌راحتی یک کامپوننت جدید ایجاد کنید. در واقع این دستور، تمامی فایل‌های مورد نیاز برای یک کامپوننت شامل HTML، CSS، TypeScript و فایل‌های تست را به‌طور خودکار ایجاد می‌کند.

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

ng generate component my-component

یا می‌توانید از نسخه کوتاه‌تر دستور استفاده کنید:

ng g c my-component

این دستور کامپوننت جدیدی با نام my-component ایجاد می‌کند. فایل‌های مربوط به این کامپوننت در پوشه‌ای با همان نام (به‌طور پیش‌فرض در پوشه src/app/my-component) قرار می‌گیرند و به این ترتیب ساختار پوشه و فایل‌های پروژه شما به‌طور خودکار به‌روز می‌شود.

فایل‌هایی که به‌طور پیش‌فرض ایجاد می‌شوند عبارتند از:

my-component.component.ts: فایل TypeScript که در آن منطق کامپوننت نوشته می‌شود.
my-component.component.html: فایل HTML که شامل ساختار و طرح‌بندی رابط کاربری است.
my-component.component.css: فایل CSS برای استایل‌دهی به کامپوننت.
my-component.component.spec.ts: فایل تست که برای نوشتن تست‌های واحد برای کامپوننت استفاده می‌شود.

ارتباط بین کامپوننت‌ها (Parent و Child Components)

در Angular، کامپوننت‌ها می‌توانند با یکدیگر ارتباط برقرار کنند. این ارتباط می‌تواند به دو صورت باشد:

ارسال داده‌ها از کامپوننت والد (Parent) به کامپوننت فرزند (Child)
ارسال داده‌ها یا رویدادها از کامپوننت فرزند به کامپوننت والد

این ارتباطات با استفاده از دکوراتورهای @Input() و @Output() در Angular انجام می‌شود.

استفاده از @Input() برای ارتباط بین کامپوننت‌ها

اگر بخواهیم داده‌ای را از کامپوننت والد به فرزند منتقل کنیم، از دکوراتور @Input() استفاده می‌کنیم. این دکوراتور به کامپوننت فرزند اجازه می‌دهد تا داده‌هایی که از کامپوننت والد ارسال می‌شود را دریافت کند.

در مثال زیر، داده‌های parentData از کامپوننت والد به کامپوننت فرزند منتقل می‌شود:

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `<app-child [childData]="parentData"></app-child>`
})
export class ParentComponent {
  parentData = 'Hello from Parent';
}

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `<p>{{ childData }}</p>`
})
export class ChildComponent {
  @Input() childData: string;
}

در اینجا:

در کامپوننت والد، مقدار parentData به‌عنوان ورودی به کامپوننت فرزند ارسال می‌شود.
در کامپوننت فرزند، از دکوراتور @Input() برای دریافت مقدار childData استفاده می‌شود.

استفاده از @Output() برای ارسال رویدادها از Child به Parent

برای ارسال اطلاعات یا رویدادها از کامپوننت فرزند به والد، از دکوراتور @Output() به همراه EventEmitter استفاده می‌کنیم. این روش به ما اجازه می‌دهد که رویدادها یا تغییرات در داده‌ها را از فرزند به والد ارسال کنیم.

در این مثال، وقتی که کاربر بر روی دکمه کلیک می‌کند، رویدادی به کامپوننت والد ارسال می‌شود:

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `<app-child (childEvent)="receiveData($event)"></app-child>`
})
export class ParentComponent {
  receiveData(data: string) {
    console.log('Received from child:', data);
  }
}

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `<button (click)="sendData()">Send Data to Parent</button>`
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();

  sendData() {
    this.childEvent.emit('Hello from Child');
  }
}

در اینجا:

در کامپوننت فرزند، از دکوراتور @Output() به همراه EventEmitter استفاده می‌شود تا رویدادی را به والد ارسال کند.
در کامپوننت والد، با استفاده از (childEvent), رویداد ارسال شده از کامپوننت فرزند دریافت شده و در متد receiveData پردازش می‌شود.

این روش‌ها به شما این امکان را می‌دهند که ارتباطات بین کامپوننت‌ها را به سادگی مدیریت کرده و داده‌ها یا رویدادها را به‌صورت مؤثری بین اجزای مختلف برنامه ارسال کنید.

نتیجه‌گیری

در این مقاله، به بررسی اصول و مفاهیم پایه‌ای “ماژول‌ها و کامپوننت‌ها Angular” پرداختیم. یاد گرفتیم که ماژول‌ها در Angular برای سازمان‌دهی کدها و مدیریت وابستگی‌ها بسیار مهم هستند و به ما کمک می‌کنند تا برنامه‌های خود را به بخش‌های قابل مدیریت و مستقل تقسیم کنیم. همچنین، با نحوه ایجاد و استفاده از کامپوننت‌ها آشنا شدیم و روش‌های ارتباط بین کامپوننت‌ها را از طریق دکوراتورهای @Input() و @Output() بررسی کردیم. با تسلط بر این مفاهیم، قادر خواهید بود برنامه‌های پیچیده‌تری بسازید و کد خود را به‌طور مؤثرتر سازمان‌دهی کنید. در نهایت، ماژول‌ها و کامپوننت‌ها Angular به شما این امکان را می‌دهند که کدهای تمیز، قابل نگهداری و مقیاس‌پذیر ایجاد کنید.