ساخت کامپوننت‌های قابل‌ استفاده‌ مجدد در Angular - راهنمایی که جای آن خالی بود

آنچه یاد خواهید گرفت:

• ساخت کامپوننت‌های Angular بسیار قابل‌ استفاده‌م جدد و قابل‌ سفارشی‌ با استفاده از APIs مدرن Angular
• اعمال الگوهای Content Projection برای ایجاد معماری‌های کامپوننتی انعطاف‌پذیر و composable
• استفاده از ng-template و TemplateRef و ViewContainerRef برای کامپوزیشن پویاى رابط کاربری
• تسلط به دایرکتیوهای عنصر (attribute) برای گسترش و بهبود عناصر موجود DOM
• درک microsyntax در Angular (* syntax) و نحوه طراحی APIs شهودی برای دایرکتیو ساختاری
• استفاده از ng-template و TemplateRef و ViewContainerRef برای ترکیب پویاى رابط کاربری
• پیاده‌سازی دایرکتیو ساختاری برای گسترش رفتار کامپوننت به شکلی مقیاس‌پذیر
• ساخت کامپوننت‌های قابل‌ تم‌سازی با استفاده از طراحی توکن‌ها و بهترین شیوه‌های استایل‌دهی در Angular
• درک view encapsulation و اینکه Angular چگونه استایل‌ها را به‌ صورت داخلی رندر و محدوده‌بندی می‌کند.

پیش‌نیازهای دوره

• تجربه پایه با Angular (کامپوننت‌ها، قالب‌ها، تزریق وابستگی
  و اتصال داده)
• آشنایی با Angular مدرن (کامپوننت‌ها و سیگنال‌های مستقل)
• درک پایه از HTML و CSS

توضیحات دوره

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

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

• دایرکتیوهای عنصر
• دایرکتیو ساختاری
• content projection
• قالب‌ها
• کامپوزیشن view پویا
• و مهم‌تر از همه، اینکه اینها چگونه در کنار هم به الگوهای قدرتمند و کاربردی در دنیای واقعی تبدیل می‌شوند.

هسته اصلی دوره یک الگوی قدرتمند است: کامپوننت‌های Composable

به‌ جای ساخت کامپوننت‌هایی که تلاش می‌کنند همه‌ چیز را با ورودی ها و رابط های بی‌پایان انجام دهند، یاد می‌گیرید چگونه یک کامپوننت «هسته‌» سبک طراحی کنید که بتوان آن را با اجزای بیرونی گسترش داد و سفارشی کرد: قالب‌ها، دایرکتیوها و محتوای project شده

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

به‌ جای ساخت کامپوننت‌هایی که خشک و محدود هستند، با ورودی‌های بیش از حد بارگذاری شده‌اند یا پر از پرچم هستند، یاد می‌گیرید کامپوننت‌هایی طراحی کنید که واقعاً انعطاف‌پذیر، composable و مقیاس‌پذیر باشند؛ همان نوعی که در کتابخانه‌های کامپوننت و سیستم‌های طراحی واقعی استفاده می‌شوند.

کار را با دایرکتیوهای عنصر (attribute) شروع می‌کنید و یاد می‌گیرید چگونه عناصر موجود DOM را گسترش دهید و بهبود ببخشید. سپس به سراغ استراتژی‌های سلکتور و الگوهای سلکتور پیشرفته می‌رویم تا کنترل دقیقی بر نحوه اعمال دایرکتیوها و کامپوننت‌ها داشته باشید.

در مرحله بعد، وارد content projection می‌شویم؛ جایی که یاد می‌گیرید چگونه کامپوننت‌هایی طراحی کنید که اجزای بیرونی را بپذیرند و آنها را در طرح‌بندی‌های انعطاف‌پذیر کامپوز کنند. سپس به استایل‌دهی و view encapsulation می‌پردازیم و بررسی می‌کنیم Angular چگونه استایل‌ها را محدوده‌بندی می‌کند و چگونه می‌توان کامپوننت‌هایی ساخت که قابل‌ تم‌سازی و سفارشی‌سازی باشند.

بعد از آن، عمیق‌تر وارد قالب‌ها با ng-template و TemplateRef و ngTemplateOutlet می‌شویم و سپس Angular microsyntax را بررسی می‌کنیم تا بفهمید syntax* چگونه کار می‌کند و چگونه می‌توان APIs تمیز و شهودی برای دایرکتیوها طراحی کرد.

در ادامه، همه‌ موارد را با دایرکتیوهای ساختاری و دستکاری view با استفاده از ViewContainerRef کنار هم قرار می‌دهیم تا کنترل کامل بر نحوه ایجاد، بروزرسانی و مدیریت views در ران تایم داشته باشید. در نهایت، کامپوننت‌های پویا را پوشش می‌دهیم تا تصویر کاملِ کامپوزیشن رابط کاربری به‌ صورت کاملاً انعطاف‌پذیر و برنامه‌پذیر تکمیل شود.

در طول دوره، همه مفاهیم در قالب الگوهای شفاف و قابل‌ استفاده‌ای به هم متصل می‌شوند که می‌توانید بلافاصله در پروژه‌های خود به کار ببرید.

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

این دوره برای چه کسانی مناسب است؟

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