آموزش ساخت کامپوننت‌های قابل استفاده مجدد در انگولار – راهنمای جامع - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

• پیش‌نیازهای دوره Prerequisites for the course

• تمرین آموخته‌ها Practicing what you learn

دایرکتیوهای سفارشی در انگولار Custom Directives in Angular

• مقدمه Introduction

• شروع کار با دایرکتیوها در انگولار Getting started with Directives in Angular

• ساخت اولین دایرکتیو سفارشی Creating our first custom directive

• دستکاری المان میزبان (Host Element) Manipulating the Host Element

• چرا دستکاری مستقیم Host Element روش اشتباهی است؟ Why Direct Host Element Manipulation is a Bad Practice

• استفاده از Renderer برای مدیریت میزبان Using the Renderer to manipulate the host

• اتصال میزبان با استفاده از ویژگی host Host binding using the "host" property

• اتصال میزبان به استایل‌ها و ویژگی‌های سفارشی Binding Host to Style and Custom Properties

• اتصال به کلاس‌ها و اتریبیوت‌های میزبان Binding to Host Classes and Attributes

• گوش دادن به رویدادهای میزبان Listening to Host Events

• ارسال آرگومان‌ها به رویدادهای میزبان Passing Arguments to Host Events

• ارسال Inputها به دایرکتیوها Passing Inputs to Directives

• مالکیت ورودی‌ها با کیست؟ Who owns the inputs?

• یکپارچه‌سازی سلکتور دایرکتیو و ورودی Unified Directive selector and input

• تمرین: کار با ورودی‌ها و Bindingها Exercise: Practice Inputs, and Bindings

• تعریف رویدادهای Output در دایرکتیوها Defining Output events in Directives

• ویژگی exportAs The "exportAs" property

• چالش: دایرکتیو ردیابی موس (Track Mouse) Challange - The "Track Mouse" Directive

• ترکیب دایرکتیوها (Directive Composition) Directive Composition

• چالش: دایرکتیو MyLink Challange - The "MyLink" Directive

کار با سلکتورها Fun with Selectors

• مقدمه Introduction

• درک سلکتورها Understanding selectors

• چالش: بزرگ کردن حروف اول ورودی هنگام Blur Challange - Capitalize Text Input Value on Blur

• چالش: تولتیپ برای ویژگی alt تصاویر Challange - Image "alt" Tooltip

• مثال کاربردی: کامپوننت‌های دکمه Crazy example - Button Components

پروژکشن محتوا (Content Projection) Content Projection

• مقدمه Introduction

• شروع: ساخت کامپوننت Expander Starting up - Let's create an Expander Component

• پیاده‌سازی اولیه و ساده Initial "Naive" Implementation

• انیمیشن دادن به Expander Animating the Expander

• استفاده از ng-content برای پذیرش محتوای غنی Using <ng-content> to allow rich content

• پروژکشن محتوا: مالکیت محتوا با کیست؟ Content Projection - Who owns the content?

• پروژکشن محتوای چندگانه با استفاده از اتریبیوت select Multi - Slot content projection using the "select" attribute

• انتخاب محتوا با استفاده از اتریبیوت‌ها Content Selection using attributes

• پروژکت کردن دکمه Toggle Projecting the Toggle Button Too

• افزودن قابلیت‌ها با استفاده از دایرکتیوها Adding Functionality using Directives

• بسته‌بندی کامپوننت‌ها و دایرکتیوهای مرتبط Packing Related Components and Directives

• تزریق وابستگی اختیاری (Optional DI) Optional Dependency Injection

• انیمیشن دادن به Toggle سفارشی Animating The custom toggle

• پروژکشن محتوا وابسته به وضعیت (State) State Dependent Content Projection

• استفاده از contentChild برای جایگزینی دکمه پیش‌فرض Using 'contentChild' to Fallback to a Default Toggle Button

• درک کوئری‌های محتوا (Content Queries) Understanding Content Queries

• الگوی کامپوننت ترکیبی (Composite Component) The "Composite Component" Pattern

استایل‌دهی و View Encapsulation Styling and View Encapsulation

• مقدمه Introduction

• مفهوم View Encapsulation در انگولار View Encapsulation in Angular

• درک عمیق مفهوم کپسوله‌سازی View Understanding the "View Encapsulation" Concept

• نحوه شبیه‌سازی کپسوله‌سازی توسط انگولار How Angular Emulates View Encapsulation

• بررسی CSS تولید شده Inspecting The Generated CSS

• کپسوله‌سازی در پروژکشن محتوا Encapsulation in Content Projection

• سلکتور host: The :host selector

• سلکتور host context: The :host-context selector

• استایل‌دهی با ویژگی‌های CSS سفارشی (Design Tokens) Styling using custom CSS Properties (design tokens)

• بهترین روش‌ها: ویژگی‌های خصوصی Best Practice - Private properties

• بهترین روش‌ها: استفاده از رنگ‌های محاسباتی به عنوان مقدار جایگزین Best Practice - Using Computed Colors as Fallback Values

