Angular برای مبتدیان: آشنایی با ماژول‌ها، کامپوننت‌ها و سرویس‌ها

Angular یک فریمورک قدرتمند فرانت‌اند است که توسط گوگل توسعه داده شده و برای ساخت برنامه‌های وب پویا و مقیاس‌پذیر استفاده می‌شود. برخلاف کتابخانه‌هایی مثل React که بیشتر روی لایه‌ی نمایش تمرکز دارند، Angular یک راهکار کامل ارائه می‌دهد: از مدیریت داده و سرویس‌ها گرفته تا ساختاردهی پروژه و ارتباط بین بخش‌های مختلف.

این سه مفهوم ستون‌های اصلی معماری Angular هستند:

• ماژول‌ها (Modules): چارچوبی برای سازمان‌دهی کد و تقسیم پروژه به بخش‌های منطقی.
• کامپوننت‌ها (Components): واحدهای سازنده رابط کاربری که هرکدام مسئول یک بخش مشخص از صفحه هستند.
• سرویس‌ها (Services): محلی برای قرار دادن منطق مشترک و مدیریت داده‌ها که می‌توانند بین کامپوننت‌ها به اشتراک گذاشته شوند.

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

در این راهنما، ابتدا پیش‌نیازهای کار با Angular را مرور می‌کنیم، سپس به‌صورت مرحله‌به‌مرحله با ماژول‌ها، کامپوننت‌ها و سرویس‌ها آشنا می‌شویم. در پایان هم یک مثال کوچک خواهیم داشت که نشان می‌دهد این سه بخش چگونه در کنار هم کار می‌کنند.

پیش‌نیازها

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

۱. آشنایی مقدماتی با TypeScript

• Angular بر پایه TypeScript ساخته شده است.
• اگر با JavaScript آشنا هستید، یادگیری TypeScript برای‌تان ساده‌تر خواهد بود.
• نکته مهم: TypeScript ویژگی‌هایی مثل نوع‌دهی (typing) و کلاس‌ها را اضافه می‌کند که درک معماری Angular را آسان‌تر می‌سازد.

۲. نصب Node.js و NPM

• Angular برای اجرا و مدیریت بسته‌ها به Node.js نیاز دارد.
• پس از نصب Node.js، ابزار npm (مدیر بسته‌ها) نیز در دسترس خواهد بود.
• برای بررسی نصب:

node -v
npm -v

۳. نصب Angular CLI

• Angular CLI یک ابزار خط فرمان است که کار ایجاد پروژه، کامپوننت‌ها و سرویس‌ها را ساده می‌کند.
• نصب:

  npm install -g @angular/cli
  

• بررسی نصب:

  ng version
  

۴. ایجاد اولین پروژه

• با دستور زیر یک پروژه جدید بسازید:

  ng new my-first-app
  

• سپس وارد پوشه پروژه شوید و آن را اجرا کنید:

  cd my-first-app
  ng serve
  

• حالا می‌توانید در مرورگر به آدرس http://localhost:4200 بروید و اولین برنامه Angular خود را ببینید.

ماژول‌ها (Modules)

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

ویژگی‌های کلیدی ماژول‌ها:

• هر پروژه Angular حداقل یک ماژول اصلی دارد: AppModule.
• ماژول‌ها می‌توانند ماژول‌های دیگر را وارد کنند (Import) و قابلیت‌هایشان را در اختیار پروژه قرار دهند.
• امکان تقسیم پروژه به ماژول‌های جداگانه برای بخش‌های مختلف (مثلاً ماژول کاربر، ماژول مدیریت) وجود دارد.

نمونه کد AppModule:

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

نکات مهم:

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

چک‌لیست استفاده از ماژول‌ها:

• اگر پروژه کوچک است، همان AppModule کافی است.
• اگر پروژه بزرگ‌تر شد، بخش‌های مختلف را در ماژول‌های جداگانه تقسیم کنید.
• همیشه ماژول‌ها را طوری طراحی کنید که قابلیت استفاده مجدد داشته باشند.

کامپوننت‌ها (Components)

کامپوننت‌ها قلب رابط کاربری در Angular هستند. هر کامپوننت یک بخش مشخص از صفحه را مدیریت می‌کند و معمولاً شامل سه بخش اصلی است:

• HTML Template: ساختار و محتوای نمایشی.
• CSS/Style: ظاهر و استایل بخش مربوطه.
• TypeScript Class: منطق و داده‌های پشت کامپوننت.

ویژگی‌های کلیدی کامپوننت‌ها:

• هر کامپوننت مستقل است و می‌تواند در بخش‌های مختلف پروژه استفاده شود.
• ارتباط بین کامپوننت‌ها از طریق ورودی‌ها (@Input) و خروجی‌ها (@Output) انجام می‌شود.
• کامپوننت‌ها در ماژول‌ها ثبت می‌شوند تا قابل استفاده باشند.

ایجاد یک کامپوننت جدید با Angular CLI:

