آموزش مبانی و مفاهیم اصلی انگولار (Angular) - آخرین آپدیت

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

مقدمه Introduction

• مقدمه‌ای بر تخصص Introduction to the Specialization

• رابط خط فرمان انگولار (Angular CLI) Angular CLI

• درک ساختار پروژه Understanding Project Structure

• معرفی انگولار ۱۷ (NG17) NG17-Introduction to Angular 17

• شروع کار با انگولار ۱۷ Getting started with Angular 17

• مهاجرت به انگولار ۱۷ Migrating to Angular 17

مبانی انگولار Angular Fundamentals

• اولین کامپوننت با معماری First Component With Architecture

• نمایش پویا پیام‌ها Displaying Message Dynamically

• تمرین (نمایش مجموع دو مقدار) Assignment (Display sum of two values)

• درک مفهوم @NgModule Understanding the @NgModule

• بوت‌استرپینگ و استفاده از Standalone در NG17 NG17-Bootstrapping & Utilizing Standalone

• اتصال ویژگی‌ها (Property Binding) Property Binding

• تمرین (Property binding با تگ تصویر) Assignment (Property binding with image tag)

• اتصال رویدادها (Event Binding) با رویداد کلیک Event Binding with Click Event

• اتصال سایر رویدادهای مربوط به ماوس Binding Other Mouse Related Events

• اتصال رویدادهای کیبورد Binding Keyboard Events

• شیء $event $event object

• تمرین (بررسی وضعیت کلید Shift) Assignment (Checking shift key status)

• اتصال دوطرفه (ngModel) Two Way Binding (ngModel)

• تمرین (اتصال دوطرفه) دریافت مقدار فیلد ورودی هنگام کلیک دکمه Assignment (Two-way Binding) - Get input field value on button click

• تمرین (ساخت مثال شمارنده) Assignment (Creating counter example)

دایرکتیوهای انگولار Angular Directives

• مقدمه‌ای بر دایرکتیوها Directives Introduction

• دایرکتیوهای ساختاری (ngIf) Structural Directives (ngIf)

• تمرین پیاده‌سازی قابلیت نمایش و مخفی‌سازی با ngIf Assignment - Implementing show & hide functionality with ngIf

• عبارات کنترل جریان در NG17 (if@ و else@) NG17-Control Flow Statements (@if & @else)

• دایرکتیوهای ساختاری (ngFor) Structural Directives (ngFor)

• تمرین نمایش آیتم‌های لیست هنگام کلیک دکمه با ngIf و ngFor Assignment - Displaying list items on button click using ngIf and ngFor

• عبارات کنترل جریان NG17 حلقه for@ NG17-Control Flow Statements @for loop

• دایرکتیوهای ساختاری (ngSwitch) Structural Directives (ngSwitch)

• تمرین پیاده‌سازی قابلیت اعتبارسنجی سن با ngSwitch Assignment - Implementing age validation functionality using ngSwitch

• دایرکتیوهای ویژگی [ngClass] Attribute Directives [ngClass]

• عبارات کنترل جریان NG17 (switch@) NG17-Control Flow Statements (@switch)

• تمرین ngClass Assignment - ngClass

• دایرکتیوهای ویژگی [ngStyle] Attribute Directives - [ngStyle]

• تمرین تغییر رنگ فیلد ورودی با استفاده از [ngStyle] Assignment - Changing the color of input field using [ngStyle]

• گروه‌بندی المان‌ها با ng container Grouping elements with ng-container

• تمپلیت‌های HTML با ng template HTML templates with ng-template

• مقایسه ng template در مقابل ng container ng-template vs ng-container

• تمرین نمایش پیام در صورت خالی بودن فیلد ورودی Assignment - Displaying message if the input field remains empty

• رندر کردن تمپلیت‌ها با ngTemplateOutlet بخش اول Rendering templates with ngTemplateOutlet - Part 1

• رندر کردن تمپلیت‌ها با ngTemplateOutlet بخش دوم Rendering templates with ngTemplateOutlet - Part 2

• تمرین سازنده پورتفولیو (فاز ۱) HTML Assignment - Portfolio Builder (Phase 1) - HTML

