آموزش جامع انگولار 19: از مبتدی تا حرفه‌ای + سوالات مصاحبه + فروشگاه اینترنتی - آخرین آپدیت

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

مقدمه Introduction

• مقدمه ای بر Angular v18 (مقدمه دوره) Introduction to Angular v18 (Course Introduction)

• Angular CLI نسخه 19 Angular CLI Version 19

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

• ویژگی های Angular 19 Features of Angular 19

مبانی Angular Angular Fundamentals

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

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

• نمایش پویا پیام (Interpolation) Displaying message dynamically (Interpolation)

• IQ - Interpolation IQ - Interpolation

• وظیفه - نمایش حاصل جمع دو مقدار Task - Display sum of two values

• اتصال خصوصیات (Property binding) Property binding

• IQ - اتصال خصوصیات (Property Binding) IQ - Property Binding

• وظیفه - اتصال خصوصیات با تگ تصویر Task - Property binding with image tag

• اتصال رویداد با رویداد کلیک (Event binding) Event binding with click event

• IQ - اتصال رویداد (Event Binding) IQ - Event Binding

• وظیفه - ایجاد مثال شمارنده Task - Creating Counter Example

• اتصال رویدادهای مرتبط دیگر با ماوس Binding other mouse related events

• اتصال رویدادهای صفحه کلید Binding keyboard events

• شیء $event $event object

• IQ - شیء $event IQ - $event object

• وظیفه - بررسی وضعیت کلید Shift Task - Checking Shift key status

• وظیفه - Keydown برای افزایش/کاهش شمارنده Task - Keydown to increment/decrement counter

• اتصال دوطرفه (ngModel) Two way binding (ngModel)

• IQ - اتصال دوطرفه (ngModel) IQ - Two way binding (ngModel)

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

• وظیفه - محاسبه ساده سبد خرید - اتصال دوطرفه Task - Simple Cart Calculation - Two way binding

دستورالعمل های Angular (Directives) Angular Directives

• مقدمه دستورالعمل ها Directives Introduction

• دستورالعمل های ساختاری (*ngIf) Structural Directives (*ngIf)

• IQ - دستورالعمل *ngIf IQ - *ngIf directive

• وظیفه - پیاده سازی قابلیت نمایش و پنهان کردن با *ngIf Task - Implementing show & hide functionality with *ngIf

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

• دستورالعمل های ساختاری (*ngFor) Structural Directives (*ngFor)

• IQ - دستورالعمل *ngFor IQ - *ngFor Directive

• دستورات جریان کنترل حلقه @for Control Flow Statements @for loop

• دستورالعمل های ساختاری (*ngSwitch) Structural Directives (*ngSwitch)

• IQ - دستورالعمل *ngSwitch IQ - *ngSwitch directive

• دستورات جریان کنترل (@switch) Control Flow Statements (@switch)

• وظیفه پیاده سازی قابلیت اعتبارسنجی سن Task Implementing age validation functionality

• دستورالعمل های صفتی [ngClass] Attribute Directives [ngClass]

• وظیفه - قابلیت جابجایی با استفاده از ngClass Task - Toggle functionality using ngClass

• دستورالعمل های صفتی [ngStyle] Attribute Directives [ngStyle]

• وظیفه [ngStyle] - تغییر رنگ فیلد ورودی Task [ngStyle] - Changing the color of input field

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

• قالب های HTML با ng-template HTML templates with ng-template

• IQ - مقایسه ng-template با ng-container IQ - ng-template Vs. ng-container

• وظیفه - نمایش پیام در صورت خالی ماندن ورودی (ng-container & ng-template) Task - Display msg if input remains empty (ng-container & ng-template)

• نمایش قالب ها با ngTemplateOutlet - قسمت 1 Rendering templates with ngTemplateOutlet - Part 1

• نمایش قالب ها با ngTemplateOutlet - قسمت 2 Rendering templates with ngTemplateOutlet - Part 2

• IQ - دستورالعمل ngTemplateOutlet IQ - ngTemplateOutlet Directive

• وظیفه - سازنده پورتفولیو (فاز 1) - تعریف قالب Task - Portfolio Builder (Phase 1) - Defining Template

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

• وظیفه - سازنده پورتفولیو (فاز 3) - اتصال Task - Portfolio Builder (Phase 3) - Binding

چرخه حیات کامپوننت Component Lifecycle

• مقدمه Introduction

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

