آموزش دوره Angular 14 را کامل کنید - توسعه Frontend را یاد بگیرید

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

مقدمه ای بر Angular و TypeScript Introduction to Angular and TypeScript

• زاویه ای چیست (معرفی کوتاه) What is angular (short intro)

• زاویه ای چیست (معرفی کوتاه) What is angular (short intro)

• راه اندازی محیط توسعه Setup development environment

• ایجاد یک پروژه زاویه ای جدید Creating a new angular project

• ایجاد یک پروژه زاویه ای جدید Creating a new angular project

• شروع برنامه زاویه ای شما Starting your angular application

• الگو را کشف کنید و جزء برنامه را پاک کنید Discover the template and clean the app component

• ایجاد رابط کاربری پایه برای لیست کارها. Creating basic ui for todo list.

• مقدمه ای بر تایپ اسکریپت Introduction to typescript

• لینک به کد منبع Link to the source code

مقدمه ای بر Angular و TypeScript Introduction to Angular and TypeScript

• راه اندازی محیط توسعه Setup development environment

• شروع برنامه زاویه ای شما Starting your angular application

• الگو را کشف کنید و جزء برنامه را پاک کنید Discover the template and clean the app component

• ایجاد رابط کاربری پایه برای لیست کارها. Creating basic ui for todo list.

• مقدمه ای بر تایپ اسکریپت Introduction to typescript

• لینک به کد منبع Link to the source code

کامپوننت ها، اتصال داده ها/رویداد و ماژول ها Components, Data/Event Binding and Modules

• جزء چیست What is a component

• جزء چیست What is a component

• اتصال داده یک طرفه One way data binding

• حلقه ngFor برای نمایش وظایف از آرایه ngFor loop to display tasks from array

• حلقه ngFor برای نمایش وظایف از آرایه ngFor loop to display tasks from array

• Binding رویداد (افزودن دکمه) Event Binding (add button)

• Binding رویداد (افزودن دکمه) Event Binding (add button)

• مرجع محلی (افزودن کار جدید) Local reference (add new task)

• اضافه کردن یک کار جدید Adding a new task

• یک کار را حذف کنید Remove a task

• یک کار را حذف کنید Remove a task

• علامت گذاری کار به عنوان انجام شده Mark task as done

• کلاس وظیفه ایجاد و استفاده کنید Create and use task class

• کلاس وظیفه ایجاد و استفاده کنید Create and use task class

• صحافی تک کلاسی مشروط Conditional single class binding

• صحافی تک کلاسی مشروط Conditional single class binding

• لغو یک کار انجام شده Undoing a done task

• ایجاد یک جزء جدید Creating a new component

• اجزاء Components

• اجزای جزوه Handout Components

• اضافه کردن هدر و مقدمه به ماژول ها Adding header and intro to modules

• اضافه کردن هدر و مقدمه به ماژول ها Adding header and intro to modules

• اضافه کردن یک ماژول Adding a module

• اضافه کردن یک ماژول Adding a module

• یک ماژول و کامپوننت تقویم ایجاد کنید Create a calendar module and component

• یک ماژول و کامپوننت تقویم ایجاد کنید Create a calendar module and component

• بسته بندی مواد زاویه ای را اضافه کنید Add angular material package

• بسته بندی مواد زاویه ای را اضافه کنید Add angular material package

• سبک تقویم مواد زاویه ای Style angular material calendar

• سبک تقویم مواد زاویه ای Style angular material calendar

• ماژول ها Modules

• ماژول های جزوه Handout Modules

کامپوننت ها، اتصال داده ها/رویداد و ماژول ها Components, Data/Event Binding and Modules

• اتصال داده یک طرفه One way data binding

• مرجع محلی (افزودن کار جدید) Local reference (add new task)

• اضافه کردن یک کار جدید Adding a new task

• علامت گذاری کار به عنوان انجام شده Mark task as done

• لغو یک کار انجام شده Undoing a done task

• ایجاد یک جزء جدید Creating a new component

• اجزاء Components

• اجزای جزوه Handout Components

• ماژول ها Modules

• ماژول های جزوه Handout Modules

فرم ها، مسیریابی و اعتبارسنجی Forms, Routing and Validation

• مسیریابی Routing

• پیوند داده دو طرفه (تاریخ انتخاب شده در تقویم) Two way databinding (calendar selected date)

• پیوند داده دو طرفه (تاریخ انتخاب شده در تقویم) Two way databinding (calendar selected date)

• مسیرهای پارامتری (ارسال تاریخ از تقویم به لیست وظایف) Parameterized routes (sending date from calendar to task-list)

• NgOnInit NgOnInit

• انتخابگر تاریخ برای فهرست کار Date picker for task-list

• تاریخ دوطرفه databind و task-title Two way databind date and task-title

• رفع ارتفاع خط در لیست کار Fixing line-height in task-list

• رفع ارتفاع خط در لیست کار Fixing line-height in task-list

• با استفاده از یک فرم Using a form

• با استفاده از یک فرم Using a form

• اعتبار سنجی ورودی Input validation

• نمایش پیغام های مختلف اعتبارسنجی خطا Showing different error validation messages

• غیرفعال کردن عناصر فرم بر اساس اعتبار Disabling form elements based on validity

فرم ها، مسیریابی و اعتبارسنجی Forms, Routing and Validation

• مسیریابی Routing

