آموزش جامع انگولار - نسخه 16/17 [ویدئویی] - آخرین آپدیت

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

مبانی The Basics

• معرفی ماژول Module Introduction

• بارگذاری و اجرای یک اپلیکیشن انگولار Loading and Starting an Angular Application

• اجزای مهم Important Components

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

• درک نقش AppModule و تعریف کامپوننت Understanding the Role of AppModule and Component Declaration

• استفاده از کامپوننت‌های سفارشی Using Custom Components

• ایجاد کامپوننت‌ها با CLI و تو در تو کردن کامپوننت‌ها Creating Components with the Command Line Input (CLI) and Nesting Components

• کار با تمپلیت‌های کامپوننت Working with Component Templates

• کار با استایل‌های کامپوننت Working with Component Styles

• درک Selector کامپوننت Understanding the Component Selector

• حل تمرین Assignment Solution

• اتصال داده‌ها (Data Binding) چیست؟ What Is Data Binding?

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

• اتصال ویژگی (Property Binding) Property Binding

• مقایسه اتصال ویژگی در مقابل درون‌یابی رشته‌ای Property Binding Versus String Interpolation

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

• ارسال و استفاده از داده‌ها با اتصال رویداد Passing and Using Data with Event Binding

• اتصال داده دوطرفه (Two Way Binding) Two-Way Data Binding

• ترکیب تمام انواع اتصال داده‌ها Combining All Forms of Data Binding

• حل تمرین Assignment Solution

• درک دایرکتیوها Understanding Directives

• استفاده از دایرکتیو ngIf برای نمایش شرطی داده‌ها Using the ngIf Directive to Display Data Conditionally

• بهبود دایرکتیو ngIf با شرط Else Enhancing the ngIf Directive with an Else Condition

• استایل‌دهی پویا به المان‌ها با دایرکتیو ngStyle Styling Elements Dynamically with the ngStyle Directive

• اعمال پویا کلاس‌های CSS با دایرکتیو ngClass Applying CSS Classes Dynamically with the ngClass Directive

• نمایش لیست‌ها با استفاده از دایرکتیو ngFor Displaying Lists Using the ngFor Directive

• حل تمرین Assignment Solution

• دریافت ایندکس هنگام استفاده از دایرکتیو ngFor Getting the Index When Using the ngFor Directive

پروژه دوره: مبانی Course Project - the Basics

• معرفی پروژه Project Introduction

• برنامه‌ریزی اپلیکیشن Planning the Application

• راه‌اندازی اپلیکیشن Setting Up the Application

• ایجاد کامپوننت‌ها Creating Components

• استفاده از کامپوننت‌ها Using Components

• افزودن نوار ناوبری (Navigation Bar) Adding a Navigation Bar

• ایجاد مدل «دستور پخت» (Recipe) Creating a "Recipe" Model

• افزودن محتوا به کامپوننت‌های دستور پخت Adding Content to the Recipes' Components

• نمایش لیست دستور پخت‌ها با دایرکتیو ngFor Displaying a List of Recipes Using the ngFor Directive

• نمایش جزئیات دستور پخت Displaying Recipe Details

• کار روی کامپوننت لیست خرید (ShoppingList) Working on the ShoppingList Component

• ایجاد مدل «مواد لازم» (Ingredients) Creating an "Ingredients" Model

• ایجاد و نمایش لیست خرید Creating and Displaying the Shopping List

• افزودن بخش ویرایش لیست خرید Adding a Shopping List Edit Section

• جمع‌بندی و گام‌های بعدی Wrapping Up and Next Steps

عیب‌یابی (Debugging) Debugging

• درک پیام‌های خطای انگولار Understanding Angular Error Messages

• عیب‌یابی کد در مرورگر با استفاده از Source Maps Debugging Code in the Browser Using Source Maps

بررسی عمیق کامپوننت‌ها و اتصال داده‌ها Components and Databinding Deep Dive

• معرفی ماژول Module Introduction

• تقسیم اپلیکیشن به کامپوننت‌ها Splitting Applications into Components

• مروری بر اتصال ویژگی و رویداد Property and Event Binding Overview

• اتصال به ویژگی‌های سفارشی Binding to Custom Properties

• اختصاص نام مستعار به ویژگی‌های سفارشی Assigning an Alias to Custom Properties

• اتصال به رویدادهای سفارشی Binding to Custom Events

• اختصاص نام مستعار به رویدادهای سفارشی Assigning an Alias to Custom Events

• خلاصه اتصال ویژگی و رویداد سفارشی Custom Property and Event Binding Summary

