آموزش دوره کامل Angular 18: از صفر تا قهرمانی در Angular 18 - آخرین آپدیت

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

تنظیمات محیط Environment Setup

• مقدمه Intro

• تنظیمات ویرایشگر کد Code Editor Setup

• نگاهی به VSCODE VSCODE First Look

• تنظیمات تم VSCODE Vscode Theme Settings

• تنظیمات فونت Font Setup

• تنظیمات پلاگین Plugin Setup

• نصب Node.js و نحوه استفاده از NPM Install Node js and How to use NPM

• پایان End

اولین قدم به سوی Angular (راه اندازی Angular و ساختار فایل) First Step to Angular (Angular Setup & File Structure)

• مقدمه ای بر Angular Introduction to Angular

• برنامه تک صفحه ای چیست؟ What is Single Page Application

• Angular CLI Angular CLI

• اولین پروژه Angular First Angular Project

• توضیح NG SERVE (فرایند BTS) NG SERVE Explained (BTS Process)

• ساختار فایل Angular I Angular File Structure I

• ساختار فایل Angular II Angular File Structure II

• ساختار فایل Angular III Angular File Structure III

کامپوننت های مستقل Angular Angular Stand Alone Components

• کامپوننت های Angular چیست؟ What is Angular Components

• تکلیف !!! (کامپوننت ها) Task !!! (Components)

• نحوه بارگیری کامپوننت ها در مرورگر How Components Loads Inside the Browser

• ایجاد دستی کامپوننت Angular Create Angular Component Manually

• بارگیری کامپوننت در مرورگر I Load The Component Inside The Browser I

• بارگیری کامپوننت در مرورگر II Load The Component Inside The Browser II

• کامپوننت های تودرتو Nesting Component

• ویژگی Template Template Property

• ویژگی Style Style Property

• رویکرد بهتر برای Template ها و Style ها Better Approach for Templates & Styles

• تولید کامپوننت با استفاده از Angular CLI Generate Component Using Angular CLI

اتصال داده و مدیریت رویداد در Angular Angular Data Binding & Event Handling

• درون یابی رشته (Text Interpolation) String Interpolation (Text Interpolation)

• غوص عمیق در درون یابی رشته Deep Dive into String Interpolation

• چرا به این درون یابی رشته می گویند؟ Why This Called String Interpolation

• Property Binding Property Binding

• درون یابی رشته در مقابل Property Binding String Interpolation VS Property Binding

• Class Binding Class Binding

• اعمال Class Binding در شرط False Applying Class Binding on False Condition

• تکلیف !!! Task !!!

• راه حل تکلیف !!! Task Solution !!!

• Class Binding با مقادیر رشته ای Class Binding With String Values

• Angular Style Binding Angular Style Binding

• Multiple Style Bindings Multiple Style Bindings

• Class Binding در مقابل Style Binding Class Binding VS Style Binding

• Event Binding Event Binding

• رویدادهای بیشتر More Event Bindings

• فیلتر کردن رویداد I Event Filtering I

• فیلتر کردن رویداد II Event Filtering II

• متغیر Template Template Variable

• Two Way Data Binding I Two Way Data Binding I

• Two Way Data Binding II Two Way Data Binding II

• One way VS Two Way Data Binding One way VS Two Way Data Binding

دستورات Angular Angular Directives

• دستورات Angular چیست؟ What is Angular Directives

• Component & Structural Directive Component & Structural Directive

• دستور NgIf (روش های قدیمی) NgIf Directive (Old Ways)

• Syntax @if (به روز رسانی جدید) @if Syntax (New Update)

• روش Else Condition Else Condition Approach

• Ng-Template Ng-Template

• شرایط چندگانه I - NgIf Multiple Conditions I - NgIf

• شرایط چندگانه II - استفاده از NgIf & Else Multiple Conditions II - Using NgIf & Else

• شرایط چندگانه III - @if New Syntax Multiple Conditions III - @if New Syntax

• تفاوت بین if و if else Difference Between if and if else

• NgIf - شرایط مقادیر عددی I NgIf - Number Values Conditions I

• @if - شرایط مقادیر عددی II @if - Number Values Conditions II

• NgIf - شرایط مقادیر رشته ای I NgIf - String Values Conditions I

• @if - شرایط مقادیر رشته ای II @if - String Values Conditions II

• غوص عمیق در Ng-Template Deep Dive into Ng-Template

• دستور NgTemplateOutlet NgTemplateOutlet Directive

• مقدمه ای بر NgFor Introduction to NgFor

• Syntax @for New Loop @for New Syntax Loop

• واکشی لیست نامرتب Fetch Unordered List

