آموزش Angular - The Complete Guide [نسخه 2023] [ویدئو]

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

شروع شدن Getting Started

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

• Angular چیست؟ What Is Angular?

• Angular در مقابل Angular 2 در مقابل آخرین نسخه Angular Angular Versus Angular 2 Versus Latest Angular Version

• راه اندازی پروژه و اولین برنامه Setting Up the Project and First Application

• ویرایش اولین برنامه Editing the First Application

• ساختار دوره Course Structure

• کسب بیشترین بهره از دوره Getting the Most Out of the Course

• TypeScript چیست؟ What Is TypeScript?

• راه اندازی یک پروژه پایه با استفاده از بوت استرپ برای استایلینگ Setting Up a Basic Project Using Bootstrap for Styling

اصول اولیه The Basics

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

• بارگیری و راه اندازی یک برنامه Angular Loading and Starting an Angular Application

• اجزای مهم Important Components

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

• درک نقش AppModule و Component Declaration 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

• کار با Component Styles Working with Component Styles

• آشنایی با انتخابگر کامپوننت Understanding the Component Selector

• راه حل تکلیف Assignment Solution

• Data Binding چیست؟ What Is Data Binding?

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

• صحافی اموال Property Binding

• Property Binding در مقابل String Interpolation Property Binding Versus String Interpolation

• صحافی رویداد Event Binding

• ارسال و استفاده از داده ها با رویداد Binding Passing and Using Data with Event 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 با یک شرط دیگر 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

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

• ایجاد یک مدل "دستور پخت". Creating a "Recipe" Model

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

• نمایش فهرستی از دستور غذاها با استفاده از دستورالعمل ngFor Displaying a List of Recipes Using the ngFor Directive

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

• کار بر روی مؤلفه فهرست خرید Working on the ShoppingList Component

• ایجاد یک مدل "مواد تشکیل دهنده". Creating an "Ingredients" Model

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

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

• جمع بندی و مراحل بعدی Wrapping Up and Next Steps

اشکال زدایی Debugging

• درک پیام های خطای زاویه ای Understanding Angular Error Messages

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

کامپوننت ها و Databinding Deep Dive 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

• درک نمای کپسوله سازی 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 Projecting Content into Components with ng-content

• آشنایی با چرخه حیات کامپوننت Understanding the Component Lifecycle

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

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

• دسترسی به محتوای ng با استفاده از Decorator پارامتر @ContentChild Getting Access to ng-content with the @ContentChild Parameter Decorator

• بسته بندی Wrapping Up

• راه حل تکلیف Assignment Solution

پروژه دوره - اجزا و اتصال داده ها Course Project - Components and Data Binding

• معرفی Introduction

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

• ارسال داده های دستور غذا با صحافی ویژگی Passing Recipe Data with Property Binding

• انتقال داده با رویداد و ویژگی 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 Recap ngFor and ngIf Directives Recap

• ngClass و ngStyle Recap ngClass and ngStyle Recap

• ایجاد یک دستورالعمل ویژگی اساسی Creating a Basic Attribute Directive

• استفاده از Renderer برای ایجاد یک دستورالعمل ویژگی بهتر Using the Renderer to Build a Better Attribute Directive

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

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

• الزام آور بودن به ویژگی های دستورالعمل Binding to Directive Properties

• آنچه در پشت صحنه دستورالعمل های ساختاری اتفاق می افتد What Happens Behind the Scenes on Structural Directives

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

• درک دستورالعمل ngSwitch Understanding the ngSwitch Directive

پروژه دوره - دستورالعمل ها Course Project – Directives

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

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

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

• چرا به خدمات نیاز دارید؟ Why Would You Need Services?

• ایجاد یک سرویس ورود به سیستم Creating a Logging Service

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

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

• درک انژکتور سلسله مراتبی 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?

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

• پیمایش با پیوندهای روتر Navigating with Router Links

• آشنایی با مسیرهای ناوبری Understanding Navigation Paths

• شکل دادن به پیوندهای روتر فعال Styling Active Router Links

• پیمایش به صورت برنامه ای 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

• ارسال پارامترها و قطعات پرس و جو Passing Query Parameters and Fragments

• بازیابی پارامترها و قطعات پرس و جو Retrieving Query Parameters and Fragments

• چند گوچا معمولی Some Common Gotchas

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

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

• پیکربندی مدیریت پارامترهای پرس و جو Configuring the Handling of Query Parameters

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

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

• مقدمه ای بر نگهبانان An Introduction to Guards

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

• محافظت از مسیرهای Child (تودرتو) با استفاده از روش 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

• حل و فصل Dynamic Data با Resolve Guard Resolving Dynamic Data with the Resolve Guard

• درک استراتژی های مکان 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

• اضافه کردن Child Routing Together 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

درک قابل مشاهده ها Understanding Observables

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

• تجزیه و تحلیل قابل مشاهده های زاویه ای Analyzing Angular Observables

• رسیدن به r به هسته مشاهده پذیرها Getting r to the Core of Observables

