Angular

Web Frameworks

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

چرا Angular

از این فریمورک استفاده می‌کنیم چون ساختار ماژولار و قابلیت‌های داخلی جامعی دارد که توسعه برنامه‌های پیچیده را ساده و سریع می‌کند. همچنین، این فریمورک قابلیت تست‌پذیری بالا و عملکرد بهینه‌ای ارائه می‌دهد که کیفیت و پایداری برنامه‌ها را تضمین می‌کند.

مقدمه‌ای بر Angular

Angular یک فریمورک و پلتفرم برای ساخت برنامه‌های تک‌صفحه‌ای (SPA یا Single Page Application) با استفاده از HTML و TypeScript است. این فریمورک توسط گوگل توسعه داده شده و نگهداری می‌شود و ابزارها و معماری محکمی را برای ساخت برنامه‌های قابل گسترش ارائه می‌دهد.

ویژگی‌ها و مزایای کلیدی Angular

• TypeScript
  Angular با TypeScript نوشته شده است که یک SuperSet بر JavaScript است و ویژگی‌های زیادی از جمله تایپ استاتیک را به زبان اضافه می‌کند.

• Templating
  Angular از یک سیستم طراحی template پیشرفته استفاده می‌کند که به شما این امکان را می‌دهد تا بتوانید به راحتی داده‌های پویا را به template متصل کنید.

• Component / Directive
  با استفاده از دایرکتیوها و کامپوننت‌ها می‌توانید رفتارها و نماهایی با قابلیت استفاده مجدد ایجاد کنید.

---

مرور کلی بر Angular

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

• ماژول‌ها (Modules) هر برنامه Angular از یک یا چند ماژول تشکیل شده است. ماژول‌ها به سازماندهی کد و مدیریت وابستگی‌ها کمک می‌کنند.

• کامپوننت‌ها (Components) کامپوننت‌ها بلوک‌های ساختمانی اصلی یک برنامه Angular هستند. هر کامپوننت شامل یک کلاس TypeScript، یک قالب HTML و یک فایل CSS است.

• دایرکتیوها (Directives) دایرکتیوها به شما امکان می‌دهند تا رفتارهای خاصی را به المان‌های انگولار اضافه کنید.

• سرویس‌ها (Services) سرویس‌ها برای مدیریت منطق و تبادل داده‌ها بین کامپوننت‌ها استفاده می‌شوند.

• تزریق وابستگی (Dependency Injection) تزریق وابستگی یک Design Pattern است که در Angular برای مدیریت وابستگی‌ها استفاده می‌شود.

• روتر (Router) روتر به شما امکان می‌دهد تا بین نماهای مختلف در برنامه جابه‌جا شوید.

پیش‌نیازها

پیش از هر چیزی برای یادگیری انگولار شما باید با ابزار npm (Node Package Manager) آشنا شوید. این ابزار، برای مدیریت بسته‌های پروژه شماست، شما می‌توانید از ابزار‌های دیگری همچون yarn،pnpm برای مدیریت بسته‌ها استفاده کنید.

• نصب node.js
• همه چیز درباره node.js
• پکیچ منیجر های دیگر

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

• نصب و راه‌اندازی Angular
• ساختار پروژه
• فایل angular.json

مفاهیم اساسی Angular

Components

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

برای ساخت کامپوننت از @Component استفاده می‌کنیم. در این decorator مشخصه selector مشخص می‌کند که این کامپوننت با چه تگی در HTML استفاده خواهد شد، template قالب HTML کامپوننت را تعریف می‌کند، و styles استایل‌های CSS مربوط به کامپوننت را مشخص می‌کند.

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

در این مثال، یک کامپوننت ساده به نام HelloWorldComponent ایجاد می‌کنیم که یک پیام “Hello, World!” را نمایش می‌دهد. برای ایجاد یک کامپوننت جدید با استفاده از Angular CLI، دستور زیر را در ترمینال اجرا کنید:

ng generate component hello-world

یا به صورت مختصر:

ng g c hello-world