• IQ - ngOnChanges() IQ - ngOnChanges()

• درک شیء SimpleChanges Understanding SimpleChanges Object

• IQ - شیء SimpleChanges IQ - SimpleChanges Object

• قلاب ایجاد کامپوننت - ngOnInIt() Component Creation Hook - ngOnInIt()

• IQ - ngOnInit() IQ - ngOnInit()

• تشخیص تغییرات سفارشی با قلاب ngDoCheck() Detecting Custom Changes With ngDoCheck() hook

• IQ - ngDoCheck() IQ - ngDoCheck()

• درک قلاب ngAfterContentInit() Understanding the ngAfterContentInit() hook

• IQ - ngAfterContentInit() IQ - ngAfterContentInit()

• بررسی محتوا با قلاب ngAfterContentChecked() Checking The Content With ngAfterContentChecked() hook

• بارگذاری محتوا با قلاب ngAfterViewInit() Loading Content With ngAfterViewInit() hook

• IQ - ngAfterViewInit() IQ - ngAfterViewInit()

• بررسی نمای کامپوننت با قلاب ngAfterViewChecked() Checking The Component View With ngAfterViewChecked() hook

• حذف کامپوننت با قلاب ngDestroy() Destroying Component With ngDestroy() hook

تزئین کننده ها (Decorators) Decorators

• مقدمه ای بر تزئین کننده ها Introduction To Decorators

• تزئین کننده های کلاس @NgModule Class Decorators @NgModule

• تزئین کننده های کلاس - تزئین کننده @Component Class Decorators - @Component Decorator

• تزئین کننده های خصوصیت - تزئین کننده @Input() Property Decorators - @Input() decorator

• IQ - تزئین کننده @Input() IQ - @Input() decorator

• وظیفه - تزئین کننده @Input() Task - @Input() Decorator

• تزئین کننده های خصوصیت - تزئین کننده @Output Property Decorators - @Output decorator

• IQ - تزئین کننده @Output IQ - @Output decorator

• وظیفه - استفاده همزمان از @Input و @Output Task - Using @Input and @Output Together

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

• IQ - تزئین کننده @ViewChild IQ - @ViewChild decorator

• تزئین کننده های خصوصیت - دسترسی به محتوای نمایش داده شده با @ContentChild Property Decorators - Accessing The Projected Content With @ContentChild

• IQ - تزئین کننده @ContentChild() IQ - @ContentChild() Decorator

• تزئین کننده های خصوصیت - اتصال خصوصیات با @HostBinding Property Decorators - Binding Properties With @HostBinding

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

• وظیفه - پیاده سازی انتخابگر رنگ Task - Implementing Color Picker

• تزئین کننده های پارامتر Parameter Decorators

لوله های Angular (Pipes) Angular Pipes

• مقدمه لوله ها Pipes Introduction

• وظیفه - پیاده سازی لوله های داخلی Task - Implementing the built-in pipes

• درک لوله Slice Understanding Slice Pipe

• وظیفه - ناوبری صفحه با استفاده از لوله slice (قسمت 1) Task - Page navigation using slice pipe (Part-1)

• وظیفه - ناوبری صفحه با استفاده از لوله slice (قسمت 2) Task - Page navigation using slice pipe (Part-2)

• درک لوله Number Understanding Number pipe

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

• درک لوله JSON Understanding JSON Pipe

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

لوله های سفارشی Custom Pipes

• ایجاد لوله های سفارشی Creating Custom Pipes

• IQ - لوله های سفارشی IQ - Custom Pipes

• وظیفه - ایجاد لوله سفارشی برای مرتب سازی اعداد Task - Creating Custom Pipe For Sorting Numbers

• وظیفه - ایجاد لوله سفارشی برای شمارش حروف Task - Creating Custom Pipe For Letter Count

• لوله خالص در مقابل لوله ناخالص Pure Vs Impure Pipe

• استفاده از لوله های ناخالص Using Impure Pipes

مسیریابی Angular (Routing) Angular Routing

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

• ایجاد یک مسیر ساده - <router-outlet> Creating a simple route - <router-outlet>

• IQ - <router-outlet> IQ - <router-outlet>

• ایجاد لینک ناوبری با دستورالعمل “routerLink” Creating A Navigation Link With “routerLink” Directive

• IQ - دستورالعمل routerLink IQ - routerLink Directive

