آموزش دوره زاویه ای واکنشی (با RxJs، Angular 15)

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

معرفی Introduction

• کورس زاویه ای واکنشی - نمای هلیکوپتر Reactive Angular Course - Helicopter View

• مهم: نسخه های نرم افزاری توصیه شده IMPORTANT: Recommended Software Versions

• تنظیم محیط توسعه خود Setting Up your Development Environment

معرفی Introduction

• کورس زاویه ای واکنشی - نمای هلیکوپتر Reactive Angular Course - Helicopter View

• مهم: نسخه های نرم افزاری توصیه شده IMPORTANT: Recommended Software Versions

• تنظیم محیط توسعه خود Setting Up your Development Environment

خدمات قابل مشاهده بدون تابعیت Stateless Observables Services

• بررسی یک جزء نوشته شده به سبک سنتی امری Reviewing a component written in traditional Imperative Style

• درک مشکلات احتمالی برنامه ای که به سبک دستوری نوشته شده است Understanding potential problems of a program written in Imperative style

• الگوی طراحی - خدمات مبتنی بر مشاهدات بدون تابعیت Design Pattern - Stateless Observable-based Services

• مصرف سرویس های مبتنی بر مشاهده با استفاده از Angular async Pipe Consuming Observable-based services using the Angular async Pipe

• اجتناب از درخواست های تکراری Angular HTTP با اپراتور RxJs shareReplay Avoiding Angular duplicate HTTP requests with the RxJs shareReplay operator

• الگوهای لایه نمای زاویه ای - اجزای هوشمند در مقابل ارائه Angular view Layer Patterns - Smart vs Presentational Components

• مثال اصلاح داده در سبک واکنشی (برنامه بدون حالت) Data Modification Example in Reactive Style (Stateless Application)

خدمات قابل مشاهده بدون تابعیت Stateless Observables Services

• بررسی یک جزء نوشته شده به سبک سنتی امری Reviewing a component written in traditional Imperative Style

• درک مشکلات احتمالی برنامه ای که به سبک دستوری نوشته شده است Understanding potential problems of a program written in Imperative style

• الگوی طراحی - خدمات مبتنی بر مشاهدات بدون تابعیت Design Pattern - Stateless Observable-based Services

• مصرف سرویس های مبتنی بر مشاهده با استفاده از Angular async Pipe Consuming Observable-based services using the Angular async Pipe

• اجتناب از درخواست های تکراری Angular HTTP با اپراتور RxJs shareReplay Avoiding Angular duplicate HTTP requests with the RxJs shareReplay operator

• الگوهای لایه نمای زاویه ای - اجزای هوشمند در مقابل ارائه Angular view Layer Patterns - Smart vs Presentational Components

• مثال اصلاح داده در سبک واکنشی (برنامه بدون حالت) Data Modification Example in Reactive Style (Stateless Application)

تعامل اجزای واکنشی Reactive Component Interaction

• تعامل مؤلفه های واکنشی - مقدمه بخش Reactive Component Interaction - Section Introduction

• ارتباط جزء جدا شده با استفاده از یک سرویس مشترک Decoupled component communication using a shared Service

• در حال بارگیری طراحی API واکنشی سرویس Loading Service Reactive API Design

• تعامل مؤلفه واکنشی با استفاده از مشاهدات سفارشی و موضوع رفتار Reactive Component Interaction using Custom Observables and Behavior Subject

• خدمات نشانگر بارگیری - اجرای واکنشی به پایان رسید Loading Indication Service - Reactive Implementation Finished

• آشنایی با ویژگی Angular Component providers Understanding the Angular Component providers property

• مدیریت خطا و مولفه پیام ها Error Handling and the Messages Component

• مدیریت خطا با عملگر catchError RxJs Error Handling with the catchError RxJs operator

• سرویس پیام - پیاده سازی به پایان رسید و نسخه ی نمایشی Messages Service - Implementation Finished and Demo

• مدیریت خطای محلی در گفتگوی مواد زاویه ای Local Error Handling in an Angular Material Dialog

• مدیریت وضعیت زاویه ای - چه زمانی لازم است و چرا؟ Angular State Management - When is it Needed and Why?

• اجرای اولیه سرویس فروشگاه Initial Implementation of a Store Service

• پیاده سازی گام به گام سرویس فروشگاهی انگولار Step-by-Step Implementation of an Angular Store Service

• ذخیره عملیات اصلاح خوشبینانه داده - طراحی API Store Optimistic Data Modification Operations - API Design

• ذخیره اصلاحات داده های خوش بینانه - پیاده سازی گام به گام Store Optimistic Data Modifications - Step-By-Step Implementation

تعامل اجزای واکنشی Reactive Component Interaction

• تعامل مؤلفه های واکنشی - مقدمه بخش Reactive Component Interaction - Section Introduction

• ارتباط جزء جدا شده با استفاده از یک سرویس مشترک Decoupled component communication using a shared Service

• در حال بارگیری طراحی API واکنشی سرویس Loading Service Reactive API Design

• تعامل مؤلفه واکنشی با استفاده از مشاهدات سفارشی و موضوع رفتار Reactive Component Interaction using Custom Observables and Behavior Subject

• خدمات نشانگر بارگیری - اجرای واکنشی به پایان رسید Loading Indication Service - Reactive Implementation Finished

• آشنایی با ویژگی Angular Component providers Understanding the Angular Component providers property

• مدیریت خطا و مولفه پیام ها Error Handling and the Messages Component