• تمرین سازنده پورتفولیو (فاز ۲) CSS Assignment - Portfolio Builder (Phase 2) - CSS

• تمرین سازنده پورتفولیو (فاز ۳) Binding Assignment - Portfolio Builder (Phase 3) - Binding

چرخه حیات کامپوننت و Lifecycle Hooks Component Life Cycle - Lifecycle Hooks

• مقدمه Introduction

• هوک ایجاد کامپوننت ngOnChanges() Component Creation Hook - ngOnChanges()

• درک شیء SimpleChanges Understanding SimpleChanges Object

• هوک ایجاد کامپوننت ngOnInit() Component Creation Hook - ngOnInit()

• تشخیص تغییرات سفارشی با هوک ngDoCheck() Detecting Custom Changes With ngDoCheck() Hook

• درک هوک ngAfterContentInit() Understanding the ngAfterContentInit() Hook

• بررسی محتوا با هوک ngAfterContentChecked() Checking The Content With ngAfterContentChecked() Hook

• بارگذاری محتوا با هوک ngAfterViewInit() Loading Content With ngAfterViewInit() Hook

• بررسی نمای کامپوننت با هوک ngAfterViewChecked() Checking The Component View With ng AfterView Checked() Hook

• تخریب کامپوننت با هوک ngDestroy() Destroying Component With ngDestroy() Hook

دکوراتورها Decorators

• مقدمه‌ای بر دکوراتورها Introduction To Decorators

• دکوراتورهای کلاس @NgModule Class Decorators - @NgModule

• دکوراتورهای کلاس @Component Class Decorators - @Component

• دکوراتورهای ویژگی @Input Property Decorators - @Input

• تمرین دکوراتور @Input Assignment @Input Decorator

• دکوراتورهای ویژگی @Output Property Decorators - @Output

• تمرین پیاده‌سازی اشتراک‌گذاری داده‌ها بین والد و فرزند با @Input و @Output Assignment - Implementing Parent-Child Data Sharing using @Input & @Output

• دکوراتورهای ویژگی دسترسی به کامپوننت‌های فرزند با @ViewChild Property Decorators - Accessing Child Components With @ViewChild

• دکوراتورهای ویژگی دسترسی به محتوای Projected با @ContentChild Property Decorators - Accessing The Projected Content With @ContentChild

• دکوراتورهای ویژگی اتصال ویژگی‌ها با @HostBinding Property Decorators - Binding Properties With @HostBinding

• دکوراتورهای متد اتصال رویدادها با @HostListener Method Decorators - Binding Events With @HostListener

• تمرین پیاده‌سازی انتخاب‌گر رنگ (Color Picker) Assignment - Implementing Color Picker

• دکوراتورهای پارامتر Parameter Decorators

پایپ‌های انگولار Angular Pipes

• پایپ‌ها مقدمه Pipes - Introduction

• تمرین پیاده‌سازی پایپ‌های داخلی Assignment - Implementing the Built-In Pipes

• درک پایپ Slice Understanding Slice Pipe

• تمرین ناوبری صفحات با استفاده از Slice Pipe بخش اول Assignment - Page Navigation using Slice Pipe (Part 1)

• تمرین ناوبری صفحات با استفاده از Slice Pipe بخش دوم Assignment - Page Navigation using Slice Pipe (Part 2)

• درک پایپ Number Understanding Number Pipe

• تمرین تبدیل پوند به کیلوگرم با استفاده از Number Pipe Assignment - Pound(lbs) to Kg Converter Using Number Pipe

• درک پایپ JSON Understanding JSON Pipe

• تمرین نمایش داده‌های جدول به صورت رشته JSON Assignment - Displaying Table Data To JSON String

پایپ‌های سفارشی Custom Pipes

• ساخت پایپ‌های سفارشی Creating Custom Pipes

• تمرین پایپ سفارشی برای مرتب‌سازی اعداد Assignment - Custom Pipe for Sorting Numbers

• تمرین ساخت پایپ سفارشی برای شمارش حروف Assignment - Creating Custom Pipe For Letter Count

• پایپ Pure در مقابل Impure Pure Vs. Impure Pipe

