آموزش Angular 11 را کامل کنید - راهنمای نهایی - با برنامه دنیای واقعی

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

مقدمه و مبانی [فقط نظریه] Introduction & Basics [Theory only]

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

• Angular Introduction Angular Introduction

• از کجا باید عملی را شروع کرد Where to Start Practical

• نحوه اجرای کد منبع [برای توسعه دهندگان هسته Asp.Net] How to run Source Code [for Asp.Net Core Developers]

• کد منبع Node.js برای توسعه دهندگان غیر Asp .Net ارائه شده است Node.js Source Code is provided for Non-Asp .Net Developers

• اگر تایپ اسکریپت را ندانم چه می شود؟ What if I don't know TypeScript?

• اهداف زاویه ای Angular Goals

• فرآیند تدوین کد در Angular Code Compilation Process in Angular

• بایدها و نبایدهای Angular Do's and Don'ts of Angular

• بلوک های ساختمان Building Blocks

• معماری زاویه ای Angular Architecture

• بررسی اجمالی بسته های Angular Overview of Angular Packages

• ساختار پوشه برنامه App Folder Structure

• مبانی زاویه ای Angular Basics

اولین برنامه در Angular [عملی از اینجا شروع می شود] First App in Angular [Practical Starts Here]

• محیط راه اندازی Setting-up Environment

• اولین برنامه را ایجاد کنید Create First App

• بوت استرپ را اضافه کنید Add Bootstrap

• Bootstrap NavBar را اضافه کنید Add Bootstrap NavBar

• اجزای سازنده و تودرتو Create & Nest Components

• مسیریابی اولیه را ایجاد کنید Create Basic Routing

• Angular Basic App Angular Basic App

• تخصیص جادوگر: ایجاد جادوگر ساده با استفاده از مسیریابی زاویه ای Wizard Assignment: Creating Simple Wizard using Angular Routing

اتصالات داده، ngFor، مدیریت سبک، لوله‌ها، دستورالعمل‌های داخلی Data Bindings, ngFor, Style Management, Pipes, Built-in Directives

• داشبورد ایجاد کنید Create Dashboard

• نحوه رسیدگی: خطا: خاصیت اولیه ساز ندارد How to handle: Error: Property has no initializer

• ngFor & Nested ngFor ngFor & Nested ngFor

• اتصالات داده Data Bindings

• Handle Dynamic Style & ngClass Handle Dynamic Style & ngClass

• ngIf و ngIf-else و ng-template ngIf & ngIf-else & ng-template

• لوله های داخلی Built-in Pipes

• ngSwitch ngSwitch

• اتصالات داده ها و دستورالعمل ها و لوله های داخلی Data Bindings and Built-in Directives and Pipes

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

• ماژول ها Modules

• خدمات و DI Services & DI

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

تماس‌های RxJS و REST API RxJS & REST API calls

• RxJS، Observable و Observer چیست What is RxJS, Observable and Observer

• نحوه اجرای کد منبع node.js [برای توسعه دهندگان هسته ای غیر Asp.Net] How to run node.js source code [for to Non-Asp.Net Core Developers]

• معرفی AJAX AJAX Introduction

• دریافت کنید [اگر توسعه‌دهنده هسته‌ای غیر Asp.Net هستید، رد شوید] Get [Skip if you are Non-Asp.Net Core Developer]

• ایجاد پروژه در ویژوال استودیو 2022 [اگر برنامه نویس غیر Asp.Net هستید از آن بگذرید] Creating Project in Visual Studio 2022 [Skip if you are Non-Asp.Net Developer]

• درخواست را در Angular دریافت کنید Get Request in Angular

• پست [اگر توسعه‌دهنده هسته‌ای غیر Asp.Net هستید، رد شوید] Post [Skip if you are Non-Asp.Net Core Developer]

• درخواست ارسال در Angular Post Request in Angular

• [اگر توسعه‌دهنده هسته‌ای غیر Asp.Net هستید، رد شوید] Put [Skip if you are Non-Asp.Net Core Developer]