• درک View Encapsulation Understanding View Encapsulation

• توضیحات بیشتر درباره View Encapsulation More on View Encapsulation

• استفاده از رفرنس‌های محلی در تمپلیت‌ها Using Local References in Templates

• دسترسی به تمپلیت و DOM با استفاده از @ViewChild Getting Access to the Template and Document Object Model (DOM) with the @ViewChild Component

• پروژکت کردن محتوا در کامپوننت‌ها با ng-content Projecting Content into Components with ng-content

• درک چرخه حیات کامپوننت (Lifecycle) Understanding the Component Lifecycle

• مشاهده قلاب‌های چرخه حیات در عمل Seeing Lifecycle Hooks in Action

• قلاب‌های چرخه حیات و دسترسی به تمپلیت Lifecycle Hooks and Template Access

• دسترسی به ng-content با دکوراتور @ContentChild Getting Access to ng-content with the @ContentChild Parameter Decorator

• جمع‌بندی Wrapping Up

• حل تمرین Assignment Solution

پروژه دوره: کامپوننت‌ها و اتصال داده‌ها Course Project - Components and Data Binding

• مقدمه Introduction

• افزودن ناوبری با اتصال رویداد و دایرکتیو ngIf Adding Navigation with Event Binding and the ngIf Directive

• ارسال داده‌های دستور پخت با اتصال ویژگی Passing Recipe Data with Property Binding

• ارسال داده‌ها با ترکیب اتصال رویداد و ویژگی Passing Data with Event and Property Binding (Combined)

• اجازه دادن به کاربر برای افزودن مواد به لیست خرید Allowing the User to Add Ingredients to the Shopping List

بررسی عمیق دایرکتیوها Directives Deep Dive

• معرفی ماژول Module Introduction

• مرور دایرکتیوهای ngFor و ngIf ngFor and ngIf Directives Recap

• مرور ngClass و ngStyle ngClass and ngStyle Recap

• ایجاد یک دایرکتیو Attribute ساده Creating a Basic Attribute Directive

• استفاده از Renderer برای ساخت دایرکتیو Attribute بهتر Using the Renderer to Build a Better Attribute Directive

• استفاده از دکوراتور @HostListener برای گوش دادن به رویدادهای میزبان Using the @HostListener() Decorator to Listen to Host Events

• استفاده از دکوراتور @HostBinding برای اتصال به ویژگی‌های میزبان Using the @HostBinding() Decorator to Bind to Host Properties

• اتصال به ویژگی‌های دایرکتیو Binding to Directive Properties

• اتفاقات پشت صحنه در دایرکتیوهای ساختاری (Structural) What Happens Behind the Scenes on Structural Directives

• ساخت یک دایرکتیو ساختاری Building a Structural Directive

• درک دایرکتیو ngSwitch Understanding the ngSwitch Directive

پروژه دوره: دایرکتیوها Course Project – Directives

• ساخت و استفاده از یک دایرکتیو Dropdown Building and Using a Dropdown Directive

استفاده از سرویس‌ها و تزریق وابستگی Using Services and Dependency Injection

• معرفی ماژول Module Introduction

• چرا به سرویس‌ها نیاز داریم؟ Why Would You Need Services?

• ایجاد یک سرویس ثبت وقایع (Logging Service) Creating a Logging Service

• تزریق سرویس ثبت وقایع در کامپوننت‌ها Injecting the Logging Service into Components

• ایجاد یک سرویس داده (Data Service) Creating a Data Service

• درک تزریق‌کننده سلسله‌مراتبی (Hierarchical Injector) Understanding the Hierarchical Injector

• چه تعداد نمونه از سرویس مورد نیاز است؟ How Many Instances of Service Are Required?

• تزریق سرویس‌ها در سرویس‌های دیگر Injecting Services into Other Services

• استفاده از سرویس‌ها برای ارتباط بین کامپوننت‌ها Using Services for Cross-Component Communication

• حل تمرین Assignment Solution

پروژه دوره: سرویس‌ها و تزریق وابستگی Course Project - Services and Dependency Injection

• مقدمه Introduction

• راه‌اندازی سرویس‌ها Setting Up the Services

• مدیریت دستور پخت‌ها در یک سرویس Managing Recipes in a Recipe Service

• استفاده از سرویس برای ارتباط بین کامپوننت‌ها Using a Service for Cross-Component Communication

• افزودن سرویس لیست خرید Adding the Shopping List Service