• ایجاد یک نوار ناوبری با استفاده از مسیرها Creating A NavBar Using Routes

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

• IQ - مسیریابی پویا IQ - Dynamic Routing

• مسیرهای wildcard - نمایش صفحه ‘404’ Wildcard Routes - Displaying The ‘404’ Page

• IQ - مسیرهای wildcard IQ - Wildcard Routes

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

• IQ - مسیرهای تودرتو IQ - Nested Routes

• وظیفه - ایجاد یک منوی چند سطحی Task - Creating a multi-level menu

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

• IQ - هدایت مسیرها (Redirecting Routes) IQ - Redirecting Routes

• درک ActivatedRoute Understanding ActivatedRoute

• IQ - ActivatedRoute IQ - ActivatedRoute

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

• IQ - پارامترهای پرس و جو در مسیریابی IQ - Query Parameters In Routing

• هدایت مسیرها Navigating Routes

• IQ - متد navigate() IQ - navigate() method

• وظیفه - نمایش جزئیات دوره و دریافت پارامترهای پرس و جو Task - Displaying Course Details And Fetching The Query Parameters

سرویس های Angular Angular Services

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

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

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

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

• ارائه سرویس ها Providing Services

• IQ - ارائه سرویس ها IQ - Providing Services

• تزریق سرویس ها با استفاده از inject() Injecting services using inject()

• IQ - تابع inject() IQ - inject() function

توکن های Angular Angular Tokens

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

• IQ - تزریق توکن ها IQ - Injecting tokens

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

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

• شیء توکن تزریق Injection Token Object

• IQ - شیء توکن تزریق IQ - Injection Token Object

• IQ - InjectionToken به عنوان مقدار IQ - InjectionToken as Value

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

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

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

• ارائه دهنده نام مستعار - خصوصیت useExisting Alias Provider - useExisting Property

• IQ - خصوصیت useExisting IQ - useExisting Property

• ارائه دهنده کارخانه - خصوصیت useFactory Factory Provider - useFactory Property

• IQ - خصوصیت useFactory IQ - useFactory Property

• ارائه وابستگی ها با استفاده از خصوصیت “deps” با useFactory Providing dependencies using “deps” property with useFactory

• IQ - ارائه وابستگی ها با استفاده از خصوصیت “deps” با useFactory IQ - Providing dependencies using “deps” property with useFactory

• مقایسه useFactory با useValue useFactory Vs useValue

فرم های مبتنی بر قالب Angular Angular Template Driven Forms

• مقدمه ای بر فرم های Angular Introduction To Angular Forms

• شروع با فرم های مبتنی بر قالب: دستورالعمل ngForm Getting Started with Template-Driven Forms: ngForm directive

• IQ - دستورالعمل ngForm IQ - ngForm directive

• وظیفه - ایجاد یک فرم ساده ارسال و بازنشانی Task - Creating A Simple Submit And Reset Form

• فرم مبتنی بر قالب Template Driven Form

• IQ - فرم مبتنی بر قالب IQ - Template Driven Form

فرم های واکنشی Angular Angular Reactive Forms

• درک ReactiveFormsModule Understanding ReactiveFormsModule

• IQ - ReactiveFormsModule IQ - ReactiveFormsModule

• درک FormControl Understanding FormControl

• IQ - FormControl IQ - FormControl

• درک FormGroup Understanding FormGroup

• IQ - درک FormGroup IQ - Understanding FormGroup

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

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

• درک FormBuilder Understanding FormBuilder

• IQ - FormBuilder IQ - FormBuilder

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

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

• وظیفه - ایجاد فرم واکنشی چند مرحله ای با بوت استرپ (قسمت 1) Task - Creating Multi Step Reactive Form With Bootstrap (Part 1)

• وظیفه - ایجاد فرم واکنشی چند مرحله ای با بوت استرپ (قسمت 2) Task - Creating Multi Step Reactive Form With Bootstrap (Part 2)

• وظیفه - ایجاد فرم واکنشی چند مرحله ای با بوت استرپ (قسمت 3) Task - Creating Multi Step Reactive Form With Bootstrap (Part 3)

• ردیابی وضعیت کنترل های فرم Tracking Form Control States

• IQ - ردیابی وضعیت کنترل های فرم IQ - Tracking Form Control States

• وظیفه - اعتبارسنجی چندگانه برای فیلد رمز عبور Task - Multiple Validations On Password Field

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

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