• ساخت یک قابل مشاهده سفارشی Building a Custom Observable

• خطاها و تکمیل Errors and Completion

• قابل مشاهده Observables

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

• فاعل، موضوع Subjects

• بسته بندی Wrapping Up

پروژه دوره – قابل مشاهده ها Course Project – Observables

• بهبود سرویس واکنشی با مشاهده پذیرها (موضوعات) Improving the Reactive Service with Observables (Subjects)

مدیریت فرم ها در برنامه های Angular Handling Forms in Angular Apps

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

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

• الگو محور (TD) در مقابل رویکرد واکنشی Template-Driven (TD) Versus Reactive Approach

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

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

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

• الگو محور (TD): درک حالت فرم Template-Driven (TD): Understanding Form State

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

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

• الگو محور (TD): با استفاده از حالت فرم Template-Driven (TD): Using the Form State

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

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

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

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

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

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

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

• قالب محور (TD): بازنشانی فرم ها Template-Driven (TD): Resetting Forms

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

• واکنشی: تنظیم قالب فرم Reactive: Form Template Setup

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

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

• واکنشی: ارسال فرم Reactive: Submitting a Form

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

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

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

• واکنشی: آرایه های FormControl (FormArray) Reactive: Arrays of FormControl (FormArray)

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

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

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

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

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

• راه حل تکلیف Assignment Solution

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

• معرفی Introduction

• TD: افزودن فرم لیست خرید 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

• ایجاد یک الگو برای فرم ویرایش دستور غذا (واکنشی). 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

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

• مقدمه و چرا لوله ها مفید هستند Introduction and Why Pipes Are Useful

• استفاده از لوله ها Using Pipes

• پارامتریزه کردن لوله ها Parametrizing Pipes

• اطلاعات بیشتر در مورد لوله ها Learning More About Pipes

• زنجیر زدن چندین لوله Chaining Multiple Pipes

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

• پارامترسازی یک لوله سفارشی Parametrizing a Custom Pipe

• مثال: ایجاد یک لوله فیلتر Example: Creating a Filter Pipe

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

• درک لوله "Async". Understanding the "Async" Pipe

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

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

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

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

• آناتومی یک درخواست HTTP Anatomy of an HTTP Request