ng generate component hello-world

این دستور چهار فایل ایجاد می‌کند:

• hello-world.component.ts : منطق کامپوننت
• hello-world.component.html : قالب HTML
• hello-world.component.css : استایل
• hello-world.component.spec.ts : فایل تست

نمونه ساده از یک کامپوننت:

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

@Component({
  selector: 'app-hello-world',
  template: `<h2>سلام Angular!</h2>`,
  styles: [`h2 { color: darkblue; }`]
})
export class HelloWorldComponent { }

نکات مهم:

• selector: نامی است که برای استفاده از کامپوننت در HTML به کار می‌رود.
• template یا templateUrl: محتوای HTML کامپوننت.
• styles یا styleUrls: استایل‌های مرتبط با کامپوننت.

سرویس‌ها (Services)

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

ویژگی‌های کلیدی سرویس‌ها:

• سرویس‌ها معمولاً کلاس‌های ساده TypeScript هستند.
• با استفاده از Dependency Injection در کامپوننت‌ها یا ماژول‌ها تزریق می‌شوند.
• بهترین مکان برای قرار دادن کدهایی است که نباید در کامپوننت‌ها تکرار شوند (مثل درخواست‌های HTTP یا مدیریت وضعیت).

ایجاد یک سرویس جدید با Angular CLI:

ng generate service data

این دستور دو فایل ایجاد می‌کند:

• data.service.ts : منطق سرویس
• data.service.spec.ts : فایل تست

نمونه ساده سرویس برای گرفتن داده از API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'  // سرویس در کل برنامه در دسترس خواهد بود
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

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

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-post-list',
  template: `
    <ul>
      <li *ngFor="let post of posts">{{ post.title }}</li>
    </ul>
  `
})
export class PostListComponent implements OnInit {
  posts: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }
}

نکات مهم:

• @Injectable: مشخص می‌کند که کلاس می‌تواند به‌عنوان سرویس تزریق شود.
• providedIn: 'root': سرویس را در سطح کل برنامه در دسترس قرار می‌دهد.
• سرویس‌ها می‌توانند داده‌ها را بین چندین کامپوننت به اشتراک بگذارند.

ارتباط بین ماژول‌ها، کامپوننت‌ها و سرویس‌ها

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

چطور این سه بخش به هم متصل می‌شوند؟

• ماژول‌ها نقش ظرف را دارند: آن‌ها کامپوننت‌ها و سرویس‌ها را ثبت می‌کنند و پروژه را سازمان‌دهی می‌کنند.
• کامپوننت‌ها رابط کاربری را می‌سازند و داده‌ها را نمایش می‌دهند.
• سرویس‌ها داده‌ها و منطق مشترک را مدیریت می‌کنند و به کامپوننت‌ها تزریق می‌شوند.

مثال یکپارچه:

فرض کنید می‌خواهیم لیست پست‌ها را از یک API نمایش دهیم:

سرویس (DataService): داده‌ها را از API می‌گیرد.

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}
  getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

کامپوننت (PostListComponent): داده‌ها را از سرویس دریافت کرده و در قالب HTML نمایش می‌دهد.

@Component({
  selector: 'app-post-list',
  template: `
    <h3>لیست پست‌ها</h3>
    <ul>
      <li *ngFor="let post of posts">{{ post.title }}</li>
    </ul>
  `
})
export class PostListComponent implements OnInit {
  posts: any[] = [];
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.getPosts().subscribe(data => this.posts = data as any[]);
  }
}

ماژول (AppModule): کامپوننت و سرویس را ثبت می‌کند.

@NgModule({
  declarations: [PostListComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [PostListComponent]
})
export class AppModule {}

دیاگرام ساده ارتباط:

• AppModule: شامل PostListComponent و DataService
• PostListComponent: داده‌ها را از DataService می‌گیرد
• DataService: داده‌ها را از API دریافت می‌کند

جمع‌بندی و نکات پایانی

پس از مرور ماژول‌ها، کامپوننت‌ها و سرویس‌ها، حالا تصویر کلی از معماری Angular برایتان روشن‌تر شده است. این سه بخش ستون‌های اصلی هستند که هر پروژه Angular بر پایه آن‌ها ساخته می‌شود.

مرور سریع مفاهیم:

• ماژول‌ها (Modules): ظرفی برای سازمان‌دهی پروژه و ثبت کامپوننت‌ها و سرویس‌ها.
• کامپوننت‌ها (Components): واحدهای رابط کاربری که داده‌ها را نمایش می‌دهند و رویدادها را مدیریت می‌کنند.
• سرویس‌ها (Services): محل قرارگیری منطق مشترک و مدیریت داده‌ها، قابل تزریق در کامپوننت‌ها.

گام‌های بعدی برای یادگیری عمیق‌تر:

• مطالعه مستندات رسمی Angular در angular.io.
• تمرین با پروژه‌های کوچک (مثل Todo App یا لیست کاربران).
• دوره آموزش Angular وبسایت راکت