• استفاده از سرویس‌ها برای انتقال داده از A به B Using Services for Pushing Data from A to B

• افزودن مواد لازم به دستور پخت‌ها Adding Ingredients to Recipes

• انتقال مواد از دستور پخت به لیست خرید (از طریق سرویس) Passing Ingredients from Recipes to the Shopping List (Through a Service)

تغییر صفحات با روتینگ Changing Pages with Routing

• معرفی ماژول Module Introduction

• چرا به روتِر نیاز داریم؟ Why Do We Need a Router?

• راه‌اندازی و بارگذاری مسیرها (Routes) Setting Up and Loading Routes

• ناوبری با Router Links Navigating with Router Links

• درک مسیرهای ناوبری Understanding Navigation Paths

• استایل‌دهی به لینک‌های فعال Styling Active Router Links

• ناوبری برنامه‌نویسی شده (Programmatic Navigation) Navigating Programmatically

• استفاده از مسیرهای نسبی در ناوبری برنامه‌نویسی شده Using Relative Paths in Programmatic Navigation

• ارسال پارامترها به مسیرها Passing Parameters to Routes

• دریافت پارامترهای مسیر Fetching Route Parameters

• دریافت واکنشی پارامترهای مسیر Fetching Route Parameters Reactively

• نکته‌ای مهم درباره Route Observables An Important Note about Route Observables

• ارسال Query Parameters و Fragments Passing Query Parameters and Fragments

• بازیابی Query Parameters و Fragments Retrieving Query Parameters and Fragments

• برخی نکات رایج و اشتباهات Some Common Gotchas

• راه‌اندازی مسیرهای فرزند (تودرتو) Setting Up Child (Nested) Routes

• تمرین استفاده از Query Parameters Using Query Parameters – Practice

• پیکربندی مدیریت Query Parameters Configuring the Handling of Query Parameters

• مسیرهای Redirect و Wildcard Redirecting and Wildcard Routes

• برون‌سپاری پیکربندی مسیرها Outsourcing the Route Configuration

• مقدمه‌ای بر Guardها An Introduction to Guards

• محافظت از مسیرها با متد canActivate Protecting Routes with the canActivate() Method

• محافظت از مسیرهای فرزند با متد canActivateChild Protecting Child (Nested) Routes Using the canActivateChild() Method

• استفاده از یک سرویس احراز هویت مجازی Using a Fake Authentication Service

• کنترل ناوبری با متد canDeactivate Controlling Navigation with the canDeactivate() Method

• ارسال داده‌های استاتیک به یک مسیر Passing Static Data to a Route

• حل داده‌های پویا با Resolve Guard Resolving Dynamic Data with the Resolve Guard

• درک استراتژی‌های Location Understanding Location Strategies

• جمع‌بندی Wrapping Up

پروژه دوره: روتینگ Course Project – Routing

• برنامه‌ریزی ساختار کلی Planning the General Structure

• راه‌اندازی مسیرها Setting Up Routes

• افزودن ناوبری به اپلیکیشن Adding Navigation to the Application

• مشخص کردن مسیرهای فعال Marking Active Routes

• رفع مشکلات بارگذاری مجدد صفحه Fixing Page Reload Issues

• چالش مسیرهای فرزند Child Routes: Challenge

• پیاده‌سازی مشترک روتینگ فرزند Adding Child Routing Together

• پیکربندی پارامترهای مسیر Configuring Route Parameters

• ارسال پارامترهای پویا به لینک‌ها Passing Dynamic Parameters to Links

• استایل‌دهی به آیتم‌های فعال دستور پخت Styling Active Recipe Items

• افزودن مسیرهای ویرایش Adding Editing Routes

• بازیابی پارامترهای مسیر Retrieving Route Parameters

• ناوبری برنامه‌نویسی شده به صفحه ویرایش Programmatic Navigation to the Edit Page

• نکته‌ای درباره Route Observables One Note about Route Observables

درک Observables Understanding Observables

• معرفی ماژول Module Introduction

• تحلیل Angular Observables Analyzing Angular Observables

• نگاهی نزدیک‌تر به هسته Observables Getting Closer to the Core of Observables

• ساخت یک Observable سفارشی Building a Custom Observable

• خطاها و اتمام (Completion) Errors and Completion

• Observables Observables

• درک اپراتورها Understanding Operators

• Subjects Subjects

• جمع‌بندی Wrapping Up

پروژه دوره: Observables Course Project – Observables

• بهبود سرویس واکنشی با Observables (Subjects) Improving the Reactive Service with Observables (Subjects)

