آموزش Angular 16 for Juniors: Building Real World Application

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

معرفی Introduction

• معرفی Introduction

• Angular چیست؟ What is Angular?

• الزامات دوره Course Requirements

• این Angular است: ماژول ها، مؤلفه ها و خدمات This is Angular: Modules, Components and Services

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

محیط زیست و ابزارهای توسعه Environment and Development Tools

• مک: نصب HomeBrew Mac: Installing HomeBrew

• نصب NodeJS - NVM Installing NodeJS - NVM

• نصب Angular Installing Angular

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

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

• نصب کد ویرایشگر Installing Code Editor

• معماری پروژه Project Architecture

• نصب زیباتر Installing Prettier

• در حال نصب ESLint Installing ESLint

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

API پروژه Project API

• API چیست؟ What is API?

• فرمت JSON JSON Format

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

• راه اندازی درخواست های API از طریق ThunderClient Triggering API's Requests via ThunderClient

• منابع API های مختلف Different API's Resources

راه اندازی برنامه Application Initialization

• نمای کلی طراحی و ساختار صفحه Design Overview and Page Structure

• نصب و پیکربندی فونت ها Installing and Configuring Fonts

• راه اندازی سبک ها - مهم است Styles Initialization - Important

• نصب Grid System - PrimeFlex Installing Grid System - PrimeFlex

• کامپوننت هدر برنامه Application Header Component

• لوگوی برنامه و ناوبری Application Logo and Navigation

• کامپوننت پاورقی برنامه - لوله تاریخ Application Footer Component - Date Pipe

• کد بخش Section Code

صفحه اصلی برنامه Application Home Page

• کامپوننت صفحه اصلی و مسیریابی Home Page Component and Routing

• جزء لغزنده Slider Component

• طرح بندی اجزای اسلایدر Slider Component Layout

• یک ظاهر طراحی لغزنده Slider Styling

• Icons Library - Prime Icons را نصب کنید Install Icons Library - Prime Icons

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

• داده ها را در Frontend نشان دهید Show the Data in Frontend

• بسته بندی در یک سرویس Wrap in a Service

• از Async Pipe استفاده کنید Use Async Pipe

• حلقه روی آیتم ها با استفاده از ngFor Loop Over Items using ngFor

• ngIf برای رندر شرطی ngIf for Conditional Rendering

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

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

• ایجاد اسلاید با داده های واقعی Create Slides With Real Data

• دریافت تصاویر در Movies API Getting the Images in Movies API

• اسلاید را هر 5 ثانیه تغییر دهید Change Slide Every 5 Seconds

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

• Refactoring کد Code Refactoring

• کد بخش Section Code

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

• جزء بنر Banner Component

• نمایش مؤلفه مورد Show Item Component

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

• از ورودی ها برای کامپوننت ها استفاده کنید Use Inputs for Components

• بنرها را برای انواع مختلف فیلم صدا کنید Call the Banners for Different Movies Types

• Refactoring کد برای خدمات Code Refactoring for Services

• از نقشه RxJS برای پخش جریانی خروجی های مختلف استفاده کنید Use RxJS Map to Stream Different output

• محدود به مقدار مشخص فیلم Limit to Specific Amount of Movies

• بنر برنامه های تلویزیونی TV Shows Banner

• برنامه های تلویزیونی از همان مؤلفه بنر تایپ و استفاده کنید TV Shows Type and Use Same Banner Component

• کد بخش Section Code

صفحه جزئیات نمایش فیلم و تلویزیون Movie and TV Show Detail Page

• نمایش جزء جزئیات و مسیریابی Show Detail Component and Routing

• مسیریابی توسط فیلم - شناسه TVShow Routing by Movie - TVShow Id

• خواندن مقدار پارامتر مسیر Reading Route Parameter Value

• دریافت فیلم با شناسه Get Movie By Id

