آموزش تسلط بر انگولار همراه با آمادگی برای مصاحبه و ساخت اپلیکیشن فروشگاهی [ویدئویی] - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• رابط خط فرمان انگولار (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)

• اتصال رویداد با Click Event 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

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

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

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

• درک Slice Pipe Understanding Slice Pipe

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

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

• درک Number Pipe Understanding Number Pipe

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

• درک JSON Pipe 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 Pipe در برابر Impure Pipe Pure Vs. Impure Pipe

• استفاده از Impure Pipes Using Impure Pipes

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

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

• درک ساختار Router Module 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 Assignment - Displaying Course Details and Fetching the Query Parameters

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

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

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

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

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

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

• تزریق توکن‌های رشته‌ای (String 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 & 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

گارد‌های مسیر (Route Guards) Route Guards

• ایمن‌سازی مسیرها با Route Guards Securing Routes With Route Guards

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

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

• تمرین احراز هویت ورود (Login) Assignment - Login Authentication

• بارگذاری ماژول‌ها با گارد CanLoad Loading Modules with CanLoad Route Guard

• گارد CanMatch CanMatch Guard

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

• مقدمه‌ای بر بارگذاری تنبل (Lazy Loading) Introduction to Lazy Loading

• بارگذاری تنبل ماژول‌ها Lazy Loading Of Modules

• پیش‌بارگذاری (Preloading) ماژول‌ها Preloading Of Modules

• سوال مقایسه‌ای: Preloading در برابر Lazy Loading Relative Question - Preloading Vs. Lazy Loading

• بارگذاری Deferred در NG17 NG17-Deferred Loading

• استفاده از @defer با @placeholder در NG17 NG17-@defer with @placeholder

• استفاده از @defer با @loading در NG17 NG17-@defer with @loading

• استفاده از @defer با @error در NG17 NG17-@defer with @error

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

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

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

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

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

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

• پیش‌واکشی (Prefetching) بلوک‌های @defer در NG17 NG17-Prefetching of @defer Blocks

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

Observables و RxJS Observables & RxJS

• درک Observables و RxJS Understanding Observables & RxJS

• مدیریت Observables و مشترکین (Subscribers) Managing Observables & Subscribers

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

• درک Async Pipe Understanding Async Pipe

• تمرین دریافت داده‌های JSON با Async Pipe Assignment - Fetching JSON Data With Async Pipe

اپراتورهای RxJS RxJS Operators

• اپراتور {of} در RxJS RxJS {of} Operator

• اپراتور {from} در RxJS RxJS {from} Operator

• اپراتور {interval} در RxJS RxJS {interval} Operator

• اپراتور {timer} در RxJS RxJS {timer} Operator

• تمرین پیاده‌سازی Loading Spinner با اپراتور Timer Assignment - Implementing a Loading Spinner with Timer Operator

• اپراتور {empty} در RxJS RxJS {empty} Operator

• اپراتورهای Pipeable در RxJS RxJS Pipeable Operators

• اپراتور {filter} در RxJS RxJS {filter} Operator

• اپراتور {map} در RxJS RxJS {map} Operator

• اپراتور {mergeMap} در RxJS RxJS {mergeMap} Operator

• تمرین mergeMap() نمایش دوره‌های مرتبط با کاربر Assignment - mergeMap() - Displaying the Courses Associated With User

• اپراتور {concatMap} در RxJS RxJS {concatMap} Operator

• اپراتور {switchMap} در RxJS RxJS {switchMap} Operator

مدیریت فراخوانی‌های HTTP با انگولار 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 CRUD App#1 Displaying Products With GET Request

• اپلیکیشن CRUD شماره ۲: افزودن محصولات با POST CRUD App#2 Adding Products With POST Request

• اپلیکیشن CRUD شماره ۳: دریافت داده‌های محصول قبل از بروزرسانی CRUD App#3 Fetching Products Data Before Updating

• اپلیکیشن CRUD شماره ۴: بروزرسانی محصولات با PUT CRUD App#4 Updating Products With PUT Request

• اپلیکیشن CRUD شماره ۵: حذف محصولات با DELETE CRUD App#5 Deleting Products With DELETE Request

سیگنال‌ها (Signals) در انگولار ۱۶ Signals - Angular 16

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

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

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

• تغییر (Mutate) یک سیگنال Mutating A Signal

• تمرین لیست کارهای روزانه (To Do List) To-Do List Assignment

• سیگنال‌های محاسباتی (Computed Signals) Computed Signals

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

• قطع ردیابی سیگنال‌ها (Untracking) Untracking Signals

• تمرین بروزرسانی سبد خرید با استفاده از سیگنال‌ها Assignment - Updating The Cart Using Signals

انگولار ۱۷ [مجموعه تمام lectures] Angular - 17 [All Lectures Collection]

• مقدمه‌ای بر انگولار ۱۷ Introduction to Angular 17

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

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

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

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

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

• بارگذاری Deferred 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

پروژه فروشگاه الکترونیکی (eStore) eStore Project

• مقدمه Introduction

• ایجاد پروژه eStore eStore Project Creation

• نصب Bootstrap Installing Bootstrap

• شروع ساخت کامپوننت Header Beginning Header Component

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

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

• لینک ورود، لیست علاقه‌مندی‌ها و آیکون سبد خرید Login Link, Wish-list, and Cart Icons

• نوار ناوبری دسته‌بندی‌ها Category Navigation Bar

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

• بازسازماندهی سلسله‌مراتب کامپوننت‌های Header و ناوبری دسته‌بندی Reorganizing Header and Category Navigation Components Hierarchy

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

• کامپوننت ناوبری کناری (Side Navigation) Side Navigation Component

• دریافت داده‌ها در کامپوننت ناوبری کناری Fetching Data into Side Navigation Component

• کامپوننت محصولات (Products) Products Component

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

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

• ایجاد کامپوننت امتیازدهی (Ratings) Creating Ratings Component

• نصب MySQL Installing MySQL

• ایجاد پایگاه داده Creating Database

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

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

• پیکربندی Nodemon Configuring Nodemon

• اتصال به MySQL Connecting To MySQL

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

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

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

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

• ایجاد Workspace Creating Workspace

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

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

• مقدمه‌ای بر مدیریت وضعیت (State Management) Introducing State Management

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

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

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

• استفاده از Query Parameters برای فیلتر محصولات بر اساس دسته‌بندی Query Parameters to Filter Products by Category

• افزودن استور محصولات (Products Store) Add Products Store

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

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

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

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

• بارگذاری تنبل ماژول Home و کامپوننت گالری محصولات Lazy Loading Home Module and Products Gallery Component

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

• پیاده‌سازی سبد خرید - بخش اول Implementing Shopping Cart - Part 1

• پیاده‌سازی سبد خرید - بخش دوم Implementing Shopping Cart - Part 2

• ایجاد کامپوننت سبد خرید - بخش اول Creating Shopping Cart Component - Part 1

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

• خلاصه سبد خرید و Session Storage Cart Summary and Session Storage

• ای‌پی‌آی ثبت‌نام کاربر (User Signup API) User Signup API

• شروع ساخت فرم ثبت‌نام کاربر Starting User Sign Up Form

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

• اتصال فرم ثبت‌نام به API Connect Sign Up Form to API

• ای‌پی‌آی ورود کاربر + مقدمه‌ای بر JWT User Login API + Introduction to JWT

• فرم ورود کاربر User Login Form

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

• ساخت منوی کشویی کاربر Create User Drop Down Menu

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

• نمایش آدرس ارسال در صفحه پرداخت (Checkout) Display Delivery Address In Checkout Screen

• ایجاد API برای ذخیره سفارش Creating API to Save Order

• ایجاد سرویس سفارش (Order Service) Creating Order Service

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

• ای‌پی‌آی دریافت لیست سفارشات API to Get Orders List

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

• نمایش سفارشات گذشته و Route Guard Displaying Past Orders and Route Guard

تست‌نویسی در انگولار Angular Testing

• مقدمه: چرا تست‌نویسی؟ دستی در برابر خودکار Intro - Why Testing? Manual Vs Automated

• مقایسه Unit در برابر Integrated و End to End Unit Vs. Integrated Vs. End to End

• اولین تست با Jasmine و Karma Jasmine & Karma - First Test

• متدهای before() و after() در Jasmine Jasmine before() and after() Methods

• تست‌های واحد برای کامپوننت Rating Unit Tests for Rating Component

• اسپای‌ها و موک‌ها (Spies and Mocks) Spies and Mocks

• تست واحد فرم‌ها Unit Testing Forms

• تست واحد مسیرها (Routes) Unit Testing Routes

• تست واحد سرویس‌های HTTP Unit Testing HTTP Services

• تست یکپارچه‌سازی (Integration Test) Integration Test

• پوشش کد (Code Coverage) Code Coverage