• درخواست را در Angular قرار دهید Put Request in Angular

• حذف کنید [اگر برنامه‌نویس هسته‌ای غیر Asp.Net هستید، رد شوید] Delete [Skip if you are Non-Asp.Net Core Developer]

• حذف درخواست در Angular Delete Request in Angular

• جستجو [اگر توسعه‌دهنده هسته‌ای غیر Asp.Net هستید، رد شوید] Search [Skip if you are Non-Asp.Net Core Developer]

• جستجو (دریافت درخواست) در Angular Search (Get request) in Angular

• RxJS قابل مشاهده - نقشه RxJS Observable - Map

• JSON-Server API فراخوانی می کند JSON-Server API calls

احراز هویت و امنیت Authentication & Security

• احراز هویت کاربر در Asp.Net Core [در صورتی که توسعه‌دهنده هسته Asp.Net نیست از آن بگذرید] User Authentication in Asp.Net Core [Skip if Non-Asp.Net Core Developer]

• احراز هویت کاربر در Angular User Authentication in Angular

• درک JWT Understanding JWT

• احراز هویت JWT در Asp.Net Core [اگر Asp.Net Core Developer از آن عبور کنید] JWT Authentication in Asp.Net Core [Skip if Asp.Net Core Developer]

• احراز هویت JWT در Angular JWT Authentication in Angular

• رهگیرهای Http Http Interceptors

• 401 پاسخ غیرمجاز را با استفاده از رهگیرها دریافت کنید Catch 401 UnAuthorized Responses using Interceptors

• Can Activate Guard CanActivate Guard

• احراز هویت مبتنی بر نقش Role Based Authentication

• جلوگیری از XSRF (جعل درخواست متقابل سایت) Prevent XSRF (Cross Site Request Forgery)

• جلوگیری از XSS (اسکریپت بین سایت) Prevent XSS (Cross Site Scripting)

قالب‌های مبتنی بر الگو Template Driven Forms

• CheckBox، RadioButton، DropDownList CheckBox, RadioButton, DropDownList

• اعتبارسنجی در قالب‌های مبتنی بر الگو Validations in Template Driven Forms

• اعتبار سنجی های سفارشی در قالب های مبتنی بر الگو Custom Validations in Template Driven Forms

• اعتبارسنجی سفارشی فیلد متقاطع در قالب‌های مبتنی بر الگو Cross Field Custom Validations in Template Driven Forms

• اعتبارسنجی‌های سفارشی همگام‌سازی در فرم‌های مبتنی بر الگو با تماس‌های REST-API Async Custom Validations in Template Driven Forms with REST-API Calls

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

• درک و ایجاد فرم های واکنشی Understand & Create Reactive Forms

• دکمه های رادیویی Radio Buttons

• دکمه های رادیویی پویا Dynamic Radio Buttons

• لیست کشویی پویا Dynamic DropDownList

• چک باکس CheckBox

• ارزش تغییرات قابل مشاهده است valueChanges Observable

• setValue، patchValue، تنظیم مجدد setValue, patchValue, reset

• گروه‌های فرم تودرتو Nested Form Groups

• آرایه ها را تشکیل دهید Form Arrays

• فرم ساز Form Builder

• اعتبار سنجی در فرم های واکنشی Validations in Reactive Forms

• پیام های خطای اعتبارسنجی را اضافه کنید Add Validation Error Messages

• اعتبار سنجی سفارشی Custom Validations

• اعتبارسنجی میدانی متقاطع Cross Field Validations

• فرم واکنشی را ارسال کنید Submit Reactive Form

• تصحیح فیلد skillLevel در فرم واکنشی Correction on skillLevel field in Reactive Form

• اعتبارسنجی‌ها با تماس REST API Async Validations with REST API Call

ارتباط مؤلفه Component Communication

• ارتباط والدین با کودک - با استفاده از Input Binding Parent To Child Communication - using Input Binding

• ارتباط کودک با والدین - با استفاده از اتصال خروجی با رویدادهای سفارشی Child To Parent Communication - using Output Binding with Custom Events