• واکشی آرایه Object Fetch Object Array

• واکشی آرایه Object - @for Syntax Fetch Object Array - @for Syntax

• مکانیزم تشخیص تغییر Angular I Angular Change Detection Mechanism I

• مکانیزم تشخیص تغییر Angular II Angular Change Detection Mechanism II

• Angular For Loop Index I Angular For Loop Index I

• Angular For Loop Index II Angular For Loop Index II

• طول آرایه Users Users Array Length

• ویژگی شمارش For Loop For Loop Count Property

• نحوه مدیریت آرایه خالی How to Handle Empty Array

• بلوک syntax @empty @empty syntax block

• ویژگی حلقه First, last, Even و Odd For First, last, Even and Odd For loop Property

• NgSwitchCase NgSwitchCase

• NgSwitchCase Default NgSwitchCase Default

• Switch Case @default New Syntax Switch Case @default New Syntax

• دستور ngStyle ngStyle Directive

• دستور NgClass NgClass Directive

• Structural VS Attribute Directive Structural VS Attribute Directive

روابط کامپوننت های Angular Angular Components Relationship

• رابطه کامپوننت چیست؟ What is Component Relationship

• Parent-Child Relationship (غواصی عمیق) Parent-Child Relationship (Dive Deep)

• Parent-Child Data Flow I Parent-Child Data Flow I

• Parent-Child Data Flow II Parent-Child Data Flow II

• Parent-Child Multiple Data Flow Parent-Child Multiple Data Flow

• درک Parent-Child Data Flow Understand Parent-Child Data Flow

• Child to Parent Data Flow (@ViewChild) I Child to Parent Data Flow (@ViewChild) I

• Child to Parent Data Flow (@ViewChild) II Child to Parent Data Flow (@ViewChild) II

• Child to Parent Data Flow (@ViewChild) III Child to Parent Data Flow (@ViewChild) III

• Child to Parent Data Flow (@output & Event Emitter) Child to Parent Data Flow (@output & Event Emitter)

• Child to Parent Data Flow (@output & Event Emitter) II Child to Parent Data Flow (@output & Event Emitter) II

• @viewChild VS @Output @viewChild VS @Output

• ng-content Content Projection ng-content Content Projection

• کامپوننت های قابل استفاده مجدد Reusable Components

• Multi Slot Content Projection Multi Slot Content Projection

چرخه حیات Angular Angular LifeCycle Hooks

• چرخه حیات چیست؟ What is LifeCycle Hooks

• Render Components Programmatically I Render Components Programmatically I

• Render Components Programmatically II Render Components Programmatically II

• NgOnChanges LifeCycle Hook I NgOnChanges LifeCycle Hook I

• NgOnChanges LifeCycle Hook II NgOnChanges LifeCycle Hook II

• NgOnInit LifeCycle Hook NgOnInit LifeCycle Hook

• Constructor Method Constructor Method

• NgDoCheck LifeCycle Hook NgDoCheck LifeCycle Hook

• NgOnChanges VS NgDoCheck NgOnChanges VS NgDoCheck

• NgAfterContentInit LifeCycle hook NgAfterContentInit LifeCycle hook

• NgAfterContentChecked LifeCycle Hook NgAfterContentChecked LifeCycle Hook

• NgAfterViewInit LifeCycle Hook NgAfterViewInit LifeCycle Hook

• NgAfterViewChecked LifeCycle Hook NgAfterViewChecked LifeCycle Hook

• NgOnDestroy LifeCycle Hook NgOnDestroy LifeCycle Hook

Pipes در Angular Angular Pipes

• Pipes در Angular چیست؟ What is this Angular Pipes

• Uppercase Pipe Uppercase Pipe

• Lowercase & Title case Pipe Lowercase & Title case Pipe

• Number Pipe Number Pipe

• نقش String Interpolation در Angular Pipes Role of the String Interpolation in Angular Pipes

• Percentage & Currency Pipes Percentage & Currency Pipes

• Parameterized Pipes Parameterized Pipes

• Date & Time Pipes Date & Time Pipes

• Custom Date Formats Custom Date Formats

• Custom Time Formats Custom Time Formats

• JSON Pipe JSON Pipe

• Slice Pipe Slice Pipe

• Chaining Pipe Chaining Pipe

سرویس ها در Angular Angular Services

• مقدمه ای بر سرویس های Angular Intro to Angular Services

• ایجاد دستی سرویس Angular Create Angular Service Manually

• Use Case سرویس Angular I Use Case of Angular Service I

• Use Case سرویس Angular II Use Case of Angular Service II

• Dependency Injection I Dependency Injection I