• استفاده از پایپ‌های Impure Using Impure Pipes

مسیریابی در انگولار (Routing) Angular Routing

• مسیریابی (Routing) مقدمه Routing - Introduction

• درک ساختار ماژول Router Understanding Router Module Structure

• ایجاد یک مسیر ساده - Creating a Simple Route

• ایجاد لینک ناوبری با دایرکتیو routerLink Creating a Navigation Link with "routerLink" Directive

• تمرین ساخت نوار ناوبری (Navbar) با استفاده از مسیرها Assignment - Creating a Navbar Using Routes

• ارسال پارامترهای مسیر (مسیریابی پویا) Passing Route Parameters (Dynamic Routing)

• مسیرهای Wildcard نمایش صفحه ۴۰۴ Wildcard Routes - Displaying the 404 Page

• درک مسیرهای تو در تو (Nested Routes) Understanding Nested Routes

• تمرین ایجاد منوی چند سطحی Assignment - Creating a Multi-Level Menu

• تغییر مسیرها (Redirecting) Redirecting Routes

• درک forRoot و forChild در مسیریابی Understanding forRoot and forChild in Routing

• درک ActivatedRoute Understanding ActivatedRoute

• پارامترهای Query در مسیریابی Query Parameters In Routing

• تمرین نمایش جزئیات دوره و دریافت Query Parameters Assignment - Displaying Course Details and Fetching the Query Parameters

سرویس‌های انگولار Angular Services

• مقدمه‌ای بر سرویس‌ها Introduction to Services

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

• ارائه سرویس‌ها (Providing Services) Providing Services

توکن‌های انگولار Angular Tokens

• تزریق توکن‌ها Injecting Tokens

• تزریق توکن‌های رشته‌ای Injecting String Tokens

• شیء Injection Token Injection Token Object

• ارائه مقدار با useValue Providing Value With "useValue"

• تمرین ارائه یک مقدار ثابت به عنوان وابستگی Assignment - Provide A Constant Value As Dependency

• ارائه‌دهنده Alias ویژگی useExisting Alias Provider - useExisting Property

• ارائه‌دهنده Factory ویژگی useFactory Factory Provider - useFactory Property

• ارائه وابستگی‌ها با استفاده از ویژگی deps در useFactory Providing Dependencies Using "deps" Property With useFactory

• مقایسه useFactory در مقابل useValue useFactory Vs. useValue

فرم‌های Template Driven در انگولار Angular Template Driven Forms

• مقدمه‌ای بر فرم‌های انگولار Introduction to Angular Forms

• درک دایرکتیو ngForm Understanding ngForm Directive

• تمرین ایجاد یک فرم ساده برای ارسال و بازنشانی (Submit and Reset) Assignment - Creating A Simple Submit And Reset Form

• فرم‌های Template Driven Template-Driven Form

فرم‌های Reactive در انگولار Angular Reactive Forms

• درک FormControl Understanding FormControl

• درک FormGroup Understanding FormGroup

• فرم‌های پویا با FormArray Dynamic Forms With FormArray

• درک FormBuilder Understanding FormBuilder

• اعتبارسنجی کنترل‌های فرم Validating Form Controls

• ساخت فرم Reactive چند مرحله‌ای با Bootstrap بخش اول Creating Multi Step Reactive Form With Bootstrap (Part 1)

• ساخت فرم Reactive چند مرحله‌ای با Bootstrap بخش دوم Creating Multi Step Reactive Form With Bootstrap (Part 2)

• ساخت فرم Reactive چند مرحله‌ای با Bootstrap بخش سوم Creating Multi Step Reactive Form With Bootstrap (Part 3)

• ردیابی وضعیت‌های کنترل فرم (ویژگی‌های Dirty و Pristine) Tracking Form Control States (Dirty and Pristine Properties)

• اعتبارسنجی‌های متعدد برای فیلد رمز عبور Multiple Validations On Password Field

اعتبارسنج‌های سفارشی فرم Custom Form Validators

• ساخت اعتبارسنج‌های سفارشی Creating Custom Validators

• اعتبارسنج سفارشی برای URL Custom URL Validator