• سلکتور ng-deep The ng-deep selector

• چه زمانی (و آیا اصلاً) باید از ng-deep استفاده کنیم؟ When (and if) should we use ng-deep?

کانتینرها و قالب‌های انگولار Angular Containers and Templates

• مقدمه Introduction

• درک ng-container Understanding ng-container

• اولین نگاه به ng-template و *ngTemplateOutlet First Look at ng-template and *ngTemplateOutlet

• ارسال Context داده‌ها به قالب‌ها Passing Data Context to Templates

• پارامتر ویژه $implicit The $implicit special parameter

• ارسال قالب‌ها به عنوان ورودی به کامپوننت‌ها Passing templates as inputs to components

• استفاده از دایرکتیوها روی قالب‌ها Using Directives on Templates

تمرین قالب‌ها: کامپوننت انتخاب‌گر آیتم Practicing Templates - The Item Selector Component

• مقدمه Introduction

• درباره اپلیکیشن ما About Our Application

• ساخت کامپوننت Item Selector Creating the "Item Selector" Component

• پذیرش قالب آیتم به عنوان ورودی Accepting Item Template as Input

• ارسال قالب به عنوان محتوا Passing the Template as Content

• بسته‌بندی قالب در یک دایرکتیو Wrapping the Template in a Directive

• هدف‌گذاری دایرکتیو با contentChild Targeting the Directive with `contentChild`

• سینتکس دایرکتیو ستاره‌ای (*) The "Star Directive" Syntax

• کانتکست قالب با اطلاعات تایپ (Type Information) Template Context with Type Information

• افزودن قالب ItemContainer Adding an ItemContainer Template

• پیاده‌سازی منطق Item Container Implementing the Item Container Logic

درک میکروسینتکس (Micro Syntax) Understanding the Micro Syntax

• مقدمه Introduction

• درک میکروسینتکس Understanding Microsyntax

• پر کردن ورودی‌ها در میکروسینتکس Populating Inputs in Microsyntax

• اعتبارسنجی مقادیر ورودی Verifying the Input Values

• تمرین: دایرکتیو myTimer Try it - The "myTimer" Directive

• تعریف متغیرهای قالب در میکروسینتکس Defining Template Variables in Microsyntax

• تایپ گاردها در کانتکست (Context Type Guards) Context Type Guards

• استفاده از سیگنال‌ها در کانتکست قالب Using Signals in Template Context

• تعریف نام‌های مستعار (Aliases) برای ورودی‌ها در میکروسینتکس Defining Input Aliases in Microsyntax

• نگاهی دوباره به *ngIf و *ngFor قدیمی A new Look at Legacy *ngIf and *ngFor

• دایرکتیوهای جنریک (Generic Directives) Generic Directives

دایرکتیوهای ساختاری سفارشی و مدیریت View Custom Structural Directives and View Manipulation

• مقدمه Introduction

• یک View در انگولار چیست؟ What is a "View" in Angular?

• Viewها چگونه ایجاد می‌شوند؟ How are Views Created?

• مقایسه Embedded Views و Host Views Embedded Views vs Host Views

• معرفی سرویس ViewContainerRef Introducing the "ViewContainerRef" service

• ایجاد Embedded View پویا از روی قالب Creating Dynamic Embedded view from Template

• پیاده‌سازی منطق myIf Implementing the Logic of myIf

• محدود کردن تایپ کانتکست Narrowing the Context Type

• کدنویسی: ساخت دایرکتیو Timer Code Along - Creating "Timer" directive

• پیاده‌سازی منطق تایمر Implementing the Timer Logic

• کدنویسی: ساخت دایرکتیو ساختاری Repeat Code Along - Creating "Repeat" structural directive

• پیاده‌سازی منطق و کانتکست myRepeat Implementing the "myRepeat" Context and Logic

• تزریق‌کننده‌های (Injectors) سفارشی در Embedded Views Custom Injectors in Embedded Views

ساخت پویا کامپوننت‌ها Dynamic Component Creation

• مقدمه Introduction

• مقدمه و کدهای شروع Introduction & Starter Code

• معرفی NgComponentOutlet Introducing the "NgComponentOutlet"

• ارسال ورودی‌ها به کامپوننت‌های پویا Passing Inputs to Dynamic Components

• ارائه Injector سفارشی به کامپوننت‌های پویا Providing a Custom Injector to Dynamic Components

• اینترفیس و توکن ViewPicker The ViewPicker Interface and Token

• اشاره به مکان خاصی در UI با استفاده از VCR Pointing to a Specific Location in the UI with VCR

• ساخت Picker با VCR.createComponent Creating the Picker with VCR.createComponent

• APIهای Bindings برای ساخت برنامه‌نویسی‌شده کامپوننت‌ها The Bindings API for Programmatic Component Creation

جمع‌بندی Summary

• جمع‌بندی Summary

• سخنان پایانی Final Words

• درس جایزه (Bonus) Bonus Lecture