مدیریت فرم‌ها در اپلیکیشن‌های انگولار Handling Forms in Angular Apps

• معرفی ماژول Module Introduction

• چرا به کمک انگولار نیاز داریم؟ Why do We Need Angular's Help?

• مقایسه رویکرد Template-Driven در مقابل Reactive Template-Driven (TD) Versus Reactive Approach

• ایجاد یک فرم نمونه Creating an Example Form

• Template-Driven: ایجاد فرم‌ها و ثبت کنترل‌ها Template-Driven (TD): Creating Forms and Registering the Controls

• Template-Driven: ارسال و استفاده از فرم Template-Driven (TD): Submitting and Using a Form

• Template-Driven: درک وضعیت فرم Template-Driven (TD): Understanding Form State

• Template-Driven: دسترسی به فرم با دکوراتور @ViewChild Template-Driven (TD): Accessing a Form Using the @ViewChild Decorator

• Template-Driven: افزودن اعتبارسنجی برای بررسی ورودی کاربر Template-Driven (TD): Adding Validation to Check User Input

• Template-Driven: استفاده از وضعیت فرم Template-Driven (TD): Using the Form State

• Template-Driven: نمایش پیام‌های خطای اعتبارسنجی Template-Driven (TD): Displaying Validation Error Messages

• Template-Driven: تنظیم مقادیر پیش‌فرض با ngModel Template-Driven (TD): Set Default Values Using the ngModel Property Binding

• Template-Driven: استفاده از ngModel با اتصال دوطرفه Template-Driven (TD): Using ngModel with Two-Way Binding

• Template-Driven: گروه‌بندی کنترل‌های فرم Template-Driven (TD): Grouping Form Controls

• Template-Driven: مدیریت دکمه‌های رادیویی (Radio Buttons) Template-Driven (TD): Handling Radio Buttons

• Template-Driven: تنظیم و اصلاح مقادیر فرم Template-Driven (TD): Setting and Patching Form Values

• Template-Driven: استفاده از داده‌های فرم Template-Driven (TD): Using Form Data

• Template-Driven: ریست کردن فرم‌ها Template-Driven (TD): Resetting Forms

• مقدمه‌ای بر رویکرد Reactive Introduction to the Reactive Approach

• Reactive: تنظیم تمپلیت فرم Reactive: Form Template Setup

• Reactive: ایجاد فرم در کد Reactive: Creating a Form in Code

• Reactive: همگام‌سازی HTML و فرم Reactive: Syncing HTML and Form

• Reactive: ارسال فرم Reactive: Submitting a Form

• Reactive: افزودن اعتبارسنجی Reactive: Adding Validation

• Reactive: دسترسی به کنترل‌ها Reactive: Getting Access to Controls

• Reactive: گروه‌بندی کنترل‌ها Reactive: Grouping Controls

• Reactive: آرایه‌های FormControl (FormArray) Reactive: Arrays of FormControl (FormArray)

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

• Reactive: استفاده از کدهای خطا Reactive: Using Error Codes

• Reactive: ایجاد اعتبارسنج ناهمگام سفارشی Reactive: Creating a Custom Asynchronous Validator

• Reactive: واکنش به تغییرات وضعیت یا مقدار Reactive: Reacting to Status or Value Changes

• Reactive: تنظیم و اصلاح مقادیر Reactive: Setting and Patching Values

• حل تمرین Assignment Solution

پروژه دوره: فرم‌ها Course Project – Forms

• مقدمه Introduction

• Template-Driven: افزودن فرم لیست خرید TD: Adding the Shopping List Form

• افزودن اعتبارسنجی به فرم Adding Validation to a Form

• اجازه انتخاب آیتم‌ها در یک لیست Allowing Selection of Items in a List

• بارگذاری آیتم‌های لیست خرید در فرم Loading Shopping List Items into a Form

• به‌روزرسانی آیتم‌های موجود Updating Existing Items

• ریست کردن فرم Resetting a Form

• اجازه دادن به کاربر برای پاک کردن (لغو) فرم Allowing the User to Clear (Cancel) a Form

• اجازه حذف آیتم‌های لیست خرید Allowing the Deletion of Shopping List Items

• ایجاد تمپلیت برای فرم ویرایش دستور پخت (Reactive) Creating a Template for the (Reactive) Recipe Edit Form

• ایجاد فرم برای ویرایش دستور پخت‌ها Creating a Form to Edit Recipes

• همگام‌سازی HTML با فرم Syncing HTML with a Form

• افزودن کنترل‌های مواد لازم به FormArray Adding Ingredient Controls to a FormArray