• والدین به فرزند - با استفاده از ViewChild Parent to Child - using ViewChild

• والدین به فرزند - با استفاده از ViewChildren Parent to Child - using ViewChildren

• ارتباط مؤلفه با استفاده از خدمات Component Communication using Services

• RxJS مشاهدات سفارشی Custom RxJS Observables

• موضوع RxJS RxJS Subject

• RxJS BehaviorSubject RxJS BehaviorSubject

• ارسال محتوا از والدین به فرزند Pass Content from Parent to Child

• Child to Grand Child - با استفاده از ContentChild Child to Grand Child - using ContentChild

• Child to Grand Child - با استفاده از ContentChildren Child to Grand Child - using ContentChildren

• ElementRef ElementRef

اشکال زدایی و استقرار خودکار Debugging and Auto-Deployment

• اشکال زدایی کد Angular Debugging the Angular Code

• با استفاده از «Gulp» فرآیند «ng build» را خودکار کنید Make 'ng build' process automatic using 'Gulp'

قلاب چرخه زندگی Life Cycle Hooks

• مروری بر قلاب های چرخه زندگی Overview of Life Cycle Hooks

• ngOnChanges ngOnChanges

• ngOnInit ngOnInit

• ngDoCheck ngDoCheck

• ngAfterContentInit و ngAfterContentChecked ngAfterContentInit and ngAfterContentChecked

• ngAfterViewInit، ngAfterViewChecked ngAfterViewInit, ngAfterViewChecked

• ngOnDestroy ngOnDestroy

• قلاب چرخه حیات Lifecycle Hooks

لوله - شیرجه عمیق Pipes - Deep Dive

• لوله سفارشی ساده Simple Custom Pipe

• لوله سفارشی پارامتر شده Parameterized Custom Pipe

• لوله سفارشی پیچیده Complex Custom Pipe

• لوله های خالص (در مقابل) لوله های Inpure Pure Pipes (vs) Inpure Pipes

• صفحه بندی سمت مشتری با استفاده از لوله سفارشی Client-Side Paging using Custom Pipe

• لوله ناهمگام Async Pipe

• لوله های Pipes

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

• دستورالعمل های ویژگی (در مقابل دستورالعمل های ساختاری). Attribute Directives (vs) Structural Directives

• دستورالعمل های سفارشی Custom Directives

• دریافت پارامترها با استفاده از ویژگی های ورودی در دستورالعمل ها Receive Parameters using Input Properties in Directives

• HostListener HostListener

• HostBinding HostBinding

• Renderer2 Renderer2

• دستورالعمل ساختاری سفارشی Custom Structural Directive

• ارائه دهنده از راه دور Distance Presenter

مسیریابی پیشرفته Advanced Routing

• پارامترهای مسیر Route Parameters

• مسیرهای کودک Child Routes

• مسیرهای تودرتو در AdminModule Nested Routes in AdminModule

• مسیرهای تودرتو در EmployeeModule Nested Routes in EmployeeModule

• رویدادهای روتر Router Events

• ثبت سمت سرور با استفاده از رویدادهای روتر Server Side Logging using Router Events

• CanDeactivate Guard CanDeactivate Guard

تصاوير متحرك Animations

• مقدمه ای بر انیمیشن ها Introduction to Animations

• انیمیشن محو شدن Fade Animation

• انیمیشن Slide-Up Slide-Up Animation

• انیمیشن بزرگنمایی Zoom-Up Animation

• زوم-سمت چپ انیمیشن Zoom-Left Animation

• انیمیشن اسلاید-چپ یا راست Slide-Left or Right Animation

• انیمیشن KeyFrame KeyFrame Animation

ماژول های ویژگی Feature Modules

• مقدمه ای بر ماژول های ویژگی Introduction to Feature Modules

• ساختار پوشه مناسب برای برنامه های سازمانی Proper Folder Structure for Enterprise Apps

• ماژول مشترک Shared Module

• بارگذاری تنبل ماژول ها Lazy Loading of Modules