• راه اندازی Backend (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

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

• خروجی پست ها Outputting Posts

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

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

• کارکرد خدمات و قطعات Working of Services and Components

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

• رسیدگی به خطاها Handling Errors

• استفاده از موضوعات برای رسیدگی به خطا Using Subjects for Error Handling

• با استفاده از عملگر catchError Using the catchError Operator

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

• تنظیم هدرها Setting Headers

• افزودن پارامترهای پرس و جو Adding Query Parameters

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

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

• معرفی رهگیرها Introducing Interceptors

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

• رهگیرهای پاسخ Response Interceptors

• رهگیرهای متعدد Multiple Interceptors

• بسته بندی Wrapping Up

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

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

• راه اندازی Backend (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

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

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

• کار از احراز هویت Working of Authentication

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

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

• رسیدگی به ورودی فرم Handling Form Input

• آماده سازی Backend Preparing the Backend

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

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

• اضافه کردن Loading Spinner و Error Handling Logic Adding Loading Spinner and Error Handling Logic

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

• ارسال درخواست های ورود 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

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

• اضافه کردن خروج Adding Logout

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

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

• افزودن محافظ احراز هویت 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

• درک اجزای ورودی Understanding entryComponents

• Data Binding و Event Binding Data Binding and Event Binding

• بسته بندی Wrapping Up

ماژول های Angular و بهینه سازی برنامه های Angular Angular Modules and Optimizing Angular Applications

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

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

• تجزیه و تحلیل کلاس AppModule Analyzing the AppModule Class

• شروع کار با ماژول های ویژگی Getting Started with Feature Modules

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

• اضافه کردن مسیرها به ماژول های ویژگی Adding Routes to Feature Modules

• اعلامیه های مؤلفه Component Declarations

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

• درک ماژول های مشترک Understanding Shared Modules

• درک ماژول های اصلی Understanding Core Modules

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

• درک بارگذاری تنبل Understanding Lazy Loading

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

• بارگیری تنبل بیشتر More Lazy Loading

• در حال بارگذاری کد تنبل بارگذاری شده Preloading Lazy-Loaded Code

• ماژول ها و خدمات Modules and Services

• بارگیری خدمات متفاوت Loading Services Differently

• بسته بندی Wrapping Up

استقرار یک Angular Application Deploying an Angular Application

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

• مقدمات استقرار و مراحل مهم Deployment Preparations and Important Steps

• استفاده از متغیرهای محیطی Using Environment Variables

• مثال استقرار: میزبانی Firebase Deployment Example: Firebase Hosting

اجزای مستقل Standalone Components

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

• شروع راه اندازی و چرا ما مولفه های مستقل می خواهیم Starting Setup and Why We Want Standalone Components

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

• دستورالعمل های مستقل و بلوک های ساختمانی اتصال Standalone Directives and Connecting Building Blocks

• مهاجرت یک مؤلفه دیگر Migrating Another Component

• یک مؤلفه ریشه مستقل A Standalone Root Component

• خدمات و قطعات مستقل Services and Standalone Components

• مسیریابی با اجزای مستقل Routing with Standalone Components

• بارگذاری تنبل Lazy Loading

• خلاصه Summary

سیگنال های زاویه ای 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 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

• اضافه کردن اولین کاهش دهنده و راه اندازی فروشگاه Adding a First Reducer and Store Setup

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

• خواندن داده ها از فروشگاه Reading Data from the Store

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

• عملیات اعزام Dispatching Actions

• پیوست کردن داده ها به اقدامات Attaching Data to Actions

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

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

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

• کاوش انتخابگرها Exploring Selectors

• معرفی افکت ها Introducing Effects

• نصب پکیج افکت ها Installing the Effects Package

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

• The Old @Effect Decorator and Registering Effects The Old @Effect Decorator and Registering Effects

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

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

• خلاصه Summary

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

• اضافه کردن منطق به Reducer Adding Logic to the Reducer

• درک و اضافه کردن اقدامات Understanding and Adding Actions

• راه اندازی فروشگاه NgRx Setting Up the NgRx Store

• انتخاب دولت 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

• وضعیت یک ریشه One Root State

• تنظیم Auth Reducer و Actions Setting Up Auth Reducer and Actions

• ارسال اقدامات تأیید اعتبار Dispatching Auth Actions

• Auth Finished (در حال حاضر) Auth Finished (For Now…)

• نکته مهم در مورد اقدامات An Important Note on Actions

• بررسی اثرات NgRx Exploring NgRx Effects

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

• اثرات و مدیریت خطا Effects and Error Handling

• ورود از طریق افکت های NgRx Login Through NgRx Effects

• مدیریت وضعیت رابط کاربری در NgRx Managing UI State in NgRx

• اتمام جلوه ورود Finishing the Login Effect

• آماده سازی سایر اقدامات Auth Preparing Other Auth Actions

• اضافه کردن ثبت نام Adding Signup

• جلوه‌های تأیید بیشتر Further Auth Effects

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

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

• اتمام جلوه های تأیید Finishing the Auth Effects

• با استفاده از Devtools فروشگاه Using the Store Devtools

• فروشگاه روتر 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 Universal Bonus - Angular Universal

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

• Angular Universal - چه چیزی و چرا؟ Angular Universal - What and Why?

• تبدیل برنامه به یک برنامه جهانی Converting the App to a Universal App

• تجزیه و تحلیل و اجرای کد سمت سرور Analyzing and Running Server-Side Code

• به کد سمت سرور نگاه کنید A r Look at the Server-Side Code

• یکپارچه سازی REST API Integrating a REST API

• چند نکته در مورد استقرار برنامه های جهانی Angular Some Notes about Deploying Angular Universal Apps

انیمیشن های زاویه ای Angular Animations

• معرفی Introduction

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

• محرک ها و وضعیت انیمیشن Animation Triggers and State

• جابجایی بین ایالات Switching between States

• انتقال ها Transitions

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

• مراحل انتقال Transition Phases

• حالت "باطل". The "Void" State

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

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

• استفاده از تماس های متحرک Using Animation Callbacks

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

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

• اضافه کردن کارگران خدماتی Adding Service Workers

• ذخیره دارایی ها برای استفاده آفلاین Caching Assets for Offline Use

• ذخیره دارایی های پویا و URL ها Caching Dynamic Assets and URLs

مقدمه ای اساسی برای تست واحد در برنامه های Angular 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

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

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

• A r به فرمان "ng new" نگاه کنید A r 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 r Look

• شماتیک های زاویه ای - مقدمه Angular Schematics - an Introduction

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

• استفاده از طرحواره های سفارشی "ng generate". Using Custom "ng generate" Schematics

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

• استقرار با فرمان "ng deploy". Deploying with the "ng deploy" Command

• درک "بارگذاری دیفرانسیل" Understanding "Differential Loading"

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

• کتابخانه های زاویه ای - مقدمه Angular Libraries - an Introduction

• بسته بندی Wrapping Up

تغییرات زاویه ای و ویژگی های جدید Angular Changes and New Features

• ابتدا به عناصر زاویه ای نگاه کنید First Look at Angular Elements

خلاصه دوره Course Roundup

• خلاصه دوره Course Roundup

امتیاز: معرفی TypeScript (برای استفاده از Angular 2) Bonus: TypeScript Introduction (For Angular 2 Usage)

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

• چی و چرا؟ What and Why?

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

• انواع پایه و اولیه Base Types and Primitives

• انواع آرایه و شی Array and Object Types

• نوع استنتاج Type Inference

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

• اختصاص نام مستعار نوع Assigning Type Aliases

• غواصی در توابع و انواع توابع Diving into Functions and Function Types

• درک ژنریک Understanding Generics

• کلاس ها و TypeScript Classes and TypeScript

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

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