• افزودن کنترل‌های جدید برای مواد لازم Adding New Ingredient Controls

• اعتبارسنجی ورودی کاربر Validating User Input

• ارسال فرم ویرایش دستور پخت Submitting the Recipe Edit Form

• افزودن قابلیت حذف و لغو Adding the Delete and Clear (Cancel) Functionality

• هدایت کاربر (پس از حذف دستور پخت) Redirecting a User (After Deleting a Recipe)

• افزودن پیش‌نمایش تصویر Adding an Image Preview

• ارائه صحیح سرویس دستور پخت Providing the Recipe Service Correctly

• حذف مواد لازم و پرداخت‌های نهایی Deleting Ingredients and Some Finishing Touches

استفاده از Pipeها برای تغییر خروجی Using Pipes to Transform the Output

• مقدمه و دلیل مفید بودن Pipeها Introduction and Why Pipes Are Useful

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

• پارامتری کردن Pipeها Parametrizing Pipes

• یادگیری بیشتر درباره Pipeها Learning More About Pipes

• زنجیر کردن چندین Pipe Chaining Multiple Pipes

• ایجاد یک Pipe سفارشی Creating a Custom Pipe

• پارامتری کردن Pipe سفارشی Parametrizing a Custom Pipe

• مثال: ایجاد یک Filter Pipe Example: Creating a Filter Pipe

• Pipeهای Pure و Impure (چگونه Filter Pipe را اصلاح کنیم؟) Pure and Impure Pipes (How to "Fix" the Filter Pipe?)

• درک Pipe «Async» Understanding the "Async" Pipe

ارسال درخواست‌های HTTP Making HTTP Requests

• یک محیط توسعه یکپارچه (IDE) جدید A New Integrated Development Environment (IDE)

• معرفی ماژول Module Introduction

• انگولار چگونه با بک‌اند تعامل دارد؟ How Does Angular Interact with Backends?

• کالبدشکافی یک درخواست HTTP Anatomy of an HTTP Request

• راه‌اندازی بک‌اند (Firebase) Setting Up Backend (Firebase)

• ارسال درخواست POST Sending a POST Request

• ارسال درخواست GET Sending a GET Request

• استفاده از اپراتورهای RxJS برای تغییر داده‌های پاسخ Using Reactive Extensions for JavaScript (RxJS) Operators to Transform Response Data

• استفاده از Typeها با HttpClient Using Types with HttpClient

• نمایش پست‌ها Outputting Posts

• نمایش نشانگر بارگذاری (Loading Indicator) Showing a Loading Indicator

• استفاده از سرویس برای درخواست‌های HTTP Using a Service for HTTP Requests

• نحوه عملکرد سرویس‌ها و کامپوننت‌ها Working of Services and Components

• ارسال درخواست DELETE Sending a DELETE Request

• مدیریت خطاها Handling Errors

• استفاده از Subjectها برای مدیریت خطا Using Subjects for Error Handling

• استفاده از اپراتور catchError Using the catchError Operator

• مدیریت خطا و تجربه کاربری (UX) Error Handling and User Experience (UX)

• تنظیم Headerها Setting Headers

• افزودن Query Parameters Adding Query Parameters

• مشاهده انواع مختلف پاسخ‌ها Observing Different Types of Responses

• تغییر نوع بدنه پاسخ (Response Body) Changing the Response Body Type

• معرفی Interceptorها Introducing Interceptors

• دست‌کاری در اشیاء درخواست Manipulating Request Objects

• Interceptorهای پاسخ Response Interceptors

• استفاده از چندین Interceptor Multiple Interceptors

• جمع‌بندی Wrapping Up

پروژه دوره: HTTP Course Project – HTTP

• معرفی ماژول Module Introduction

• راه‌اندازی بک‌اند (Firebase) Setting Up Backend (Firebase)

• راه‌اندازی سرویس ذخیره‌سازی داده‌ها Setting Up the Data Storage Service

• ذخیره دستور پخت‌ها Storing Recipes

• دریافت دستور پخت‌ها Fetching Recipes

• تغییر داده‌های پاسخ Transforming Response Data

• حل داده‌ها قبل از بارگذاری Resolving Data before Loading

• رفع یک باگ با Resolver Fixing a Bug with the Resolver

احراز هویت و محافظت از مسیرها در انگولار Authentication and Route Protection in Angular Apps

• معرفی ماژول Module Introduction

• نحوه عملکرد احراز هویت Working of Authentication