• استراتژی پیش بارگذاری ماژول های بارگذاری تنبل Preloading Strategy of Lazy Loading Modules

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

• برای اجزای پویا آماده شوید Prepare for Dynamic Components

• منوی Masters را به صورت پویا آماده کنید Prepare Masters Menu Dynamically

• بارگذاری کامپوننت ها به صورت پویا در زبانه ها Load Components Dynamically into Tabs

• اتصال داده به اجزای پویا Data Binding to Dynamic Components

• اجزای پویا را از بین ببرید Destroy Dynamic Components

تکمیل پروژه دوره - مدیر وظیفه Finalizing Course Project - Task Manager

• استاد کشورها Countries Master

• مرتب سازی در کشورها استاد Sorting in Countries Master

• استاد مکان های مشتری Client Locations Master

• استاد اولویت های کار Task Priorities Master

• استاد وضعیت کار Task Status Master

• ایجاد مسیرها برای کارمندان Create Routes for Employee

• تشخیص دهید که آیا قبلاً وارد شده اید یا خیر Detect if already Logged-in

• جداول برای وظایف ایجاد کنید Create Tables for Tasks

• صفحه کار ایجاد کنید Create Task Page

• صفحه وظایف Tasks Page

• کلاس های متنی را به Tasks اعمال کنید Apply Contextual Classes to Tasks

• صفحه وضعیت وظیفه را به روز کنید Update Task Status Page

تست واحد و مناطق زاویه ای Unit Testing & Angular Zones

• مبانی تست واحد در Angular Unit Testing Basics in Angular

• تست واحد بر روی کامپوننت ها Unit Testing on Components

• مناطق زاویه ای Angular Zones

جنس زاویه ای (جدید) Angular Material (New)

• چه پروژه ای را با Angular Material توسعه می دهیم؟ What Project we develop with Angular Material?

• شروع کار با متریال زاویه ای Getting Started with Angular Material

• ایجاد رابط کاربری پایه Create Basic UI

• دکمه ها Buttons

• ورودی ها Inputs

• ورودی ها (پیشرفته) Inputs (Advanced)

• انتخاب می کند Selects

• انتخاب می کند (پیشرفته) Selects (Advanced)

• اعتبار سنجی در ورودی های مواد Validations on Material Inputs

• ErrorStateMatcher ErrorStateMatcher

• تکمیل خودکار Autocomplete

• تکمیل خودکار با درخواست HTTP Autocomplete with HTTP Request

• چک باکس Checkbox

• چک باکس های متعدد با نامشخص Multiple Checkboxes with Indeterminate

• رادیو Radio

• تاریخ انتخاب Date-Picker

• انتخابگر تاریخ (پیشرفته) Date-Picker (Advanced)

• انتخاب کننده محدوده تاریخ Date-Range-Picker

• دکمه-تغییر Button-Toggle

• چیپس Chips

• تراشه های قابل انتخاب Selectable Chips

• تراشه با ورودی و تکمیل خودکار - قسمت 1 Chips with Input and Autocomplete - Part 1

• تراشه با ورودی و تکمیل خودکار - قسمت 2 Chips with Input and Autocomplete - Part 2

• جدول Table

• جدول - منبع داده Table - DataSource

• جدول - صفحه‌نگار Table - Paginator

• جدول - مرتب سازی Table - Sort

• جدول - ردیف پاورقی - قسمت 1 Table - Footer Row - Part 1

• جدول - ردیف پاورقی - قسمت 2 Table - Footer Row - Part 2

• جدول - Progress Spinner Table - Progress Spinner

• جدول - فیلتر Table - Filter

• نوار ابزار Toolbar

• طرح بندی انعطاف پذیر زاویه ای Angular Flex Layout

• چیدمان انعطاف پذیر پاسخگو Responsive Flex Layout

• منو Menu

• پنل توسعه Expansion Panel

• نشان Badge

• راهنمای ابزار Tooltip

• کشو یا Sidenav Drawer or Sidenav

• فهرست کنید List

