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

Angular 16 for Juniors: Building Real World Application

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: استفاده از قدرت Angular 16 با برنامه دنیای واقعی و RxJS با تایپ اسکریپت برای توسعه بی‌وقفه وب. میزبانی از بهترین روش ها و استانداردهای صنعت تایپ اسکریپت و برنامه کاملاً تایپ شده خرید فقط برای بزرگسالان (+18) پیش نیازها: مهارت های اساسی کامپیوتر اصول وب: درک اولیه HTML، CSS، و جاوا اسکریپت مفید است. انگیزه و اشتیاق

آیا برای شروع یک سفر هیجان انگیز به دنیای توسعه وب آماده هستید؟ دوره آموزشی "مقدمه ای بر انگولار برای نوجوانان" نقطه شروع عالی برای زبان آموزان جوانی است که علاقه مند به ساخت برنامه های وب پویا و تعاملی هستند. این دوره که با در نظر گرفتن مبتدیان طراحی شده است، دانش آموزان را با مهارت های ضروری برای ایجاد تجربیات وب مدرن با استفاده از Angular، یکی از محبوب ترین فریم ورک های فرانت اند در صنعت، مجهز می کند.

این دوره فقط برای بزرگسالان (+18) به دلیل امکان نمایش محتوای بزرگسالان در طول توسعه پروژه در نظر گرفته شده است


نکات برجسته دوره:

  • اصول اولیه را بیاموزید: ما با یک پایه محکم در توسعه وب شروع خواهیم کرد، که مبانی HTML، CSS و جاوا اسکریپت را پوشش می دهد تا اطمینان حاصل شود که همه دانش آموزان در یک صفحه هستند.

  • مفاهیم اصلی Angular: از طریق تمرین‌های عملی و پروژه‌های دنیای واقعی، به ویژگی‌های قدرتمند Angular، از جمله مؤلفه‌ها، الگوها، اتصال داده‌ها و موارد دیگر غواصی کنید.

  • ساخت اپلیکیشن دنیای واقعی: آنچه مسیر ما را متمایز می کند، فرصت کار بر روی پروژه دنیای واقعی است. شما فقط تئوری را یاد نخواهید گرفت. شما در حال ساخت برنامه های کاربردی وب عملی و کاربردی خواهید بود که می توانند در نمونه کارها خود به نمایش گذاشته شوند.

  • یادگیری مشارکتی: با همسالان خود درگیر شوید، ایده ها را به اشتراک بگذارید و روی پروژه های گروهی کار کنید تا مهارت های کار گروهی و حل مسئله را تقویت کنید.

  • راهنمایی مربی: مربیان با تجربه ما به موفقیت شما اختصاص دارند. آنها توضیحات واضحی ارائه می دهند، به سؤالات پاسخ می دهند و بینش های ارزشمندی را در طول دوره ارائه می دهند.

  • برای آینده آماده شوید: مهارت‌هایی را به دست آورید که در صنعت فناوری تقاضای زیادی دارند و پایه‌ای قوی برای فرصت‌های شغلی آینده ایجاد می‌کنند.


در اینجا خلاصه ای از آنچه آنها می توانند انتظار یادگیری داشته باشند آورده شده است:


  1. مبانی توسعه وب:

    • آشنایی با اصول HTML، CSS و جاوا اسکریپت.

    • تنظیم یک محیط توسعه.

  2. مقدمه ای بر Angular:

    • Angular چیست و اهمیت آن در توسعه وب مدرن.

    • معماری Angular و مفاهیم کلیدی.

  3. اجزاء و الگوها:

    • ایجاد مؤلفه‌ها و الگوها برای ایجاد رابط کاربری برنامه‌های کاربردی وب.

    • استفاده از اتصال داده برای اتصال اجزا و الگوها.

  4. دستورالعمل ها و لوله ها:

    • درک دستورالعمل‌هایی مانند ngIf و ngFor.

    • استفاده از لوله‌ها برای تبدیل و قالب‌بندی داده‌ها.

  5. خدمات و تزریق وابستگی:

    • ایجاد و استفاده از خدمات برای مدیریت داده ها و منطق برنامه.

    • اجرای تزریق وابستگی برای در دسترس قرار دادن خدمات برای مؤلفه‌ها.

  6. مسیریابی و ناوبری:

    • تنظیم مسیریابی برای ایجاد برنامه های چند صفحه ای.

    • اجرای پیمایش بین نماهای مختلف.

  7. ادغام HTTP و API:

    • ایجاد درخواست‌های HTTP برای واکشی داده‌ها از منابع خارجی.

    • مدیریت پاسخ ها و نمایش داده ها در برنامه.

  8. تست و اشکال زدایی:

    • اشکال‌زدایی مؤثر برنامه‌های Angular.

  9. بهینه سازی و عملکرد:

    • استراتژی‌هایی برای بهینه‌سازی برنامه‌های Angular برای سرعت و کارایی.

  10. استقرار و میزبانی:

    • استقرار برنامه‌های Angular در سرویس‌های میزبانی وب یا پلتفرم‌هایی مانند GitHub Pages.

  11. پروژه های دنیای واقعی:

    • استفاده از مفاهیم آموخته شده برای ساخت برنامه وب در دنیای واقعی.

    • تشویق دانش‌آموزان به کار روی پروژه‌هایی که به آنها علاقه دارد.

  12. بهترین شیوه ها و استانداردهای صنعت:

    • آموزش بهترین شیوه های کدنویسی و رعایت استانداردهای صنعتی در توسعه Angular.

در این سفر هیجان انگیز به دنیای توسعه وب با Angular به من بپیوندید. چه تازه شروع کرده اید و چه به دنبال گسترش مهارت های خود هستید، این دوره به شما قدرت می دهد تا برنامه های کاربردی وب پویا و جذاب ایجاد کنید در حالی که فعالانه روی پروژه های دنیای واقعی کار می کنید که مهارت شما را نشان می دهد. اکنون ثبت نام کنید و اولین قدم خود را برای تبدیل شدن به یک متخصص توسعه وب بردارید!


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

معرفی 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

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش Angular 16 for Juniors: Building Real World Application
جزییات دوره
10.5 hours
107
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
1,074
4.9 از 5
دارد
دارد
دارد
Fadi Nouh
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Fadi Nouh Fadi Nouh

مهندس نرم افزار، مدیر، مدرس، معمار