• افزودن صفحه احراز هویت Adding the Authentication Page

• تغییر بین حالت‌های احراز هویت Switching between Authentication Modes

• مدیریت ورودی فرم Handling Form Input

• آماده‌سازی بک‌اند Preparing the Backend

• آماده‌سازی درخواست ثبت‌نام (Signup) Preparing the Signup Request

• ارسال درخواست ثبت‌نام Sending the Signup Request

• افزودن Loading Spinner و منطق مدیریت خطا Adding Loading Spinner and Error Handling Logic

• بهبود مدیریت خطا Improving Error Handling

• ارسال درخواست‌های ورود (Login) Sending Login Requests

• مدیریت خطای ورود Handling Login Error

• ایجاد و ذخیره داده‌های کاربر Creating and Storing the User Data

• انعکاس وضعیت احراز هویت در رابط کاربری (UI) Reflecting the Authentication State in the User Interface (UI)

• افزودن توکن به درخواست‌های ارسالی Adding a Token to Outgoing Requests

• اتصال توکن با یک Interceptor Attaching a Token with an Interceptor

• افزودن خروج (Logout) Adding Logout

• افزودن ورود خودکار Adding Auto-Login

• افزودن خروج خودکار Adding Auto-Logout

• افزودن یک Authentication Guard Adding an Authentication Guard

• جمع‌بندی Wrapping Up

کامپوننت‌های پویا Dynamic Components

• معرفی ماژول Module Introduction

• افزودن کامپوننت مودال هشدار (Alert Modal) Adding an Alert Modal Component

• درک رویکردهای مختلف Understanding the Different Approaches

• استفاده از دایرکتیو ngIf Using the ngIf Directive

• آماده‌سازی برای ایجاد برنامه‌نویسی شده Preparing Programmatic Creation

• ایجاد کامپوننت به صورت برنامه‌نویسی شده Creating a Component Programmatically

• درک entryComponents Understanding entryComponents

• اتصال ویژگی و رویداد Data Binding and Event Binding

• جمع‌بندی Wrapping Up

ماژول‌های انگولار و بهینه‌سازی اپلیکیشن‌ها Angular Modules and Optimizing Angular Applications

• معرفی ماژول Module Introduction

• ماژول‌ها چیستند؟ What are Modules?

• تحلیل کلاس AppModule Analyzing the AppModule Class

• شروع کار با Feature Modules Getting Started with Feature Modules

• تقسیم صحیح ماژول‌ها Splitting Modules Correctly

• افزودن مسیرها به Feature Modules Adding Routes to Feature Modules

• تعریف کامپوننت‌ها Component Declarations

• ماژول ویژگی لیست خرید ShoppingList Feature Module

• درک Shared Modules Understanding Shared Modules

• درک Core Modules Understanding Core Modules

• افزودن ماژول ویژگی احراز هویت Adding an Authentication Feature Module

• درک Lazy Loading Understanding Lazy Loading

• پیاده‌سازی Lazy Loading Implementing Lazy Loading

• بیشتر درباره Lazy Loading More Lazy Loading

• پیش‌بارگذاری کدهای Lazy Loaded Preloading Lazy-Loaded Code

• ماژول‌ها و سرویس‌ها Modules and Services

• بارگذاری متفاوت سرویس‌ها Loading Services Differently

• جمع‌بندی Wrapping Up

کامپوننت‌های Standalone Standalone Components

• معرفی ماژول Module Introduction

• شروع تنظیمات و چرا به کامپوننت‌های Standalone نیاز داریم؟ Starting Setup and Why We Want Standalone Components

• ساخت اولین کامپوننت Standalone Building a First Standalone Component

• دایرکتیوهای Standalone و اتصال بلوک‌های سازنده Standalone Directives and Connecting Building Blocks

• مهاجرت یک کامپوننت دیگر Migrating Another Component

• یک Root Component به صورت Standalone A Standalone Root Component

• سرویس‌ها و کامپوننت‌های Standalone Services and Standalone Components

• روتینگ با کامپوننت‌های Standalone Routing with Standalone Components

• Lazy Loading Lazy Loading

• خلاصه Summary

سیگنال‌های انگولار (Signals) Angular Signals

• معرفی ماژول Module Introduction

• سیگنال‌ها: چیستند و چرا؟ Signals - What and Why?

• ایجاد یک سیگنال جدید Creating a New Signal

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

• خواندن و نمایش مقدار سیگنال Reading and Outputting a Signal Value

• به‌روزرسانی سیگنال: set()، update() و mutate() Signal Updating - set(), update(), and mutate()