• IQ - ایجاد اعتبارسنج های سفارشی IQ - Creating Custom Validators

• وظیفه - اعتبارسنج URL سفارشی Task - Custom URL Validator

گارد های مسیر Route Guards

• امن کردن مسیرها با گارد های مسیر Securing Routes With Route Guards

• IQ - گارد های مسیر IQ - Route Guards

• گارد مسیر CanDeactivate CanDeactivate Route Guard

• IQ - گارد مسیر CanDeactivate IQ - CanDeactivate Route Guard

• گارد مسیر CanActivateChild CanActivateChild Route Guard

• IQ - گارد مسیر CanActivateChild IQ - CanActivateChild Route Guard

• وظیفه - احراز هویت ورود Task - Login Authentication

• گارد CanMatch CanMatch Guard

• IQ - گارد CanMatch IQ - CanMatch Guard

بارگذاری تنبل (Lazy Loading) Lazy Loading

• مقدمه ای بر بارگذاری تنبل Introduction To Lazy Loading

• بارگذاری تنبل کامپوننت ها Lazy Loading Of Components

• بارگذاری اولیه کامپوننت ها Preloading of Components

• IQ - بارگذاری اولیه کامپوننت ها IQ - Preloading of Components

• استراتژی بارگذاری اولیه (NoPreloading) Preloading Strategy (NoPreloading)

• IQ - استراتژی NoPreloading IQ - NoPreloading Strategy

• استراتژی بارگذاری اولیه (بارگذاری اولیه سفارشی) Preloading Strategy (Custom Preloading)

• IQ - استراتژی بارگذاری اولیه سفارشی IQ - Custom Preloading Strategy

• وظیفه - بارگذاری اولیه بر اساس نقش های کاربر Task - Preloading Based On User Roles

• IQ - مقایسه بارگذاری اولیه با بارگذاری تنبل IQ - Preloading Vs. Lazy Loading

• بارگذاری با تاخیر (Deferred Loading) Deferred Loading

• @defer با @placeholder @defer with @placeholder

• @defer با @loading @defer with @loading

• @defer با @error @defer with @error

• کار با تریگرها (on idle) Working with Triggers (on idle)

• کار با تریگرها (on viewport) Working with Triggers (on viewport)

• کار با تریگرها (on interaction) Working with Triggers (on interaction)

• کار با تریگرها (on hover) Working with Triggers (on hover)

• کار با تریگرها (on immediate) Working with Triggers (on immediate)

• کار با تریگرها (on timer) Working with Triggers (on timer)

• پیش بارگذاری بلوک های @defer Prefetching of @defer blocks

• تعریف تریگرهای سفارشی Defining Custom Triggers

مشاهده پذیرها و RxJS Observables & RxJS

• درک Observables & RxJS Understanding Observables & RxJS

• IQ - Observables & RxJS IQ - Observables & RxJS

• مدیریت Observables & Subscribers Managing Observables & Subscribers

• IQ - مدیریت Observables & Subscribers IQ - Managing Observables & Subscribers

• لغو اشتراک یک Observable Unsubscribing an Observable

• IQ - لغو اشتراک یک Observable IQ - Unsubscribing an Observable

• درک Async Pipe Understanding Async Pipe

• IQ - درک Async Pipe IQ - Understanding Async Pipe

• وظیفه - دریافت داده های JSON با Async Pipe Task - Fetching JSON Data With Async Pipe

• مقایسه Observable داغ با Observable سرد Hot Observable Vs Cold Observable

عملگرهای RxJS RxJS Operators

• عملگر RxJS { of } RxJS { of } Operator

• IQ - عملگر RxJS { of } IQ - RxJS { of } Operator

• عملگر RxJS { from } RxJS { from } Operator

• IQ - عملگر RxJS { from } IQ - RxJS { from } Operator

• عملگر RxJS { interval } RxJS { interval } Operator

• عملگر RxJS { timer } RxJS { timer } Operator

• وظیفه - پیاده سازی یک اسپینر بارگذاری Task - Implementing a loading spinner

• عملگر RxJS { EMPTY } RxJS { EMPTY } Operator

• IQ - عملگر RxJS { EMPTY } IQ - RxJS { EMPTY } Operator

• عملگرهای قابل لوله شدن RxJS RxJS Pipeable Operators

• IQ - عملگرهای قابل لوله شدن RxJS IQ - RxJS Pipeable Operators