این دستور در هر دایرکتوری اجرا شود به صورت خودکار دایرکتوری جدید شامل فایل HTML، CSS، TypeScript و فایل تست تشکیل می‌دهد. (برای نام گذاری componentها از قرارداد name.component.ts و برای تست از name.component.spec.ts استفاده می‌شود)

فایل hello-world.component.ts به این صورت خواهد بود:

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

@Component({
    selector: 'app-hello-world',
    template: '<h1>Hello, World!</h1>',
    styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent {
}

در این مثال:

• selector مشخص می‌کند که این کامپوننت با استفاده از تگ <app-hello-world> در HTML استفاده خواهد شد.
• template قالب HTML کامپوننت را تعریف می‌کند.
• styles استایل‌های CSS مربوط به کامپوننت را تعریف می‌کند.

برای استفاده از این کامپوننت در برنامه، می‌توانید تگ <app-hello-world> را به قالب app.component.html اضافه کنید:

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

حال با اجرای مجدد پروژه، کامپوننت ساخته شده نمایش داده می‌شود.

برای مطالعه بیشتر به مستندات رسمی انگولار مراجعه کنید.

چرخه زندگی کمپوننت‌ها

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

مراحل چرخه زندگی کمپوننت‌ها

چرخه زندگی هر کمپوننت در Angular شامل مراحل زیر است:

1. ngOnChanges

   • این متد هر بار که ورودی‌های کمپوننت تغییر کنند، فراخوانی می‌شود. می‌توانید تغییرات را مشاهده کرده و به آن‌ها واکنش نشان دهید.

   ngOnChanges(changes: SimpleChanges) {
     console.log('Changes detected:', changes);
   }

2. ngOnInit

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

   ngOnInit() {
     console.log('Component initialized');
   }

3. ngDoCheck

   • این متد به شما اجازه می‌دهد تا تشخیص‌های شخصی در مورد تغییرات ورودی را انجام دهید. این متد بارها می‌تواند در طول عمر کمپوننت فراخوانی شود.

   ngDoCheck() {
     console.log('Change detection running');
   }

4. ngAfterContentInit

   • این متد یک بار بعد از وارد کردن محتوای خارجی به کمپوننت (معمولاً از ng-content) فراخوانی می‌شود.

   ngAfterContentInit() {
     console.log('Content initialized');
   }

5. ngAfterContentChecked

   • این متد بعد از اینکه محتوای خارجی بررسی شد، فراخوانی می‌شود. می‌توانید برای انجام کارهای بعد از بررسی محتوا استفاده کنید.

   ngAfterContentChecked() {
     console.log('Content checked');
   }

6. ngAfterViewInit

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

   ngAfterViewInit() {
     console.log('View initialized');
   }

7. ngAfterViewChecked

   • این متد پس از بررسی نمای کمپوننت فراخوانی می‌شود. می‌توانید برای انجام کارهایی که بعد از این بررسی نیاز است، استفاده کنید.

   ngAfterViewChecked() {
     console.log('View checked');
   }

8. ngOnDestroy

   • این متد قبل از حذف کمپوننت از DOM فراخوانی می‌شود. می‌توانید منابعی نظیر اشتراک‌ها (subscriptions) را آزاد کنید.

   ngOnDestroy() {
     console.log('Component is about to be destroyed');
   }

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

منابع بیشتر:

• مستندات رسمی Angular
• چرخه زندگی کمپوننت‌ها در Angular

Dependency injection

Dependency Injection یا تزریق وابستگی‌ها یک تکنیک است که یک شئ وابستگی‌های شئ دیگر را تامین (تزریق) می‌کند. که این فرآیند توسط انگولار انجام می‌شود

• آشنایی با تزریق وابستگی در انگولار

Services

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

تعریف سرویس

برای ایجاد یک سرویس در انگولار، ابتدا باید یک کلاس ایجاد کرده و سپس این کلاس را با استفاده از دکوراتور @Injectable تزریق‌پذیر (injectable) کنید. به عنوان مثال، یک سرویس ساده برای مدیریت کاربران را در نظر بگیرید:

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

@Injectable({
    providedIn: 'root',
})
export class UserService {
    private users = ['Alice', 'Bob', 'Charlie'];

    constructor() {}

    getUsers() {
        return this.users;
    }

    addUser(user: string) {
        this.users.push(user);
    }
}

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

برای استفاده از این سرویس در یک کامپوننت، باید آن را در constructor کامپوننت تزریق (inject) کنید:

import {Component, OnInit} from '@angular/core';
import {UserService} from './user.service';

@Component({
    selector: 'app-user',
    template: `
    <div>
      <ul>
        <li *ngFor="let user of users">{{ user }}</li>
      </ul>
      <input [(ngModel)]="newUser" placeholder="Add user" />
      <button (click)="addUser()">Add</button>
    </div>
  `,
})
export class UserComponent implements OnInit {
    users: string[] = [];
    newUser: string = '';

    constructor(private userService: UserService) {
    }

    ngOnInit() {
        this.users = this.userService.getUsers();
    }

    addUser() {
        this.userService.addUser(this.newUser);
        this.newUser = '';
    }
}

توضیح:

1. ایجاد سرویس: یک کلاس با نام UserService ایجاد می‌شود و از دکوریتور @Injectable استفاده می‌کند تا انگولار بفهمد این کلاس قابل تزریق است.
2. متدهای سرویس: این سرویس دو متد getUsers و addUser دارد که به ترتیب کاربران را بازیابی و اضافه می‌کنند.
3. تزریق سرویس در کامپوننت: در کلاس UserComponent سرویس UserService در constructor تزریق می‌شود.
4. استفاده از سرویس: در متد ngOnInit، متد getUsers سرویس فراخوانی می‌شود تا لیست کاربران دریافت شود. همچنین، متد addUser برای افزودن کاربر جدید به لیست استفاده می‌شود.

pipe

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

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

پایپ‌ها در Angular به طور گسترده‌ای برای فراهم کردن قابلیت‌های فرمت‌بندی و تغییر شکل داده‌ها استفاده می‌شوند و می‌توانند به آسانی سفارشی‌سازی شوند یا از پایپ‌های پیش‌فرض Angular استفاده شود.

مثال:

پایپ زیر با توجه به ژانر ورودی لیست کتاب هارا فیلتر می‌کند.

import {Pipe, PipeTransform} from '@angular/core';
import {Book} from './book.model';

@Pipe({
    name: 'genreFilter',
})
export class GenreFilterPipe implements PipeTransform {
    transform(books: Book[], genre: string): Book[] {
        if (!genre) {
            return books;
        }
        return books.filter(book => book.genre === genre);
    }
}

در این پایپ،‌ متد transform لیست کتاب ها و ژانر را به عنوان ورودی دریافت کرده و لیست فیلتر شده شامل کتاب هایی که تنها دارای ژانر ورودی هستند برمی‌گرداند.

Decorators

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

decorator ها در Angular یک نوع خاص از توابع هستند که به شما امکان می‌دهند تا به کلاس‌ها، متدها، ویژگی‌ها یا پارامترها متادیتا اضافه کنید و رفتار آنها را Override کنید. Decorator ها در TypeScript به طور گسترده‌ای برای تعریف ویژگی‌ها و رفتارهای اجزای مختلف Angular استفاده می‌شوند. این توابع توسط @ فراخوانی می‌شوند و ورودی‌های خود را دریافت می‌کنند و تغییرات لازم را بر روی هدف خود اعمال می‌کنند.

Angular Decorators

دیکوریتورهای اصلی Angular عبارتند از:

• NgModule@: برای تعریف ماژول‌های Angular استفاده می‌شود.
• Component@: برای تعریف کامپوننت‌ها استفاده می‌شود.
• Directive@: برای تعریف دستورالعمل‌ها استفاده می‌شود.
• Pipe@: برای تغییر دیتاها موقع نمایش به کاربر استفاده می‌شود.
• Injectable@: برای افزودن قابلیت تزریق سرویس ها به کامپوننت ها استفاده می‌شود.

هر کدام از این دیکوریتورها وظایف خاصی دارند و به شما کمک می‌کنند تا ویژگی‌های خاصی را به اجزای برنامه اضافه کنید.

• decorator های پر استفاده در انگولار

Angular Modules

انگولار یک فریم‌ورک ماژولار است. ماژولاریتی خاصیتی است که میزان جداپذیری اجزا درون یک سیستم را اندازه‌گیری می‌کند، به طوری که این اجزا می‌توانند به عنوان یک واحد مستقل عمل کنند و بدون وابستگی به یکدیگر کار کنند. در انگولار، ماژول یک واحد است که کامپوننت‌ها، پایپ‌ها، دایرکتیوها و سرویس‌ها را گروه‌بندی می‌کند. یک برنامه انگولار می‌تواند شامل چندین ماژول باشد. در هر برنامه انگولار حداقل یک ماژول وجود دارد. NgModule پیش‌فرض AppModule است و در فایل app.module.ts قرار دارد. وقتی برنامه را اجرا می‌کنید، این ماژول اجرا می‌شود. شما همچنین می‌توانید عملکردها را از یک ماژول به ماژول دیگر import و export کنید.

• مطالعه درباره ماژول‌ها در انگولار
• نحوه استفاده از NgModule

Templates and Data Binding

Interpolation

در Angular، Interpolation به معنی نشان دادن داده‌های کامپوننت در قالب کامپوننت است. این کار با استفاده از {{ }} انجام می‌شود.

<h1>{{ title }}</h1>

در این مثال، title یک property از کامپوننت است که مقدار آن در قالب نمایش داده می‌شود. لازم به ذکر است هر تغییر در مقدار title به طور خودکار توسط Angular تشخیص داده شده و در نتیجه قالب به صورت خودکار بروز می‌شود. (البته این در صورتی است که در Change Detection تغییری انجام نشده باشد که در بخش‌های آینده از آن صحبت خواهیم کرد)

Property Binding

در Angular، می‌توانید Propertyهای کامپوننت را به عناصر قالب متصل کنید. این کار با استفاده از [ ] انجام می‌شود.

<img [src]="imageUrl">

در این مثال، imageUrl یک property از کامپوننت است که به ویژگی src عنصر <img> متصل می‌شود.

Event Binding

مفهوم Event

در جاوااسکریپت، مفهوم "رویداد" (Event) به هر اتفاق یا کنشی که در مرورگر رخ می‌دهد اطلاق می‌شود. این رویدادها می‌توانند توسط کاربر (مثل کلیک کردن، فشردن کلید، حرکت ماوس) یا توسط مرورگر (مثل بارگذاری صفحه، تغییر اندازه صفحه) رخ دهند.

در Angular، می‌توانید eventها را در template مدیریت کنید و به متدهارا به event ها متصل کنید. این کار با استفاده از ( ) انجام می‌شود.

<button (click)="handleClick()">Click me</button>

در این مثال، وقتی کاربر بر روی دکمه کلیک می‌کند، متد handleClick() کامپوننت فراخوانی می‌شود.

Two Way Binding

Two Way Binding به منظور اشتراک داده بین کامپوننت‌های انگولاری استفاده می‌شود، به صورتی که تغییر مقدار داده‌ها به صورت همزمان هم در کامپوننت پدر و هم فرزند انجام می‌شود.

• Demystifying Angular Two Way Binding

Control Flow

کنترل جریان (Control Flow) در Angular به رفتار برنامه‌های شما در پاسخ به شرایط مختلف اشاره دارد و شامل دستورات شرطی، حلقه‌ها و مدیریت نمایش کامپوننت‌ها می‌شود. برای آشنایی با این مفهوم می توانید به لینک های زیر مراجه کنید:

• Built-in control flow
• Introducing new Control Flow in Angular 17

angular routing

‌ابزار قدرتمند انگولار برای جابه‌جایی بین صفحات مختلف استفاده می‌شود.

• مستندات روتینگ انگولار

تثبیت دانش

برای تثبیت مطالبی که تا اینجا آموختید ، پیشنهاد می‌شود که پروژه Book Collection Manager را انجام دهد.

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

این پروژه به شما این امکان را می‌دهد تا تجربه عملی کسب کنید در:

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