• مهم: سیگنال‌ها هنوز نهایی نشده‌اند! Important - Signals Are NOT Finished Yet!

• مقادیر Computed و Effects Computed Values and Effects

• خلاصه ماژول Module Summary

بونوس: استفاده از NgRx برای مدیریت وضعیت Bonus - Using NgRx for State Management

• معرفی ماژول Module Introduction

• NgRx چیست؟ What Is NgRx?

• درک NgRx و بلوک‌های سازنده‌اش Understanding NgRx and Its Building Blocks

• راه‌اندازی پروژه و نصب NgRx Project Setup and Installing NgRx

• افزودن اولین Reducer و تنظیم Store Adding a First Reducer and Store Setup

• روشی جایگزین برای ایجاد Reducerها An Alternative Way of Creating Reducers

• خواندن داده‌ها از Store Reading Data from the Store

• معرفی Actionها و Reducerهای تغییر دهنده وضعیت Introducing Actions and State Changing Reducers

• ارسال (Dispatch) اکشن‌ها Dispatching Actions

• اتصال داده‌ها به اکشن‌ها Attaching Data to Actions

• مدیریت اکشن‌ها بدون createReducer Handling Actions without createReducer

• روشی جایگزین برای تعریف اکشن‌ها An Alternative Way of Defining Actions

• زمان تمرین: اکشن دوم Time to Practice - A Second Action

• بررسی Selectorها Exploring Selectors

• معرفی Effectها Introducing Effects

• نصب پکیج Effects Installing the Effects Package

• تعریف اولین Effect Defining a First Effect

• دکوراتور قدیمی @Effect و ثبت افکت‌ها The Old @Effect Decorator and Registering Effects

• استفاده از داده‌های Store در افکت‌ها Using Store Data in Effects

• افزودن افکت دوم Adding a Second Effect

• خلاصه Summary

• شروع کار با Reducerها Getting Started with Reducers

• افزودن منطق به Reducer Adding Logic to the Reducer

• درک و افزودن اکشن‌ها Understanding and Adding Actions

• راه‌اندازی NgRx Store Setting Up the NgRx Store

• انتخاب وضعیت (State) Selecting State

• ارسال اکشن‌ها Dispatching Actions

• اکشن‌های متعدد Multiple Actions

• آماده‌سازی اکشن‌های به‌روزرسانی و حذف Preparing Update and Delete Actions

• به‌روزرسانی و حذف مواد لازم Updating and Deleting Ingredients

• گسترش وضعیت Expanding the State

• مدیریت وضعیت‌های بیشتر از طریق NgRx Managing More State Through NgRx

• حذف مدیریت وضعیت‌های تکراری در کامپوننت Removing Redundant Component State Management

• اولین جمع‌بندی و پاک‌سازی First Summary and Clean Up

• یک Root State واحد One Root State

• تنظیم Auth Reducer و اکشن‌ها Setting Up Auth Reducer and Actions

• ارسال اکشن‌های احراز هویت Dispatching Auth Actions

• پایان بخش احراز هویت (فعلاً...) Auth Finished (For Now…)

• نکته‌ای مهم درباره اکشن‌ها An Important Note on Actions

• بررسی NgRx Effects Exploring NgRx Effects

• تعریف اولین افکت Defining the First Effect

• افکت‌ها و مدیریت خطا Effects and Error Handling

• ورود از طریق NgRx Effects Login Through NgRx Effects

• مدیریت وضعیت UI در NgRx Managing UI State in NgRx

• تکمیل افکت ورود Finishing the Login Effect

• آماده‌سازی سایر اکشن‌های احراز هویت Preparing Other Auth Actions

• افزودن ثبت‌نام Adding Signup

• سایر افکت‌های احراز هویت Further Auth Effects

• افزودن ورود خودکار با NgRx Adding Auto-Login with NgRx

• افزودن خروج خودکار Adding Auto-Logout

• تکمیل افکت‌های احراز هویت Finishing the Auth Effects

• استفاده از Store Devtools Using the Store Devtools

• Router Store The Router Store

• شروع کار با NgRx برای دستور پخت‌ها Getting Started with NgRx for Recipes

• دریافت داده‌های جزئیات دستور پخت Fetching Recipe Detail Data

• دریافت دستور پخت‌ها و استفاده از Resolver Fetching Recipes and Using the Resolver

• اصلاح ریدایرکت احراز هویت Fixing the Auth Redirect

• به‌روزرسانی، حذف و افزودن دستور پخت‌ها Update, Delete and Add Recipes