• استفاده مجدد از مولفه اسلایدر به عنوان سربرگ Reuse Slider Component as Header

• غیرفعال کردن سوئیچ اسلایدر برای استفاده از سربرگ Disable Slider Switching for Header Use

• کتابخانه کامپوننت PrimeNG را نصب کنید Install PrimeNG Component library

• حل نسخه های وابستگی - به روز رسانی Angular Resolving Dependency Versions - Update Angular

• نصب کتابخانه را ادامه دهید و از Tab View Component استفاده کنید Continue Library Installation and Use Tab View Component

• حالت دادن به نمای برگه Styling the Tab View

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

• تب ویدیوها - سرویس ویدیوها Videos Tab - Videos Service

• تب ویدیوها - مؤلفه جاسازی ویدیو Videos Tab - Video Embed Component

• تب ویدیوها - از امنیت URL عبور کنید Videos Tab - Bypass URL Security

• برگه عکس ها - پیش نمایش تصویر روی کلیک Photos Tab - Image Preview on Click

• بازیگران - از مؤلفه چرخ فلک برای نمایش بازیگران استفاده کنید Cast - Use Carousel Component to Display Actors

• If..else در HTML Component - پیش فرض تصویر بازیگر If..else in HTML of Component - Default Actor Image

• ورزش - دریافت فیلم های مشابه Exercise - Get Similar Movies

• تمرین - صفحه جزئیات نمایش های تلویزیونی Exercise - TV Shows Detail Page

• کد بخش Section Code

صفحه فهرست فیلم ها Movies List Page

• نمای کلی بخش Section Overview

• API جستجوی فیلم/نمایش‌های تلویزیونی را کشف کنید Discover Search Movies/TV Shows API

• سرویس فیلم های جستجو را ایجاد کنید Create Search Movies Service

• ایجاد مؤلفه فهرست نمایش ها Create Shows List Component

• نمایش نتایج جستجوی API و استفاده از نمایش آیتم Show Search API Results and Use Show Item

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

• Data Binding - ngModel Data Binding - ngModel

• رویدادهای مؤلفه - onChange Component Events - onChange

• از ارزش جستجو در سرویس جستجو استفاده کنید Use Search Value in Search Service

• از فیلم های محبوب به عنوان مقدار جستجوی پیش فرض استفاده کنید Use Popular Movies as Default Search Value

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

• ارسال شماره صفحه به API از Paginator Pass Page Number to API from Paginator

• ارزش جستجو را در صفحه بندی نگه دارید Keep Search Value on Pagination

• دریافت مجموع ارزش نتایج به صفحه‌نمایش Get Total Results Value To Paginator

• کد بخش Section Code

• تمرین - لیست نمایش های تلویزیونی Exercise - TV Shows List

صفحه ژانرها Genres Page

• مولفه صفحه ژانرها Genres Page Component

• ژانرهای API و خدمات Genres API & Service

• ژانرها صفحه آرایی Genres Page Layout

• نمایش ژانرها از API Display the Genres from API

• API و سرویس Movies By Genre را دریافت کنید Get Movies By Genre API and Service

• نمایش فیلم ها در ژانر کلیک شده Display Movies on Clicked Genre

• مسیریابی به ژانر خاص Routing to Specific Genre

• تغییر مسیر به یک مؤلفه با شناسه متفاوت Reroute to same component with different Id

• مشق شب Homework

• کد بخش Section Code

استقرار برنامه Application Deployment

• ساخت اپلیکیشن Application Build

• با استفاده از FTP روی هاست استاندارد مستقر شوید Deploy to a Standard Host Using FTP

• استقرار در صفحات Github Deploy to Github Pages

• رفع صفحات Github - URL پایه Fix Github Pages - Base URL

به Angular World خوش آمدید! Welcome to Angular World!

• کلمات پایانی و مراحل بعدی Final Words and Next Steps

• سخنرانی پاداش Bonus Lecture