آموزش Angular 15 - راهنمای عملی مبتدی [2023] - آخرین آپدیت

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

معرفی Introduction

• معرفی Introduction

• Angular چیست؟ What is Angular?

• نحوه استفاده از این دوره How to Use this Course

• اگر گیر کرده اید و خطا دارید If You Get stuck and Having Errors

• اگر گیر کرده اید و خطا دارید If You Get stuck and Having Errors

• کامپوننت ها، ماژول ها، خدمات در Angular Components, Modules, Services in Angular

• کامپوننت ها، ماژول ها، خدمات در Angular Components, Modules, Services in Angular

معرفی Introduction

• معرفی Introduction

• Angular چیست؟ What is Angular?

• نحوه استفاده از این دوره How to Use this Course

ابزار و محیط Tools and Environment

• نصب ویرایشگر کدنویسی ما (IDE) Installing our Coding Editor (IDE)

• نصب NodeJs Installing NodeJs

• نصب Angular Installing Angular

• نصب Angular Installing Angular

• ایجاد پروژه Creating the Project

• ایجاد پروژه Creating the Project

• اجرای برنامه Running the Application

• برنامه های افزودنی برای سرعت بخشیدن به بهره وری کدنویسی ما Extensions To Speed Up Our Coding Productivity

• برنامه های افزودنی برای سرعت بخشیدن به بهره وری کدنویسی ما Extensions To Speed Up Our Coding Productivity

ابزار و محیط Tools and Environment

• نصب ویرایشگر کدنویسی ما (IDE) Installing our Coding Editor (IDE)

• نصب NodeJs Installing NodeJs

• اجرای برنامه Running the Application

کشف API Discovering the API

• دریافت داده های فیلم - ثبت API فیلم ها Getting The Movies Data - Movies API Registration

• نصب Thunder Client و کشف API Installing Thunder Client and Discovering the API

کشف API Discovering the API

• دریافت داده های فیلم - ثبت API فیلم ها Getting The Movies Data - Movies API Registration

• نصب Thunder Client و کشف API Installing Thunder Client and Discovering the API

شروع به ساخت کاتالوگ فیلم کنید Start Building the Movies Catalog

• Normalize.css - CSS مرورگر را بازنشانی کنید Normalize.css - Reset Browser CSS

• Normalize.css - CSS مرورگر را بازنشانی کنید Normalize.css - Reset Browser CSS

• نصب فونت Installing Fonts

• نصب سیستم شبکه Installing a Grid System

• زیباتر را پیکربندی کنید Configure Prettier

• کد Code

• کد Code

شروع به ساخت کاتالوگ فیلم کنید Start Building the Movies Catalog

• نصب فونت Installing Fonts

• نصب سیستم شبکه Installing a Grid System

• زیباتر را پیکربندی کنید Configure Prettier

Application Shell Application Shell

• Angular Components - Application Header Angular Components - Application Header

• کامپوننت هدر قالب Templating Header Component

• کامپوننت هدر قالب Templating Header Component

• کامپوننت هدر یک ظاهر طراحی شده Styling Header Component

• پاورقی برنامه Application Footer

• صفحه اصلی و صفحات فیلم Home Page and Movies Pages

• اضافه کردن مسیرها Add Routes

• اضافه کردن مسیرها Add Routes

• ایجاد سرویس فیلم Create Movies Service

• ایجاد سرویس فیلم Create Movies Service

• سرویس برای دریافت فیلم های محبوب Service for Getting Popular Movies

• سرویس برای دریافت فیلم های محبوب Service for Getting Popular Movies

• نمایش داده های API در صفحه اصلی Display the API Data in Home Page

• کد بخش Section Code

Application Shell Application Shell

• Angular Components - Application Header Angular Components - Application Header

• کامپوننت هدر یک ظاهر طراحی شده Styling Header Component

• پاورقی برنامه Application Footer

• صفحه اصلی و صفحات فیلم Home Page and Movies Pages

• نمایش داده های API در صفحه اصلی Display the API Data in Home Page

بنر اسلایدر صفحه اصلی Home Page Slider Banner

• جزء Silder Silder Component

• جزء Silder Silder Component

• طرح بندی اجزای Silder Silder Component Layout

• یک ظاهر طراحی بنر سیلدر - پس زمینه Silder Banner Styling - Background

• یک ظاهر طراحی بنر سیلدر - متا Silder Banner Styling - Meta

• استفاده از آیکون های متریال Using Material Icons

• استفاده از آیکون های متریال Using Material Icons

• از ورودی های مؤلفه برای انتقال داده های فیلم استفاده کنید Use Component Inputs to Pass the Movies Data

• برای ایجاد اسلایدها روی فیلم ها حلقه بزنید Loop Over the Movies ngFor To Create the Slides