• Dependency Injection II Dependency Injection II

• Dependency Injection III Dependency Injection III

• نحوه کار DI How DI Works

• تولید سرویس با استفاده از Angular CLI Generate Service Using Angular CLI

• Angular Services Use Case I Angular Services Use Case I

• Angular Services Use Case II Angular Services Use Case II

• Angular Interface Angular Interface

• Separate File For Angular Interface Separate File For Angular Interface

• Handiling Optional fields Handiling Optional fields

فرم ها در Angular (Template-Driven) Angular Forms (Template-Driven)

• مقدمه ای بر Angular Template Driven Forms Angular Template Driven Forms Intro

• تبدیل فرم HTML به فرم Angular Template Driven Convert HTML Form to Angular Template Driven Form

• NgForm - FormGroup Class NgForm - FormGroup Class

• NgModel - FormControl Class NgModel - FormControl Class

• اعتبارسنجی فرم I Form Validation I

• اعتبارسنجی فرم II Form Validation II

• اعتبارسنجی فرم III Form Validation III

• اضافه کردن حاشیه قرمز به Input Add Red Border to the Input

• MinLength Validation MinLength Validation

• MaxLength Validation MaxLength Validation

• Email Validation Email Validation

• Text Area Validation Text Area Validation

• ngSubmit ngSubmit

• غیرفعال کردن دکمه Submit Disable Submit Button

فرم ها در Angular II (Reactive Forms) Angular Forms II (Reactive Forms)

• Section Intro (Angular 19 Reactive Form - Updated) Section Intro (Angular 19 Reactive Form - Updated)

• Form Control New Instances & Form Control Directive (Angular 19 - Updated) Form Control New Instances & Form Control Directive (Angular 19 - Updated)

• Connect All Inputs to Form Control New Instance (Angular 19 Updated) Connect All Inputs to Form Control New Instance (Angular 19 Updated)

• Reactive Form Groups (Updated Angular 19) Reactive Form Groups (Updated Angular 19)

• Connect Formcontrol to Formgroup I (Angular 19 Updated) Connect Formcontrol to Formgroup I (Angular 19 Updated)

• Connect Formcontrol to Formgroup II (Angular 19 Updated) Connect Formcontrol to Formgroup II (Angular 19 Updated)

• Complete All Validations (Angular 19 Updated) Complete All Validations (Angular 19 Updated)

• Section Intro (Reactive Forms) Section Intro (Reactive Forms)

• Reactive Form Setup Reactive Form Setup

• Creating The Reactive Form Controls Programmatically Creating The Reactive Form Controls Programmatically

• Reactive Form Basic Validation Reactive Form Basic Validation

• Reactive Form Adding Multiple Validations Reactive Form Adding Multiple Validations

• Complete All Validations Complete All Validations

• Reactive Form Submit And Getting Form Values Reactive Form Submit And Getting Form Values

• Nested Form Groups Nested Form Groups

• Reactive Form Array Reactive Form Array

• Reactive Form Builder Reactive Form Builder

• Adding Custom Validations I Adding Custom Validations I

• Adding Custom Validations II Adding Custom Validations II

• Adding Custom Validations III Adding Custom Validations III

• Section End Section End

مسیریابی و ناوبری در Angular Angular Routing & Navigation

• Section Intro Section Intro

• مسیریابی و ناوبری در Angular چیست؟ What Is Angular Routing & Navigation

• نحوه پیاده سازی مسیریابی و ناوبری در Angular How To Implement Angular Routing & Navigation

• ایجاد یک برنامه جدید Angular Create New Angular App

• پیکربندی Angular Router Configure Angular Router

• Angular Router Outlet Angular Router Outlet

• Angular Router Link Angular Router Link

• Angular Base Url Angular Base Url

• Angular Base Router Angular Base Router

• Router Vs Href Router Vs Href

• Angular Routerlinkactive Angular Routerlinkactive

• Router Parameter Variables Router Parameter Variables

• Get Router Parameters Get Router Parameters

• Observable چیست؟ What Is Observable

• Observable Subscribe Observable Subscribe

• Observable Next Observable Next

• Observable Vs Functions Observable Vs Functions

• Synchronous Vs Asynchronus Programming Synchronous Vs Asynchronus Programming

• Observable Subscribe & Unsubscribe Observable Subscribe & Unsubscribe

• Multiple Router Parameters Multiple Router Parameters

• Query Parameters Query Parameters

• Separate Module For Angular Routing Separate Module For Angular Routing

• Navigate Programmatically Navigate Programmatically

• Wild Card Routers Wild Card Routers

• Section End Section End