آموزش Angular - The Complete Guide (نسخه 2023)

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

شروع شدن Getting Started

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

• Angular چیست؟ What is Angular?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

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

• CLI غواصی عمیق و عیب یابی CLI Deep Dive & Troubleshooting

• راه اندازی پروژه و برنامه اول Project Setup and First App

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

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

• چگونه از دوره بیشترین بهره را ببرید How to get the Most out of the Course

• TypeScript چیست؟ What is TypeScript?

• اختیاری: TypeScript معرفی سریع Optional: TypeScript Quick Introduction

• یک راه اندازی اولیه پروژه با استفاده از بوت استرپ برای استایلینگ A Basic Project Setup using Bootstrap for Styling

• درباره کد دوره/عکس های فوری کد About the Course Code / Code Snapshots

اصول اولیه The Basics

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

• چگونه یک برنامه Angular بارگذاری و راه اندازی می شود How an Angular App gets Loaded and Started

• اجزاء مهم هستند! Components are Important!

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

• درک نقش AppModule و Component Declaration Understanding the Role of AppModule and Component Declaration

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

• ایجاد کامپوننت با CLI & Nesting Components Creating Components with the CLI & Nesting Components

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

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

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

• تمرین مولفه ها Practicing Components

• [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

• Databinding چیست؟ What is Databinding?

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

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

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

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

• ویژگی ها و رویدادهای قابل اتصال Bindable Properties and Events

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

• مهم: FormsModule برای اتصال دو طرفه مورد نیاز است! Important: FormsModule is Required for Two-Way-Binding!

• دو طرفه - Databinding Two-Way-Databinding

• ترکیب همه اشکال Databinding Combining all Forms of Databinding

• تمرین Databinding Practicing Databinding

• [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

• درک دستورالعمل ها Understanding Directives

• استفاده از ngIf برای خروجی داده به صورت مشروط Using ngIf to Output Data Conditionally

• تقویت ngIf با یک شرط دیگر Enhancing ngIf with an Else Condition

• عناصر یک ظاهر پویا با ngStyle Styling Elements Dynamically with ngStyle

• استفاده از کلاس های CSS به صورت پویا با ngClass Applying CSS Classes Dynamically with ngClass

• خروجی لیست ها با ngFor Outputting Lists with ngFor

• اجرای دستورالعمل ها Practicing Directives

• [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

• دریافت Index هنگام استفاده از ngFor Getting the Index when using ngFor

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

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

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

• ایجاد یک برنامه جدید به درستی Creating a New App Correctly

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

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

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

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

• نوار ناوبری غیر قابل جمع شدن جایگزین Alternative Non-Collapsable Navigation Bar

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

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

• خروجی لیستی از دستور غذاها با ngFor Outputting a List of Recipes with ngFor

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

• کار بر روی کامپوننت ShoppingList Working on the ShoppingListComponent

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

• ایجاد و خروجی لیست خرید Creating and Outputting the Shopping List

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

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

اشکال زدایی Debugging

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

• اشکال زدایی کد در مرورگر با استفاده از Sourcemaps Debugging Code in the Browser Using Sourcemaps

کامپوننت ها و Databinding Deep Dive Components & Databinding Deep Dive

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

• تقسیم برنامه ها به کامپوننت ها Splitting Apps into Components

• نمای کلی صحافی اموال و رویداد Property & 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

• @ViewChild() در Angular 8+ @ViewChild() in Angular 8+

• دسترسی به الگو و DOM با @ViewChild Getting Access to the Template & DOM with @ViewChild

• طرح ریزی محتوا به اجزای با محتوای ng Projecting Content into Components with ng-content

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

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

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

• @ContentChild() در Angular 8+ @ContentChild() in Angular 8+

• دسترسی به محتوای ng با @ContentChild Getting Access to ng-content with @ContentChild

• بسته شدن Wrap Up

• تمرین صحافی اموال و رویداد و کپسولاسیون مشاهده Practicing Property & Event Binding and View Encapsulation

• [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

پروژه دوره - اجزا و پیوند داده Course Project - Components & Databinding

• معرفی Introduction

• افزودن ناوبری با Event Binding و ngIf Adding Navigation with Event Binding and ngIf

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

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

• مطمئن شوید که FormsModule را اضافه کرده اید! Make sure you have FormsModule added!

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

دستورالعمل شیرجه عمیق Directives Deep Dive

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

• ngFor و ngIf Recap ngFor and ngIf Recap

• ngClass و ngStyle Recap ngClass and ngStyle Recap

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

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

• اطلاعات بیشتر در مورد Renderer More about the Renderer

• استفاده از HostListener برای گوش دادن به رویدادهای میزبان Using HostListener to Listen to Host Events

• استفاده از HostBinding برای اتصال به ویژگی های هاست Using HostBinding to Bind to Host Properties

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

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

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

• درک ngSwitch Understanding ngSwitch

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

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

• بستن کرکره از هر کجا Closing the Dropdown From Anywhere

استفاده از خدمات و تزریق وابستگی Using Services & 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 Should It Be?

• تزریق خدمات به خدمات Injecting Services into Services

• استفاده از خدمات برای ارتباطات متقابل Using Services for Cross-Component Communication

• روشی متفاوت برای تزریق خدمات A Different Way Of Injecting Services

• خدمات تمرینی Practicing Services

• [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

پروژه دوره - خدمات و تزریق وابستگی Course Project - Services & 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 (via a Service)

تغییر صفحات با مسیریابی Changing Pages with Routing

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

• چرا به روتر نیاز داریم؟ Why do we need a Router?

• درک پروژه نمونه Understanding the Example Project

• راه اندازی و بارگذاری مسیرها 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

• تمرین و چند گوچا معمولی Practicing and some Common Gotchas

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

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

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

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

• مهم: تطبیق مسیر تغییر مسیر Important: Redirection Path Matching

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

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

• محافظت از مسیرها با canActivate Protecting Routes with canActivate

• محافظت از مسیرهای کودک (تودرتو) با canActivateChild Protecting Child (Nested) Routes with canActivateChild

• استفاده از سرویس احراز هویت جعلی Using a Fake Auth Service

• کنترل ناوبری با canDeactivate Controlling Navigation with canDeactivate

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

• حل کردن Dynamic Data با Resolve Guard Resolving Dynamic Data with the resolve Guard

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

• بسته شدن Wrap Up

پروژه دوره - مسیریابی Course Project - Routing

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

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

• افزودن ناوبری به برنامه Adding Navigation to the App

• علامت گذاری مسیرهای فعال 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

• پاکسازی پروژه Project Cleanup

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

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

• RxJS را نصب کنید Install RxJS

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

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

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

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

• مشاهده پذیرها و شما! Observables & You!

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

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

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

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

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

• نام اشتراک را تغییر داد Changed the Subscription Name

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

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

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

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

• یک فرم نمونه An Example Form

• TD: ایجاد فرم و ثبت کنترل ها TD: Creating the Form and Registering the Controls

• TD: ارسال و استفاده از فرم TD: Submitting and Using the Form

• TD: درک حالت فرم TD: Understanding Form State

• TD: دسترسی به فرم با @ViewChild TD: Accessing the Form with @ViewChild

• TD: افزودن اعتبارسنجی برای بررسی ورودی کاربر TD: Adding Validation to check User Input

• اعتبار سنجی داخلی و استفاده از اعتبارسنجی HTML5 Built-in Validators & Using HTML5 Validation

• TD: استفاده از حالت فرم TD: Using the Form State

• TD: خروجی پیام های خطای اعتبارسنجی TD: Outputting Validation Error Messages

• TD: مقادیر پیش فرض را با ngModel Property Binding تنظیم کنید TD: Set Default Values with ngModel Property Binding

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

• TD: گروه بندی کنترل های فرم TD: Grouping Form Controls

• TD: کنترل دکمه های رادیویی TD: Handling Radio Buttons

• TD: تنظیم و وصله مقادیر فرم TD: Setting and Patching Form Values

• TD: استفاده از داده های فرم TD: Using Form Data

• TD: بازنشانی فرم ها TD: Resetting Forms

• تمرین فرم های الگو محور Practicing Template-Driven Forms

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

• واکنشی: راه اندازی Reactive: Setup

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

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

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

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

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

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

• رفع اشکال Fixing a Bug

• واکنشی: آرایه‌های کنترل‌های فرم (FormArray) Reactive: Arrays of Form Controls (FormArray)

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

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

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

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

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

• تمرین فرم های واکنشی Practicing Reactive Forms

• [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

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

• معرفی Introduction

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

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

• اجازه دادن به انتخاب موارد در لیست Allowing the Selection of Items in the List

• بارگیری موارد لیست خرید در فرم Loading the Shopping List Items into the Form

• به روز رسانی موارد موجود Updating existing Items

• بازنشانی فرم Resetting the Form

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

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

• ایجاد قالب برای فرم ویرایش دستور غذا (واکنشی). Creating the Template for the (Reactive) Recipe Edit Form

• ایجاد فرم برای ویرایش دستور غذاها Creating the Form For Editing Recipes

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

• رفع اشکال Fixing a Bug

• افزودن کنترل‌های عنصر به آرایه فرم Adding Ingredient Controls to a Form Array

• افزودن کنترل های جدید مواد تشکیل دهنده Adding new Ingredient Controls

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

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

• افزودن یک عملکرد حذف و پاک کردن (لغو). Adding a Delete and Clear (Cancel) Functionality

• تغییر مسیر کاربر (پس از حذف یک دستور غذا) Redirecting the User (after Deleting a Recipe)

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

• ارائه خدمات دستور غذا به درستی Providing the Recipe Service Correctly

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

• حذف تمام آیتم های یک FormArray Deleting all Items in a FormArray

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

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

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

• پارامترسازی لوله ها Parametrizing Pipes

• کجا درباره لوله ها بیشتر بیاموزیم Where to learn more about Pipes

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

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

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

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

• لوله های خالص و ناخالص (یا: نحوه "تعمیر" لوله فیلتر) Pure and Impure Pipes (or: How to "fix" the Filter Pipe)

• درک لوله "ناهمگام". Understanding the "async" Pipe

• تمرین لوله ها Practicing Pipes

ایجاد درخواست Http Making Http Requests

• یک IDE جدید A New IDE

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

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

• آناتومی یک درخواست Http The Anatomy of a Http Request

• راه اندازی Backend (Firebase). Backend (Firebase) Setup

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

• دریافت داده ها GETting Data

• استفاده از اپراتورهای RxJS برای تبدیل داده های پاسخ Using RxJS Operators to Transform Response Data

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

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

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

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

• خدمات و اجزای سازنده با هم کار می کنند Services & Components Working Together

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

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

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

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

• مدیریت خطا و تجربه کاربری Error Handling & UX

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

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

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

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

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

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

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

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

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

پروژه دوره - Http Course Project - Http

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

• راه اندازی Backend (Firebase). Backend (Firebase) Setup

• راه اندازی سرویس ذخیره اطلاعات Setting Up the DataStorage Service

• ذخیره سازی دستور العمل ها Storing Recipes

• واکشی دستور العمل ها Fetching Recipes

• تبدیل داده های پاسخ Transforming Response Data

• حل کردن داده ها قبل از بارگذاری Resolving Data Before Loading

• رفع اشکال با Resolver Fixing a Bug with the Resolver

احراز هویت و محافظت از مسیر در Angular Authentication & Route Protection in Angular

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

• احراز هویت چگونه کار می کند How Authentication Works

• افزودن صفحه تأیید Adding the Auth Page

• جابجایی بین حالت های Auth Switching Between Auth Modes

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

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

• مطمئن شوید که دستور العمل ها را در باطن خود دارید! Make sure you got Recipes in your backend!

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

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

• افزودن Loading Spinner و Error Handling Logic Adding a Loading Spinner & Error Handling Logic

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

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

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

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

• انعکاس وضعیت Auth در رابط کاربری Reflecting the Auth State in the UI

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

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

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

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

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

• اضافه کردن یک محافظ تایید Adding an Auth Guard

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

اجزای دینامیک Dynamic Components

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

• افزودن یک جزء Alert Modal Adding an Alert Modal Component

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

• با استفاده از ngIf Using ngIf

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

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

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

• اتصال داده و اتصال رویداد Data Binding & Event Binding

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

ماژول های Angular و بهینه سازی برنامه های Angular Angular Modules & Optimizing Angular Apps

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

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

• تجزیه و تحلیل AppModule Analyzing the AppModule

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

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

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

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

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

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

• درک ماژول اصلی Understanding the Core Module

• اضافه کردن یک ماژول ویژگی Auth Adding an Auth Feature Module

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

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

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

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

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

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

• منابع و لینک های مفید Useful Resources & Links

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

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

• آماده سازی و مراحل استقرار Deployment Preparation & Steps

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

• استقرار برنامه های Angular Deploying Angular Applications

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

• مسیریابی سرور در مقابل مسیریابی مرورگر Server Routing vs Browser Routing

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

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

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

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

• اجزای مستقل اکنون پایدار هستند Standalone Components Are Now Stable

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

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

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

• خدمات و اجزای مستقل Services & Standalone Components

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

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

• خلاصه Summary

امتیاز: کار با NgRx در پروژه ما Bonus: Working with NgRx in our Project

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

• Application State چیست؟ What is Application State?

• NgRx چیست؟ What is NgRx?

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

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

• درک و افزودن اقدامات Understanding & Adding Actions

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

• انتخاب دولت Selecting State

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

• اقدامات چندگانه Multiple Actions

• آماده سازی به روز رسانی و حذف اقدامات Preparing Update & Delete Actions

• به روز رسانی و حذف مواد تشکیل دهنده Updating & Deleting Ingredients

• گسترش دولت Expanding the State

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

• حذف مدیریت حالت مؤلفه اضافی Removing Redundant Component State Management

• اولین خلاصه و پاکسازی First Summary & Clean Up

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

• تنظیم Auth Reducer & Actions Setting Up Auth Reducer & Actions

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

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

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

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

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

• مهم: اجتناب از @Effect Important: Avoid @Effect

• جلوه ها و مدیریت خطا Effects & Error Handling

• از طریق NgRx Effects وارد شوید Login via 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

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

• فروشگاه روتر The Router Store

• شروع با NgRx برای دستور العمل ها Getting Started with NgRx for Recipes

• واکشی اطلاعات جزئیات دستور غذا Fetching Recipe Detail Data

• واکشی دستور العمل ها و استفاده از Resolver Fetching Recipes & Using the Resolver

• رفع تغییر مسیر تأیید Fixing the Auth Redirect

• به روز رسانی، حذف و اضافه کردن دستور العمل ها Update, Delete and Add Recipes

• ذخیره سازی دستور غذاها از طریق افکت ها Storing Recipes via Effects

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

• بسته شدن Wrap Up

• نحو جایگزین NgRx Alternative NgRx Syntax

• منابع و لینک های مفید Useful Resources & Links

امتیاز: Angular Universal Bonus: Angular Universal

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

• Angular Universal & ModuleMapLoader Angular Universal & ModuleMapLoader

• اضافه کردن Angular Universal Adding Angular Universal

• افزودن Angular Universal با NestJS Adding Angular Universal with NestJS

• استقرار برنامه های جهانی Deploying Universal Apps

• مهم: سخنرانی های باقی مانده Important: Remaining Lectures

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

• شروع کار با Angular Universal Getting Started with Angular Universal

• کار بر روی ماژول برنامه Working on the App Module

• اضافه کردن یک گردش کار ساخت سمت سرور Adding a Server-Side Build Workflow

• اضافه کردن سرور NodeJS Adding a NodeJS Server

• پیش رندر کردن برنامه در سرور Pre-Rendering the App on the Server

• مراحل بعدی Next Steps

• گوچاهای جهانی زاویه ای Angular Universal Gotchas

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

• ساخت انیمیشن ها با Angular 4+ Making Animations Work with Angular 4+

• معرفی Introduction

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

• محرک ها و وضعیت انیمیشن ها Animations 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

• ذخیره دارایی‌های پویا و نشانی‌های وب Caching Dynamic Assets & URLs

• پیوندها و منابع بیشتر Further Links & Resources

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

• درباره این بخش About this Section

• معرفی Introduction

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

• تجزیه و تحلیل تنظیمات تست (آنطور که توسط CLI ایجاد شده است) Analyzing the Testing Setup (as created by the CLI)

• اجرای آزمایشات (با CLI) Running Tests (with the CLI)

• افزودن کامپوننت و برخی از تست های برازش Adding a Component and some fitting Tests

• تست وابستگی ها: مؤلفه ها و خدمات Testing Dependencies: Components and Services

• شبیه سازی وظایف Async Simulating Async Tasks

• استفاده از "fakeAsync" و "تیک" Using "fakeAsync" and "tick"

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

• منابع بیشتر و بعد کجا برویم Further Resources & Where to Go Next

Angular به عنوان یک پلتفرم و نگاهی دقیق تر به CLI Angular as a Platform & Closer Look at the CLI

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

• نگاهی دقیق تر به "ng new" A Closer Look at "ng new"

• IDE و راه اندازی پروژه IDE & Project Setup

• آشنایی با فایل های پیکربندی Understanding the Config Files

• دستورات مهم CLI Important CLI Commands

• فایل "angular.json" - نگاهی دقیق تر The "angular.json" File - A Closer Look

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

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

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

• به روز رسانی روان پروژه ها با "ng update" Smooth Updating of Projects with "ng update"

• استقرار ساده شده با "ng deploy" Simplified Deployment with "ng deploy"

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

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

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

• بسته شدن Wrap Up

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

• اولین نگاه به عناصر زاویه ای A First Look At Angular Elements

خلاصه دوره Course Roundup

• با تشکر از حضور در دوره! Thanks for being part of the course!

• امتیاز: محتوای بیشتر! Bonus: More Content!

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

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

• چی چرا؟ What & Why?

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

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

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

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

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

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

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

• درک ژنریک Understanding Generics

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

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

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

• منابع ماژول Module Resources