• برای ایجاد اسلایدها روی فیلم ها حلقه بزنید Loop Over the Movies ngFor To Create the Slides

• تعریف مدل فیلم Define Movie Model

• تعریف مدل فیلم Define Movie Model

• فیلدهای اسلایدر را با داده های واقعی فیلم جایگزین کنید Replace Slider Fields With Real Movies Data

• انیمیشن Slider - انیمیشن Angular را نصب کنید Slider Animation - Install Angular Animation

• انیمیشن Slider - انیمیشن Angular را نصب کنید Slider Animation - Install Angular Animation

• انیمیشن اسلایدر - مبانی انیمیشن Slider Animation - Animation Basics

• نمایش و پنهان کردن اسلایدها بر اساس فهرست Show and Hide Slides Based on Index

• نمایش و پنهان کردن اسلایدها بر اساس فهرست Show and Hide Slides Based on Index

• تنظیم تایمر اسلاید Setting Slide Timer

• تنظیم تایمر اسلاید Setting Slide Timer

• کد بخش Section Code

بنر اسلایدر صفحه اصلی Home Page Slider Banner

• طرح بندی اجزای Silder Silder Component Layout

• یک ظاهر طراحی بنر سیلدر - پس زمینه Silder Banner Styling - Background

• یک ظاهر طراحی بنر سیلدر - متا Silder Banner Styling - Meta

• از ورودی های مؤلفه برای انتقال داده های فیلم استفاده کنید Use Component Inputs to Pass the Movies Data

• فیلدهای اسلایدر را با داده های واقعی فیلم جایگزین کنید Replace Slider Fields With Real Movies Data

• انیمیشن اسلایدر - مبانی انیمیشن Slider Animation - Animation Basics

• کد بخش Section Code

صفحه اصلی فیلم - برنامه های تلویزیونی Home Page Movies - TV Shows

• کامپوننت بنر آیتم ها Items Banner Component

• کامپوننت بنر آیتم ها Items Banner Component

• جزء آیتم Item Component

• جزء آیتم Item Component

• دریافت خدمات مورد نیاز Get The Required Services

• دریافت خدمات مورد نیاز Get The Required Services

• تغییر نام یک کامپوننت - چه چیزی را باید در نظر گرفت Renaming a Component - What to Consider

• رندر با داده واقعی Rendering with Real Data

• دریافت اندازه پوستر کوچکتر برای بارگذاری سریع Getting Smaller Poster Sizes for Fast Loading

• تنظیم انواع برای Movie و MovieDto Adjust Types for Movie and MovieDto

• تنظیم انواع برای Movie و MovieDto Adjust Types for Movie and MovieDto

• سرویس‌ها را برای برگرداندن تعداد مشخصی از فیلم‌ها تنظیم کنید Adjust the Services to Return Specific Number of Movies

• سرویس‌ها را برای برگرداندن تعداد مشخصی از فیلم‌ها تنظیم کنید Adjust the Services to Return Specific Number of Movies

• کد بخش Section Code

صفحه اصلی فیلم - برنامه های تلویزیونی Home Page Movies - TV Shows

• تغییر نام یک کامپوننت - چه چیزی را باید در نظر گرفت Renaming a Component - What to Consider

• رندر با داده واقعی Rendering with Real Data

• دریافت اندازه پوستر کوچکتر برای بارگذاری سریع Getting Smaller Poster Sizes for Fast Loading

• کد بخش Section Code

صفحه فیلم ها Movies Page

• طرح بندی صفحه فیلم ها Movies Page Layout

• صفحه بندی فیلم ها را به سرویس اضافه کنید Add Movies Pagination To Service

• PrimeNG Components Library را نصب کنید Install PrimeNG Components Library

• افزودن مولفه صفحه بندی Add Pagination Component

• پیمایش از طریق صفحه بندی Navigate Through Pagination

• کد بخش Section Code

صفحه فیلم ها Movies Page

• طرح بندی صفحه فیلم ها Movies Page Layout

• صفحه بندی فیلم ها را به سرویس اضافه کنید Add Movies Pagination To Service

• PrimeNG Components Library را نصب کنید Install PrimeNG Components Library

• افزودن مولفه صفحه بندی Add Pagination Component

• پیمایش از طریق صفحه بندی Navigate Through Pagination

• کد بخش Section Code

صفحه جزئیات فیلم Movie Detail Page

• جزء جزئیات فیلم Movie Detail Component

• روتر صفحه فیلم و شناسه فیلم را به عنوان پارامتر عبور دهید Movie Page Router and Pass Movie ID as Parameter

• شناسه فیلم را از URL دریافت کنید Get Movie ID from the URL

• سرویس جزئیات فیلم Movie Detail Service