• عملگر RxJS { filter } RxJS { filter } Operator

• عملگر RxJS { map } RxJS { map } Operator

• IQ - عملگر RxJS { map } IQ - RxJS { map } Operator

• عملگر RxJS { mergeMap } RxJS { mergeMap } Operator

• IQ - عملگر RxJS { mergeMap } IQ - RxJS { mergeMap } Operator

• وظیفه - نمایش محصولات مرتبط با کاربر Task - Displaying the Products Associated With User

• عملگر RxJS { concatMap } RxJS { concatMap } Operator

• IQ - عملگر concatMap() IQ - concatMap() operator

• عملگر RxJS { switchMap } RxJS { switchMap } Operator

• IQ - عملگر RxJS { switchMap } IQ - RxJS { switchMap } Operator

مدیریت فراخوانی های HTTP با Angular Handling HTTP Calls with Angular

• انجام فراخوانی های HTTP با HttpClient Making HTTP Calls With HttpClient

• انجام فراخوانی های HTTP با Observable Making HTTP Calls With Observable

• پیاده سازی درخواست HTTP POST Implementing HTTP POST Request

• تغییر داده ها با درخواست PUT Modifying Data With PUT Request

• حذف داده ها با درخواست DELETE Removing Data With DELETE Request

• وظیفه - اپلیکیشن CRUD - نمایش محصولات با درخواست GET (قسمت 1) Task - CRUD App - Displaying Products With GET Request (Part 1)

• وظیفه - اپلیکیشن CRUD - افزودن محصولات با درخواست POST (قسمت 2) Task - CRUD App - Adding Products With POST Request (Part 2)

• وظیفه - اپلیکیشن CRUD - دریافت داده های محصولات قبل از به روز رسانی (قسمت 3) Task - CRUD App - Fetching Products Data Before Updating (Part 3)

• وظیفه - اپلیکیشن CRUD - به روز رسانی محصولات با درخواست PUT (قسمت 4) Task - CRUD App - Updating Products With PUT Request (Part 4)

• وظیفه - اپلیکیشن CRUD - حذف محصولات با درخواست DELETE (قسمت 5) Task - CRUD App - Deleting Products With DELETE Request (Part 5)

سیگنال ها Signals

• مقدمه ای بر سیگنال ها Introduction to Signals

• ایجاد سیگنال Creating Signal

• IQ - ایجاد سیگنال IQ - Creating Signal

• به روز رسانی مقدار سیگنال Updating Signal Value

• IQ - متد update() IQ - update() method

• وظیفه - لیست انجام کارها Task - To-do List

• سیگنال های محاسبه شده Computed Signals

• IQ - سیگنال های محاسبه شده IQ - Computed Signals

• درک تابع effect() Understanding effect() function

• پاکسازی effect() Cleaning up the effect()

• جدا کردن سیگنال ها (Untracking Signals) Untracking Signals

• وظیفه - به روز رسانی سبد خرید با استفاده از سیگنال ها Task - Updating The Cart using Signals

• سیگنال های مرتبط (Linked Signals) Linked Signals

• تبدیل Observable به سیگنال Converting Observable To Signal

• وظیفه - فیلتر کردن محصولات بر اساس ورودی کاربر با linkedSignal() - قسمت 1 Task - Filtering Products Based on User Input with linkedSignal() - Pt1

• وظیفه - فیلتر کردن محصولات بر اساس ورودی کاربر با linkedSignal() - قسمت 2 Task - Filtering Products Based on User Input with linkedSignal() - Pt2

• وظیفه - فیلتر کردن محصولات بر اساس ورودی کاربر با linkedSignal() - قسمت 3 Task - Filtering Products Based on User Input with linkedSignal() - Pt3

استقرار اپلیکیشن Angular - CSR, SSR, SSG Angular App Deployment - CSR, SSR, SSG

• مقدمه - CSR, SSR & SSG Introduction - CSR, SSR & SSG

• درک فاز اولیه استقرار Understanding The Initial Deployment Phase

• بحث در مورد CSR و SPA ها Discussing the CSR and SPA’s

• استقرار SPA SPA Deployment

• از سمت کلاینت به سمت سرور - مهاجرت SSR From Client To Server-Side - SSR Migration

• سرو کردن اپلیکیشن SSR Serving the SSR App

• بهینه سازی کد برای رندر سمت سرور (SSR) Optimizing Code for Server-Side Rendering (SSR)