• فهرست گرید Grid List

• فهرست گرید (پیشرفته) Grid List (Advanced)

• شبکه پاسخگو با طرح فلکس Responsive Grid with Flex Layout

• آکاردئون Accordion

• نمودارهای بالا Highcharts

• نوار پیشرفت Progress Bar

• استپر Stepper

• پروژه هتل - جستجوی هتل - قسمت 1 Hotel Project - Search Hotel - Part 1

• پروژه هتل - جستجوی هتل - قسمت 2 Hotel Project - Search Hotel - Part 2

• پروژه هتل - جستجوی هتل - قسمت 3 Hotel Project - Search Hotel - Part 3

• پروژه هتل - جستجوی هتل - قسمت 4 Hotel Project - Search Hotel - Part 4

• کارت ها Cards

• پروژه هتل - اتاق را انتخاب کنید - قسمت 1 Hotel Project - Choose Room - Part 1

• پروژه هتل - اتاق را انتخاب کنید - قسمت 2 Hotel Project - Choose Room - Part 2

• Slide Toggle Slide Toggle

• پروژه هتل - اطلاعات شخصی Hotel Project - Personal Information

• پروژه هتل - اطلاعات مهمانان Hotel Project - Guests Information

• زبانه ها Tabs

• در حال نهایی کردن صفحه "رزرو جدید". Finalizing "New Booking" Page

• پروژه هتل - جدول لیست رزرو - قسمت 1 Hotel Project - Bookings List Table - Part 1

• پروژه هتل - جدول لیست رزرو - قسمت 2 Hotel Project - Bookings List Table - Part 2

• جدول - انتخاب با چک باکس Table - Selection with Checkboxes

• برگه پایین Bottom Sheet

• گفتگو Dialog

• گفتگو (پیشرفته) - قسمت 1 Dialog (Advanced) - Part 1

• گفتگو (پیشرفته) - قسمت 2 Dialog (Advanced) - Part 2

• گفتگو (پیشرفته) - قسمت 3 Dialog (Advanced) - Part 3

• گفتگو (پیشرفته) - قسمت 4 Dialog (Advanced) - Part 4

• گفتگو (پیشرفته) - قسمت 5 Dialog (Advanced) - Part 5

• نوار اسنک یا اعلان ها Snackbar or Notifications

• نوار اسنک سفارشی Custom Snackbar

امتیاز: توابع جاوا اسکریپت Bonus: JavaScript Functions

• ایجاد توابع Creating Functions

• توابع بدون آرگومان و بازگشت Functions with no Arguments and Return

• تابع تابع دیگری را فرا می خواند Function Calls Another Function

• آرگومان های پیش فرض Default Arguments

• محدوده متغیرها Scope of Variables

• توابع پاسخ به تماس Callback Functions

• setTimeout setTimeout

• setInterval setInterval

امتیاز: اشیاء جاوا اسکریپت Bonus: JavaScript Objects

• لفظ شیء Object Literals

• این کلمه کلیدی this keyword

• سناریوهای دنیای واقعی و اشکال زدایی JS Real World Scenarios and JS Debugging

• افزودن اعضا از خارج از شی Adding Members From Outside of Object

• دسترسی به Properties Accessing Properties

• توابع پیکان Arrow Functions

امتیاز: TypeScript Essentials Bonus: TypeScript Essentials

• مقدمه ای بر TypeScript Introduction to TypeScript

• اولین برنامه در TypeScript First App in TypeScript

• انواع داده ها Data Types

• لفظ شیء Object Literals

• کلاس ها Classes

• سازندگان Constructors

• آرایه از اشیاء Array of Objects

• وراثت Inheritance

• دسترسی به اصلاح کننده ها Access Modifiers

• رابط ها Interfaces

کلمات پایانی Final Words

• چه چیزی در Angular 11 جدید است؟ What's New in Angular 11?

• پاداش: 6 دلار - کوپن های تخفیف برای دوره های Udemy دیگر Bonus: $6 - Discount Coupons for my other Udemy Courses