• سرویس جزئیات فیلم Movie Detail Service

• از اسلایدر به عنوان بنر بالا استفاده کنید Use the Slider as a Top Banner

• از اسلایدر به عنوان بنر بالا استفاده کنید Use the Slider as a Top Banner

• از Tabs Component استفاده کنید Use Tabs Component

• از Tabs Component استفاده کنید Use Tabs Component

• نادیده گرفتن استایل برگه ها Override Styling of the Tabs

• نادیده گرفتن استایل برگه ها Override Styling of the Tabs

• برگه نمای کلی فیلم Movie Overview Tab

• سرویس تریلر فیلم Movie Trailers Service

• پخش کننده یوتیوب را برای تریلرها جاسازی کنید Embed YouTube Player For Trailers

• پخش کننده یوتیوب را برای تریلرها جاسازی کنید Embed YouTube Player For Trailers

• جابه‌جایی بین منابع تریلر ویدیویی Switch Between Video Trailer Resources

• جابه‌جایی بین منابع تریلر ویدیویی Switch Between Video Trailer Resources

• از توابع در قالب های Angular استفاده نکنید! Don't Use Functions in Angular Templates!

• از توابع در قالب های Angular استفاده نکنید! Don't Use Functions in Angular Templates!

• عکس های فیلم و پیش نمایش تصویر Movie Photos and Image Preview

• نمایش بازیگران فیلم در مولفه چرخ فلک Show Movie Actors in Carousel Component

• تکمیل اشتراک برای جلوگیری از نشت حافظه Finishing The Subscription to Avoid the Memory Leak

• تکمیل اشتراک برای جلوگیری از نشت حافظه Finishing The Subscription to Avoid the Memory Leak

• دریافت فیلم های مشابه Get Similar Movies

• دریافت فیلم های مشابه Get Similar Movies

• کد بخش Section Code

صفحه جزئیات فیلم Movie Detail Page

• جزء جزئیات فیلم Movie Detail Component

• روتر صفحه فیلم و شناسه فیلم را به عنوان پارامتر عبور دهید Movie Page Router and Pass Movie ID as Parameter

• شناسه فیلم را از URL دریافت کنید Get Movie ID from the URL

• برگه نمای کلی فیلم Movie Overview Tab

• سرویس تریلر فیلم Movie Trailers Service

• عکس های فیلم و پیش نمایش تصویر Movie Photos and Image Preview

• نمایش بازیگران فیلم در مولفه چرخ فلک Show Movie Actors in Carousel Component

• کد بخش Section Code

دسته بندی فیلم ها Movies Categories

• صفحه دسته بندی فیلم ها Movies Categories Page

• صفحه دسته بندی فیلم ها Movies Categories Page

• مسیریابی و دریافت فیلم بر اساس دسته Route and Get Movies By Category

• دریافت خدمات فیلم بر اساس دسته Get Movies By Category Service

• کد بخش Section Code

دسته بندی فیلم ها Movies Categories

• مسیریابی و دریافت فیلم بر اساس دسته Route and Get Movies By Category

• دریافت خدمات فیلم بر اساس دسته Get Movies By Category Service

• کد بخش Section Code

جستجوی فیلم ها Search Movies

• جستجوی ورودی فیلم Search Movie Input

• جستجوی ورودی فیلم Search Movie Input

• خواندن ارزش جستجو Reading the Search Value

• سرویس فیلم جستجو را تنظیم کنید Adjust Search Movie Service

• سرویس فیلم جستجو را تنظیم کنید Adjust Search Movie Service

• کد بخش Section Code

• کد بخش Section Code

جستجوی فیلم ها Search Movies

• خواندن ارزش جستجو Reading the Search Value

• کد بخش Section Code

تمام شدن! Finishing Up!

• ساخت اپلیکیشن برای تولید Build the Application for Production

• ساخت اپلیکیشن برای تولید Build the Application for Production

• برنامه را روی سرور آپلود کنید Upload The App to Server

• برنامه را روی سرور آپلود کنید Upload The App to Server

• قبل از پایان دوره - همین مورد را در برنامه های تلویزیونی اعمال کنید Before Finishing the Course - Apply the Same on TV Shows

• قبل از پایان دوره - همین مورد را در برنامه های تلویزیونی اعمال کنید Before Finishing the Course - Apply the Same on TV Shows

• چگونه می توان همان را در برنامه های تلویزیونی اعمال کرد How to Apply the Same on TV Shows

• چگونه می توان همان را در برنامه های تلویزیونی اعمال کرد How to Apply the Same on TV Shows

• کد کامل پروژه Full Project Code

• جایزه Bonus

• جایزه Bonus

تمام شدن! Finishing Up!

• کد کامل پروژه Full Project Code