• ذخیره دستور پخت‌ها از طریق افکت‌ها Storing Recipes Through Effects

• کارهای پاک‌سازی Cleanup Work

• جمع‌بندی Wrap Up

انیمیشن‌های انگولار Angular Animations

• مقدمه Introduction

• راه‌اندازی پروژه شروع Setting Up the Starting Project

• تریگرهای انیمیشن و وضعیت (State) Animation Triggers and State

• تغییر بین وضعیت‌ها Switching between States

• انتقال‌ها (Transitions) Transitions

• انتقال‌های پیشرفته Advanced Transitions

• فازهای انتقال Transition Phases

• وضعیت «Void» The "Void" State

• استفاده از Keyframes برای انیمیشن‌ها Using Keyframes for Animations

• گروه‌بندی انتقال‌ها Grouping Transitions

• استفاده از Callbackهای انیمیشن Using Animation Callbacks

افزودن قابلیت‌های آفلاین با Service Workers Adding Offline Capabilities with Service Workers

• معرفی ماژول Module Introduction

• افزودن Service Workers Adding Service Workers

• کش کردن دارایی‌ها برای استفاده آفلاین Caching Assets for Offline Use

• کش کردن دارایی‌های پویا و URLها Caching Dynamic Assets and URLs

مقدمه‌ای بر تست‌های واحد (Unit Testing) در انگولار A Basic Introduction to Unit Testing in Angular Apps

• مقدمه Introduction

• چرا تست‌های واحد؟ Why Unit Tests?

• تحلیل تنظیمات تست (ایجاد شده توسط CLI) Analyzing the Testing Setup (As Created by the Command Line Interface (CLI))

• اجرای تست‌ها (با استفاده از CLI) Running Tests (With the Command Line Interface (CLI))

• افزودن یک کامپوننت و تست‌های متناسب با آن Adding a Component and Some Fitting Tests

• تست وابستگی‌ها: کامپوننت‌ها و سرویس‌ها Testing Dependencies: Components and Services

• شبیه‌سازی کارهای ناهمگام Simulating Asynchronous Tasks

• استفاده از fakeAsync و Tick Using "fakeAsync" and "Tick"

• تست‌های ایزوله در مقابل غیر ایزوله Isolated Versus Non-Isolated Tests

انگولار به عنوان یک پلتفرم و نگاهی دقیق‌تر به CLI Angular as a Platform and a Closer Look at the Command Line Interface (CLI)

• معرفی ماژول Module Introduction

• نگاهی دقیق‌تر به دستور ng new A Closer Look at the "ng new" Command

• IDE و راه‌اندازی پروژه Integrated Development Environment (IDE) and Project Setup

• درک فایل‌های پیکربندی Understanding the Configuration Files

• دستورات مهم CLI Important Command Line Interface (CLI) Commands

• بررسی دقیق فایل angular.json The "angular.json" File - a Closer Look

• مقدمه‌ای بر Angular Schematics Angular Schematics - an Introduction

• دستور ng add The "ng add" Command

• استفاده از Schematics سفارشی برای ng generate Using Custom "ng generate" Schematics

• به‌روزرسانی پروژه‌ها با دستور ng update Updating Projects Using the "ng update" Command

• استقرار با دستور ng deploy Deploying with the "ng deploy" Command

• درک Differential Loading Understanding "Differential Loading"

• مدیریت چندین پروژه در یک پوشه Managing Multiple Projects in One Folder

• مقدمه‌ای بر کتابخانه‌های انگولار Angular Libraries - an Introduction

• جمع‌بندی Wrapping Up

بونوس: مقدمه‌ای بر TypeScript (برای استفاده در انگولار 2) Bonus: TypeScript Introduction (for Angular 2 Usage)

• معرفی ماژول Module Introduction

• چیستی و چرایی؟ What & Why?

• نصب و استفاده از TypeScript Installing & Using TypeScript

• تایپ‌های پایه و Primitiveها Base Types & Primitives

• تایپ‌های آرایه و شیء (Object) Array & Object Types

• استنباط نوع (Type Inference) Type Inference

• کار با Union Typeها Working with Union Types

• اختصاص Type Aliasها Assigning Type Aliases

• بررسی توابع و تایپ‌های تابعی Diving into Functions & Function Types

• درک Generics Understanding Generics

• کلاس‌ها و TypeScript Classes & TypeScript

• کار با Interfaceها Working with Interfaces

• پیکربندی کامپایلر TypeScript Configuring the TypeScript Compiler