• مدیریت خطا با عملگر catchError RxJs Error Handling with the catchError RxJs operator

• سرویس پیام - پیاده سازی به پایان رسید و نسخه ی نمایشی Messages Service - Implementation Finished and Demo

• مدیریت خطای محلی در گفتگوی مواد زاویه ای Local Error Handling in an Angular Material Dialog

• مدیریت وضعیت زاویه ای - چه زمانی لازم است و چرا؟ Angular State Management - When is it Needed and Why?

• اجرای اولیه سرویس فروشگاه Initial Implementation of a Store Service

• پیاده سازی گام به گام سرویس فروشگاهی انگولار Step-by-Step Implementation of an Angular Store Service

• ذخیره عملیات اصلاح خوشبینانه داده - طراحی API Store Optimistic Data Modification Operations - API Design

• ذخیره اصلاحات داده های خوش بینانه - پیاده سازی گام به گام Store Optimistic Data Modifications - Step-By-Step Implementation

مدیریت وضعیت احراز هویت Authentication State Management

• مدیریت وضعیت احراز هویت - بخش مقدمه Authentication State Management - Section Introduction

• فروشگاه احراز هویت - پیاده سازی گام به گام Authentication Store - Step-By-Step Implementation

• تطبیق رابط کاربری با توجه به وضعیت احراز هویت کاربر Adapting the UI according to the user Authentication status

• فروشگاه احراز هویت - پشتیبانی از بازخوانی مرورگر با ذخیره‌سازی محلی Authentication Store - Browser Refresh support with Local Storage

مدیریت وضعیت احراز هویت Authentication State Management

• مدیریت وضعیت احراز هویت - بخش مقدمه Authentication State Management - Section Introduction

• فروشگاه احراز هویت - پیاده سازی گام به گام Authentication Store - Step-By-Step Implementation

• تطبیق رابط کاربری با توجه به وضعیت احراز هویت کاربر Adapting the UI according to the user Authentication status

• فروشگاه احراز هویت - پشتیبانی از بازخوانی مرورگر با ذخیره‌سازی محلی Authentication Store - Browser Refresh support with Local Storage

الگوی UI Master-Detail (با مدیریت داخلی داخلی) Master-Detail UI Pattern (with built-in State Management)

• الگوی UI Master-Detail - مقدمه بخش Master-Detail UI Pattern - Section Introduction

• Angular Master Detail Implementation - The Master Table Angular Master Detail Implementation - The Master Table

• Angular Master Detail Implementation - The Detail Element Angular Master Detail Implementation - The Detail Element

• Angular Master Detail Implementation - نسخه نمایشی نهایی Angular Master Detail Implementation - Final Demo

الگوی UI Master-Detail (با مدیریت داخلی داخلی) Master-Detail UI Pattern (with built-in State Management)

• الگوی UI Master-Detail - مقدمه بخش Master-Detail UI Pattern - Section Introduction

• Angular Master Detail Implementation - The Master Table Angular Master Detail Implementation - The Master Table

• Angular Master Detail Implementation - The Detail Element Angular Master Detail Implementation - The Detail Element

• Angular Master Detail Implementation - نسخه نمایشی نهایی Angular Master Detail Implementation - Final Demo

الگوی قابل مشاهده تک داده The Single Data Observable Pattern

• تمرین تثبیت - اجرای صفحه دوره در سبک واکنشی Consolidation Exercise - Implementing the Course Screen in Reactive Style

• جزء دوره به پایان رسید - مقدمه ای بر الگوی مشاهده پذیر داده واحد Course Component Finished - Introduction to the Single Data Observable Pattern

• Angular واکنشی - الگوی قابل مشاهده تک داده Reactive Angular - The Single Data Observable Pattern

• الگوی قابل مشاهده تک داده - مقادیر پیش فرض داده Single Data Observable Pattern - Default Data Values

• Refactoring یک Angular Reactive Application برای OnPush Change Detection Refactoring an Angular Reactive Application to OnPush Change Detection

الگوی قابل مشاهده تک داده The Single Data Observable Pattern

• تمرین تثبیت - اجرای صفحه دوره در سبک واکنشی Consolidation Exercise - Implementing the Course Screen in Reactive Style

• جزء دوره به پایان رسید - مقدمه ای بر الگوی مشاهده پذیر داده واحد Course Component Finished - Introduction to the Single Data Observable Pattern

• Angular واکنشی - الگوی قابل مشاهده تک داده Reactive Angular - The Single Data Observable Pattern

• الگوی قابل مشاهده تک داده - مقادیر پیش فرض داده Single Data Observable Pattern - Default Data Values

• Refactoring یک Angular Reactive Application برای OnPush Change Detection Refactoring an Angular Reactive Application to OnPush Change Detection

نتیجه گیری و خلاصه دوره Conclusions and Course Summary

• سخنرانی جایزه: درباره دانشگاه انگولار و کانال یوتیوب من بیشتر بدانید Bonus Lecture: Learn More About The Angular University And My YouTube Channel

• نتیجه گیری و نکات کلیدی Conclusion & Key Takeaways

نتیجه گیری و خلاصه دوره Conclusions and Course Summary

• سخنرانی جایزه: درباره دانشگاه انگولار و کانال یوتیوب من بیشتر بدانید Bonus Lecture: Learn More About The Angular University And My YouTube Channel

• نتیجه گیری و نکات کلیدی Conclusion & Key Takeaways