• درک تولید سایت استاتیک (SSG) Understanding Static Site Generation(SSG)

• پیاده سازی SSG Implementing SSG

• درک رندر هیبریدی Understanding Hybrid Rendering

تشخیص تغییرات Change Detection

• مقدمه ای بر تشخیص تغییرات Introduction to Change Detection

• خطاهای عبارت در حین تشخیص تغییرات Expression Errors while Detecting Changes

• بهینه سازی کد برای تشخیص تغییرات Optimizing Code for Change Detection

• IQ - بهینه سازی کد برای تشخیص تغییرات IQ - Optimizing Code for Change Detection

• تشخیص تغییرات با استراتژی OnPush Change Detection with OnPush Strategy

• تشخیص تغییرات با ورودی ها Change Detection with Inputs

• OnPush + Signals: درک اشتراک گذاری داده های کامپوننت OnPush + Signals: Understanding Component Data Sharing

• OnPush + Signals: مشکل در اشتراک گذاری داده های بین کامپوننت ها OnPush + Signals: Problem with Cross-Component Data Sharing

• تشخیص تغییرات دستی - RxJS Subjects Manual Change Detection - RxJS Subjects

• استفاده از Async Pipe با BehaviorSubject Using Async Pipe with BehaviorSubject

• پیاده سازی تشخیص تغییرات بدون Zone Implementing Zoneless Change Detection

پروژه eStore (ng19) eStore Project (ng19)

• مقدمه و تعریف Introduction & Definition

• راه اندازی محیط Setting up the Environment

• نصب و پیکربندی Tailwind CSS Installing & Configuring Tailwind CSS

• ایجاد کامپوننت هدر Creating Header Component

• افزودن نوار جستجو Adding Search Bar

• منوی کشویی دسته بندی در نوار جستجو Category Dropdown in Search Bar

• افزودن لینک ورود، آیکون های علاقه مندی و سبد خرید Adding Login link, Wishlist & Cart icons

• افزودن نوار ناوبری دسته بندی Adding a Category Navigation Bar

• ایجاد کامپوننت اصلی Creating Home Component

• بازنگری کامپوننت های هدر و ناوبری دسته بندی Reorganizing Header & Category Navigation Components

• ایجاد صفحه خطای 404 Creating Error 404 Page

• ایجاد کامپوننت ناوبری کناری - قسمت 1 Creating Side Navigation Component - Pt1

• ایجاد کامپوننت ناوبری کناری - قسمت 2 Creating Side Navigation Component - Pt2

• دریافت داده ها در کامپوننت ناوبری کناری Fetching data into side navigation component

• ایجاد کامپوننت محصولات Creating Products Component

• استایل دهی به کارت محصول Styling Product Card

• دریافت داده ها در کامپوننت محصولات Fetching Data Into Products Component

• افزودن رتبه بندی برای هر محصول Adding Ratings for Each Product

• ایجاد پایگاه داده با MySQL Creating Database with MySQL

• ایجاد سرور Node Creating a Node Server

• پیکربندی مسیر API Configuring API Route

• پیکربندی nodemon با سرور eStore Configuring nodemon with eStore server

• اتصال به پایگاه داده MySQL Connecting to MySQL Database

• دریافت داده ها با کوئری SQL Fetching Data with SQL Query

• حذف فراخوانی getConnection() Removing the getConnection() Call

• ایجاد مسیرها با Express Creating Routes with Express

• پیکربندی مسیرها با “express.Router()" Configuring Routes with “express.Router()"

• دریافت دسته بندی ها از سرور Fetching Categories from Server

• دریافت دسته بندی ها در نوار ناوبری دسته بندی Fetching Categories in Category Navigation Bar

• معرفی مدیریت وضعیت (State Management) Introducing State Management

• اتصال Store به UI Connecting Store to the UI

• پر کردن دسته بندی های جستجو در هدر Populate Header Search Categories

• تعریف مسیرها برای دریافت محصولات Define Routes to Fetch Products

• دریافت محصولات در سمت کلاینت Fetching Products on the Client-Side

• فیلتر کردن دسته بندی ها در سمت سرور Server-Side Category Filtering

• افزودن Store محصولات Adding Products Store

• فیلتر محصولات در نوار ناوبری کناری Products Filter on Side Navigation Bar

• فیلتر محصولات در نوار ناوبری دسته بندی Products Filter on Category Navigation Bar

