آموزش ساخت اپلیکیشن‌های تعاملی با انگولار (Angular) - آخرین آپدیت

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

ساخت اپلیکیشن‌های پیشرفته با انگولار Building Feature-Rich Angular Applications

• معرفی دوره Course Introduction

• آشنایی با Lazy Loading و تبدیل مسیرها با استفاده از loadComponent Introduction to Lazy Loading & Converting Routes using loadComponent

• دمو: بارگذاری تنبل با ماژول‌ها (تنظیمات Feature Modules و Routing Module) DEMO: Lazy Loading with Modules (Feature Modules & Routing Module Setup)

• دمو: استراتژی Preloading و بهینه‌سازی عملکرد با PreloadAllModules DEMO: Preloading Strategy & Optimizing Performance with PreloadAllModules

• دمو: ایجاد کامپوننت ادمین در انگولار DEMO: Creating Admin Component in Angular

• چرا از بوت‌استرپ در پروژه‌های انگولار استفاده می‌شود؟ Why Bootstrap is Used in Angular Projects

• نصب و راه‌اندازی بوت‌استرپ در انگولار Installing and Setting Up Bootstrap in Angular

• راه‌اندازی فرم و طراحی رابط کاربری (عنوان، توضیحات و استایل‌های پایه) Form Setup & UI Design (Title, Description, Basic Styling)

• دمو: فرم‌های Template-driven (مباحث FormsModule، ngForm و ngModel) DEMO: Template-driven Forms (FormsModule, ngForm, ngModel)

• دمو: اعتبارسنجی و مدیریت خطاها (فیلدهای اجباری و form.invalid) DEMO: Validation & Error Handling (Required Fields, form.invalid)

• دمو: آپلود تصویر، پیش‌نمایش و منطق نهایی ارسال فرم DEMO: Image Upload, Preview & Final Form Submission Logic

• دمو: افزودن کامپوننت Navbar Header در انگولار DEMO: Adding Navbar Header Component in Angular

کامپوننت‌های انگولار و معماری اپلیکیشن Angular Components and Application Architecture

• طراحی رابط کاربری کامپوننت Home در انگولار Designing the Home Component UI in Angular

• ساخت و ادغام کامپوننت دوره‌ها (Courses) در انگولار Creating and Integrating Courses Component in Angular

• توضیح سینتکس قالب‌های انگولار: مقایسه ngIf و ngFor در برابر @if و @for ngIf, ngFor vs @if, @for – Angular Template Syntax Explained

• مقایسه دایرکتیوهای ساختاری: ngSwitch در برابر @switch ngSwitch vs @switch – Structural Directives Comparison

• دمو: استفاده از @defer برای بهینه‌سازی عملکرد در انگولار DEMO: Using @defer for Performance Optimization in Angular

• درک دکوراتورهای @Input و @Output در انگولار Understanding @Input and @Output Decorators in Angular

• استفاده از localStorage در انگولار برای ذخیره و بازیابی داده‌ها Using localStorage in Angular to Store and Fetch Data

• دمو: توضیح کاربرد enum در پروژه‌های انگولار DEMO: Using enum in Angular Projects Explained

• توضیح Spread Operator در انگولار و تایپ‌اسکریپت Spread Operator in Angular and TypeScript Explained

مدیریت وضعیت و عملیات CRUD State Management & CRUD Operations

• دمو: افزودن دوره‌ها: داده‌های فرم و ذخیره‌سازی محلی DEMO: Adding Courses: Form Data and Local Storage

• دمو: دریافت و نمایش دوره‌ها (getItem، JSON.parse، ngOnInit و رابط کاربری) DEMO: Fetching & Displaying Courses (getItem, JSON.parse, ngOnInit, UI

• دمو: دکمه حذف شرطی و آشنایی با آیکون‌های بوت‌استرپ DEMO: Conditional Delete Button & Introduction to Bootstrap Icons

• دمو: نصب و استفاده از آیکون‌های بوت‌استرپ و تنظیمات UI دکمه حذف DEMO: Installing & Using Bootstrap Icons + UI Setup for Delete Button

• پیاده‌سازی قابلیت حذف (EventEmitter و دکوراتور Output) Implementing Delete Functionality (EventEmitter & Output Decorator)

• به‌روزرسانی لیست دوره‌ها (منطق فیلتر و همگام‌سازی با LocalStorage) Updating Course List (Filter Logic + LocalStorage Sync)

• دمو: ریست کردن فرم، بهبودهای UI و رفع مشکلات به‌روزرسانی وضعیت DEMO: Form Reset, UI Improvements & Handling State Update Issues

• دمو: افزودن کامپوننت Footer در انگولار DEMO: Adding Footer Component in Angular

• دمو: بازسازی ساختار پروژه و پاک‌سازی کدها DEMO: Project Restructuring and Cleanup

• بهینه‌سازی کد: حذف موارد تکراری و استفاده از سرویس‌ها (Services) Code Optimization: Removing Redundancy and Using Services

• پایان دوره Course Completion