• مسیرهای پارامتری (ارسال تاریخ از تقویم به لیست وظایف) Parameterized routes (sending date from calendar to task-list)

• NgOnInit NgOnInit

• انتخابگر تاریخ برای فهرست کار Date picker for task-list

• تاریخ دوطرفه databind و task-title Two way databind date and task-title

• اعتبار سنجی ورودی Input validation

• نمایش پیغام های مختلف اعتبارسنجی خطا Showing different error validation messages

• غیرفعال کردن عناصر فرم بر اساس اعتبار Disabling form elements based on validity

خدمات، مشاهدات و تزریق Services, Observables and Injection

• بازسازی برای خدمات Refactoring for services

• بازسازی برای خدمات Refactoring for services

• ایجاد یک سرویس برای وظایف Creating a service for tasks

• ایجاد یک سرویس برای وظایف Creating a service for tasks

• پیاده سازی سرویس وظیفه Implementing the task service

• پیاده سازی سرویس وظیفه Implementing the task service

• تزریق خدمات Injecting the service

• تزریق خدمات Injecting the service

• محدوده ارائه دهنده خدمات Service provider scopes

• محدوده ارائه دهنده خدمات Service provider scopes

• خدمات جزوه Handout Services

• انواع مرجع Reference types

• آماده سازی برای پسوندهای واکنشی Preparation for reactive extensions

• استفاده از قابل مشاهده Using observables

• جزوه مشاهدات Handout Observables

• خدمات Services

خدمات، مشاهدات و تزریق Services, Observables and Injection

• خدمات جزوه Handout Services

• انواع مرجع Reference types

• آماده سازی برای پسوندهای واکنشی Preparation for reactive extensions

• استفاده از قابل مشاهده Using observables

• جزوه مشاهدات Handout Observables

• خدمات Services

توسعه زاویه ای پیشرفته (انتقال داده های وب سرور) Advanced Angular Development (Webserver Data Transfer)

• معرفی کوتاه وب سرور Short intro to webserver

• راه‌اندازی دریافت تمام وظایف نقطه پایانی در mockoon Setting up get all tasks endpoint in mockoon

• راه‌اندازی دریافت تمام وظایف نقطه پایانی در mockoon Setting up get all tasks endpoint in mockoon

• راه اندازی HttpClient در Angular Setting up the HttpClient in Angular

• راه اندازی HttpClient در Angular Setting up the HttpClient in Angular

• اتصال angular و mockoon و راه اندازی cors Connecting angular and mockoon and setting up cors

• زمان اجرا در مقابل انواع تایپ اسکریپت Runtime vs typescript types

• ضربه بزنید و نقشه برداری کنید Tap and map

• نگاشت وظایف برای مطابقت با نوع Mapping tasks to match type

• نگاشت وظایف برای مطابقت با نوع Mapping tasks to match type

• ارسال یک کار جدید Posting a new task

• نقطه پایانی برای حذف یک کار Endpoint for deleting a task

• افزودن تاریخ به تمام نقاط پایانی Adding the date to all endpoints

• افزودن تاریخ به تمام نقاط پایانی Adding the date to all endpoints

• اضافه کردن یک کنترل کننده خطای جهانی Adding a global error handler

• اضافه کردن یک کنترل کننده خطای جهانی Adding a global error handler

• اضافه کردن یک سرور ورود به سیستم Adding a log server

• اضافه کردن یک سرور ورود به سیستم Adding a log server

• ایجاد یک شی خطای دقیق Creating a detailed error object

• ایجاد یک شی خطای دقیق Creating a detailed error object

توسعه زاویه ای پیشرفته (انتقال داده های وب سرور) Advanced Angular Development (Webserver Data Transfer)

• معرفی کوتاه وب سرور Short intro to webserver

• اتصال angular و mockoon و راه اندازی cors Connecting angular and mockoon and setting up cors

• زمان اجرا در مقابل انواع تایپ اسکریپت Runtime vs typescript types

• ضربه بزنید و نقشه برداری کنید Tap and map

• ارسال یک کار جدید Posting a new task

• نقطه پایانی برای حذف یک کار Endpoint for deleting a task

ابزارهای کمکی اضافی Additional Utilities

• استخراج اجزا Extracting components

• استخراج اجزا Extracting components

• اتصال داده های ورودی (جزء فرزند) Input data binding (child component)

• داده های خروجی (جزء اصلی) Output data (parent component)

• داده های خروجی (جزء اصلی) Output data (parent component)

• اجزای نمایشی و هوشمند Presentational and smart components

• ایجاد ورودی و خروجی مورد نیاز Making input and output required

• انتخابگرهای مختلف Different selectors

• بخشنامه ها Directives

• لوله های Pipes

• لوله های Pipes

• سخنان پایانی Final words

ابزارهای کمکی اضافی Additional Utilities

• اتصال داده های ورودی (جزء فرزند) Input data binding (child component)

• اجزای نمایشی و هوشمند Presentational and smart components

• ایجاد ورودی و خروجی مورد نیاز Making input and output required

• انتخابگرهای مختلف Different selectors

• بخشنامه ها Directives

• سخنان پایانی Final words

ورزش زاویه ای شما Your Angular Exercise

• دانلود برگه تمرین Download Exercise Sheet

ورزش زاویه ای شما Your Angular Exercise

• دانلود برگه تمرین Download Exercise Sheet