• افزودن کلمات کلیدی در پایگاه داده Adding Keywords in Database

• یافتن محصولات با استفاده از کادر جستجو Find Products Using Search Box

• نمایش پیام “محصولی یافت نشد” Displaying “No Products Found” Message

• بارگذاری تنبل Home و Products Lazy Loading Home & Products

• بارگذاری با تاخیر تصاویر محصولات Defer Loading the Product Images

• ایجاد کامپوننت جزئیات محصول Creating Product Details Component

• پویایی UI در تغییر مسیر - صفحه جزئیات محصول Making the UI Dynamic on Route Change – Product Details Page

• نمایش پویا جزئیات محصول Dynamic Product Detail Rendering

• پیاده سازی سبد خرید - قسمت 1 Implementing Shopping Cart - Part 1

• پیاده سازی سبد خرید - قسمت 2 Implementing Shopping Cart - Part 2

• پیاده سازی سبد خرید - قسمت 3 Implementing Shopping Cart - Part 3

• ایجاد کامپوننت سبد خرید Creating Shopping Cart Component

• نمایش محصولات در سبد خرید Displaying Products Inside The Cart

• پیاده سازی به روز رسانی مقدار و حذف محصول - قسمت 1 Implementing Quantity Update and Product Removal - Part 1

• پیاده سازی به روز رسانی مقدار و حذف محصول - قسمت 2 Implementing Quantity Update & Product Removal - Part 2

• خلاصه سبد خرید و ذخیره سازی جلسه Cart Summary & Session Storage

• ایجاد API ثبت نام کاربر Creating User Signup API

• شروع با فرم ثبت نام کاربر Starting with User Signup Form

• ایجاد فرم ثبت نام کاربر Creating User Signup Form

• افزودن اعتبارسنجی ها در فرم ثبت نام کاربر Adding Validations in User Signup Form

• پیاده سازی اعتبارسنجی یکسان برای رمز عبور Implement Same Password Validation

• اتصال فرم ثبت نام به API - قسمت 1 Connect Signup Form to API - Part 1

• اتصال فرم ثبت نام به API - قسمت 2 Connect Signup Form to API - Part 2

• ایجاد API ورود کاربر Creating User Login API

• شروع با فرم ورود کاربر Starting with User Login Form

• اتصال فرم ورود کاربر به API Connecting User Login Form to API

• ساخت منوی کاربر واکنشی پس از ورود Building a Reactive User Menu After Login

• ایجاد گزینه خروج کاربر Creating User Logout Option

• افزودن قابلیت خروج Adding Logout Functionality

• نمایش آدرس تحویل در صفحه تسویه حساب Display Delivery Address in Checkout Screen

• API برای ذخیره سفارشات احراز هویت شده - قسمت 1 API To Save Authenticated Orders- Part 1

• API برای ذخیره سفارشات احراز هویت شده - قسمت 2 API To Save Authenticated Orders- Part 2

• API برای ذخیره سفارشات احراز هویت شده - قسمت 3 API To Save Authenticated Orders- Part 3

• ایجاد سرویس سفارش Creating order service

• ذخیره سفارش از سبد خرید Saving Order From Cart

• API برای دریافت لیست سفارشات API to Get Orders List

• ایجاد کامپوننت سفارشات گذشته Creating Past Orders Component

• نمایش محصولات سفارش داده شده گذشته Displaying the Past Ordered Products

• اتصال سرویس سفارش با کامپوننت سفارشات گذشته Connecting Order Service with Past Order Component

• پیاده سازی AuthGuard Implementing AuthGuard

یکپارچه سازی درگاه پرداخت eStore - پرداخت eStore - Payment Gateway Integration

• مقدمه ای بر درگاه پرداخت Stripe Introduction to Stripe Payment Gateway

• ایجاد حساب Stripe Creating a Stripe Account

• پیکربندی Stripe با Node.js Configuring Stripe with Node.js

• پیکربندی Stripe با Angular - راه اندازی محیط Configuring Stripe with Angular - Environment Setup

• ایجاد سرویس Stripe Creating Stripe Service

• پیکربندی Stripe در سبد خرید Configuring Stripe Inside the Cart

• ذخیره سفارشات پس از پرداخت موفق Saving Orders on Successful Payment

• ذخیره و نمایش جزئیات سفارشات گذشته Storing & Displaying the Past Order Details