آموزش Angular 19: بررسی عمیق در توسعه وب مدرن

آنچه یاد خواهید گرفت:

• درک اصول Angular: مفاهیم اصلی، معماری و مزایای Angular 19 برای توسعه وب مدرن را بیاموزید.
• راه‌اندازی و پیکربندی پروژه Angular: نصب Angular CLI، ساخت پروژه‌ها و ناوبری در ساختار فایل‌های Angular
• تسلط به کامپوننت‌های Angular و Data Binding: ساخت کامپوننت‌های قابل‌استفاده مجدد، پیاده‌سازی، درون یابی، اتصال رویداد و اتصال داده دو طرفه
• استفاده از دستورالعمل‌ها و پایپ‌های Angular: استفاده از دستورالعمل‌های داخلی مانند ngIf* و ngFor* و ساخت پایپ‌های سفارشی برای تبدیل داده‌
• کار با فرم‌های Angular: ساخت و ارزیابی فرم‌های قالب محور و واکنشی برای مدیریت ورودی‌های کاربر
• مدیریت Routing و ناوبری: پیاده‌سازی اپلیکیشن های تک صفحه‌ای (SPA) با استفاده از Angular Router ،lazy loading و Route Guards
• مدیریت State با Angular Signals و RxJS Observables: درک reactivity، مدیریت State و بهبود عملکرد در پردازش داده‌
• Consume و یکپارچه‌سازی RESTful APIs: انجام عملیات CRUD با استفاده از سرویس‌های HTTP، مدیریت API responses و داده ناهمزمان
• پیاده‌سازی احراز هویت و مجوز: ایمن‌سازی اپلیکیشن ها با احراز هویت کاربر، Route Guards و امنیت مبتنی بر JWT
• بهبود UI/UX با استایل‌های دینامیک و انیمیشن‌ها: اعمال CSS ،Tailwind و انیمیشن‌های Angular برای بهبود تجربه کاربری
• بهبود عملکرد و مقیاس‌پذیری: استفاده بهترین شیوه‌ها برای بهینه‌سازی عملکرد، dependency injection و رندر کردن بهینه
• استقرار اپلیکیشن های Angular: چگونگی ساخت، بهینه سازی و استقرار اپلیکیشن ها را با استفاده از پلتفرم هایی مانند ورسل یا Firebase یاد بگیرید.
• درک Dependency Injection در Angular: مدیریت مؤثر سرویس‌ها با استفاده از سیستم DI angular
• توسعه کامپوننت‌ها و ماژول‌های قابل‌استفاده مجدد: اپلیکیشن های ماژولار و مقیاس پذیر را با ایجاد کامپوننت های رابط کاربری قابل استفاده مجدد طراحی کنید.
• کار بر روی پروژه‌های واقعی در Angular: ساخت پروژه‌های عملی مانند لیست انجام کار، داشبوردهای دینامیک و رابط‌های فروشگاه اینترنتی

پیش نیازهای دوره

• اشتغال و اراده برای اثرگذاری در جهان

توضیحات دوره

به دوره آنگولار 19: غوطه‌ور در توسعه وب مدرن توسط Uplatz خوش آمدید.

Angular فریمورک متن باز مبتنی بر TypeScript است که توسط گوگل توسعه و نگهداری می‌شود. این فریمورک برای ساخت وب اپلیکیشن های دینامیک، مقیاس‌پذیر و با کارایی بالا طراحی شده است. Angular از معماری مبتنی بر کامپوننت پیروی می‌کند و از اپلیکیشن های تک صفحعه ای (SPA) پشتیبانی می‌کند. این فناوری ارائه تجربه کاربری بی‌وقفه را با بروزرسانی محتوا به صورت دینامیک بدون نیاز به بارگذاری کل صفحه تضمین می‌کند.

آخرین نسخه پایدار آنگولار، یعنی Angular 19، بهبودهای قابل‌توجهی در عملکرد، امکانات جدید و تجربۀ توسعه‌دهنده به همراه دارد. این نسخه ادامه‌دهنده روند تکامل Angular است و با مدیریت بهتر state، روتینگ بهبود یافته و یکپارچه‌سازی API بهتر، توسعه اپلیکیشن‌های مدرن را تسهیل می‌کند.

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

چگونه Angular کار می کند؟

Angular گردش کار ساختاری بر اساس کامپوننت‌ها، قالب‌ها و سرویس‌ها دارد. مکانیزم اصلی کار شامل موارد زیر است:

معماری مبتنی بر کامپوننت

• اپلیکیشن‌ها با کامپوننت‌های قابل‌استفاده مجدد ساخته می‌شوند که کنترل عناصر UI و منطقی بودن را بر عهده دارند.

قالب‌ها و data binding

• الگوهای html ساختار کاربر را تعریف می‌کنند و data binding داده را بین مدل و ویو همزمان سازی می‌کند.

دستورالعمل ها

• علامت‌گذاری‌های خاص در HTML (*ngIf ،*ngFor ،ngClass) که کنترل نمایش و رفتار عناصر را بر عهده دارند.

Dependency Injection (DI)

• ارائه سرویس‌ها و داده‌ به صورت کارآمد در قسمت‌های مختلف اپلیکیشن

Routing و ناوبری

• استفاده از Angular Router برای ناوبری در اپلیکیشن های تک صفحه‌ای (SPA) بدون نیاز به بارگذاری مجدد صفحات

مدیریت State

• پشتیبانی از RxJS (Reactive Extensions for JavaScript) و Angular Signals برای مدیریت State اپلیکیشن و جریان داده‌

ادغام API و HTTP Client

• استفاده از HttpClientModule برای درخواست، ارسال و تغییر داده‌ از REST APIs

ساخت و استقرار

• اپلیکیشن های آنگولار با استفاده از Angular CLI ساخته و بر روی پلتفرم‌هایی مانند Firebase، Vercel یا AWS مستقر می‌شوند.

ویژگی‌های کلیدی Angular 19

Angular Signals برای مدیریت State

• جایگزینی برای RxJS برای مدیریت State به صورت شهودی‌تر

بهبود hydration برای رندر سمت سرور (SSR)

• بهبود سرعت بارگذاری صفحه و SEO با تکنیک‌های hydration کارآمد

ساخت سریع‌تر با Angular Compiler بهینه

• کاهش حجم بسته و بهبود عملکرد رندرینگ

تجربه بهتر توسعه‌دهنده

• بهبود اشکال‌زدایی بهتر و پیام‌های خطای واضح‌تر

Lazy Loading با مدیریت بهتر Route

• بارگذاری تنها ماژول‌های مورد نیاز برای بهبود عملکرد.

اعتبارسنجی پیشرفته فرم‌ها

• پشتیبانی از ولیدیتورهای سفارشی و بهبودهای فرم‌های واکنشی

پشتیبانی از وب کامپوننت های و Micro Frontends

• یکپارچه‌سازی بهتر با وب کامپوننت های برای اپلیکیشن های مقیاس‌پذیر

ویژگی‌های TypeScript و +ES6 بهبود یافته

• بهبود سازگاری با جدیدترین ویژگی‌های JavaScript و TypeScript

بهبود در Change Detection

• کاهش بروزرسانی‌های بی‌مورد در DOM، که باعث بهبود کارایی می‌شود.

بهبودهای CLI

• فرمان های جدید CLI برای ساخت سریع‌تر، تست و استقرار

مزایای استفاده از Angular

• عملکرد بالا و مقیاس‌پذیری: معماری مبتنی بر کامپوننت و رندرینگ بهینه، Angular ایده‌آل برای اپلیکیشن های مقیاس بزرگ می‌سازند.
• فریمورک توسعه سازمانی: توسط غول‌های فناوری مانند Google ،Microsoft و IBM برای اپلیکیشن های حیاتی برای مأموریت استفاده می‌شود.
• قابلیت‌های اپلیکیشن های تک صفحه ای SPA: تجربه‌های کاربری نرم و دینامیک با ناوبری سریع را تضمین می‌کند.
• اکوسیستم قدرتمند: پشتیبانی توسط گوگل و جامعه توسعه‌دهندگان قوی، تضمین پشتیبانی بلندمدت و بروزرسانی‌های مکرر
• بهبود بالا: حفاظت داخلی در برابر آسیب‌پذیری‌های وب مانند (تزریق اسکریپت) XSS و  ( جعل درخواست میان وب سایتی) CSRF ارائه می‌دهد.
• پشتیبانی چندپلتفرمی: قابل استفاده در وب، موبایل (با Ionic) و حتی اپلیکیشن های دسکتاپ
• بهبود سئو با SSR: بهبود رتبه‌بندی جستجو و سرعت لود صفحات، Angular را برای اپلیکیشن های SEO محور مناسب می‌کند.
• پشتیبانی کامل از TypeScript: ساختار کد بهتر، نگهداری آسان‌تر و توانایی‌های اشکال‌زدایی قوی
• ادغام‌های گسترده با سیستم‌های شخص ثالث: به‌راحتی با کتابخانه‌هایی مانند RxJS ،NgRx ،Tailwind CSS و Firebase یکپارچه می‌شود.
• بهبود در Change Detection: کاهش بروزرسانی‌های بی‌مورد در DOM، موجب بهبود کارایی و پاسخگویی اپلیکیشن می‌شود.
• بهبود سریع‌تر با Angular CLI: فرمان های داخلی برای ساخت، تست و استقرار اپلیکیشن ها
• رویکرد توسعه مدولار: تشویق به قابلیت استفاده مجدد کد و سازماندهی بهتر پروژه که نگهداری آن را آسان‌تر می‌کند.
• پشتیبانی داخلی از اعتبارسنجی فرم و فرم های واکنشی: مدل‌های فرم قدرتمند با مکانیزم‌های اعتبارسنجی قوی
• تزریق وابستگی اتوماتیک: ساختار اپلیکیشن را ساده‌تر و تست‌پذیری آن را بهبود می‌دهد.
• پشتیبانی از lazy loading: بارگذاری فقط ماژول‌های مورد نیاز، کاهش زمان اولیه بارگذاری و بهبود سرعت اپلیکیشن

برنامه‌درسی دوره Angular

ماژول 1 : اصول Angular

آنگولار چیست؟

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

راه‌اندازی Angular 19

• نصب Angular CLI
• ساخت یک اپلیکیشن جدید در Angular 
• رفع مشکلات رایج در فرآیند راه‌اندازی

اولین تغییرات در اپلیکیشن Angular

• اصلاح اولیه در app.component.html و app.component.ts
• درک ساختار اولیه اپلیکیشن

ساختار فایل و فولدرهای Angular 19

• توضیح کامل در مورد معماری پروژه Angular
• درک هدف فایل‌ها و فولدرهای کلیدی

درون‌یابی در آنگولار

• نمایش داده‌ در قالب‌ها با استفاده از درون‌یابی
• مثال‌های عملی برای data binding

Angular CLI

• فرمان های مهم Angular CLI برای توسعه
• ساخت کامپوننت‌ها، سرویس‌ها و ماژول‌ها

ماژول 2: مفاهیم اصلی Angular

کامپوننت‌های Angular

• درک نقش کامپوننت‌ها در Angular
• چرخه عمر کامپوننت و جریان داده‌

ساخت کامپوننت سفارشی

• ایجاد دستی کامپوننت‌های قابل‌استفاده مجدد
• تعامل کامپوننت‌ها و بهترین شیوه‌ها

فراخوانی تابع در کلیک بر روی دکمه در Angular

• مدیریت تعاملات کاربر با اتصال رویداد
• پیاده‌سازی مدیریت های رویداد و متدها

تعریف نوع‌های داده در Angular

• استفاده از نوع‌های داده در TypeScript برای اپلیکیشن های قوی‌تر
• ایمنی نوع و بهترین شیوه‌ها

ساخت Counter App در Angular

• پروژه عملی: ساخت یک اپلیکیشن ساده counter
• کاربرد مفاهیم اصلی Angular

رویدادهای مهم در Angular

• بررسی رویدادهای DOM رایج در Angular
• مثال‌های عملی برای مدیریت رویدادها

گرفتن و تنظیم مقادیر فیلد ورودی در Angular

• اتصال داده دوطرفه و مدیریت ورودی‌های فرم
• مدیریت عملی فیلدهای ورودی

استایل‌دهی در آنگولار

• استایل‌دهی اختصاصی به کامپوننت و استایل‌های سراسری
• استفاده از CSS ،SCSS و تکنیک‌های استایل‌دهی دیگر

رندرینگ شرطی با if-else و عملکرد toggle

• استفاده از ngIf* برای رندرینگ شرطی
• پیاده‌سازی عملکرد toggle

کنترل جریان با else if

• گسترش منطق شرطی با ngIf* و else if

استفاده از switch-case در Angular

• پیاده‌سازی منطق switch-case در قالب‌ها

حلقه for در Angular

• تکرار بر روی داده‌ با ngFor*

Angular Signals

• آشنایی با Angular Signals برای مدیریت state واکنشی

نوع‌های داده با Signals

• استفاده از انواع مختلف داده‌ با Signals

Signals محاسبه‌شده

• استفاده از signals محاسبه‌شده برای مقادیر مشتق شده

Angular Effects

• درک و استفاده از Angular Effects

حلقه for@ و متغیرهای متنی در Angular

• بررسی حلقه @for و متغیرهای کانتکس‌وال

Data binding دوطرفه

• پیاده‌سازی Data binding دوطرفه با ngModel

لیست انجام کار (To-Do List)

• پروژه عملی: ساخت اپلیکیشن لیست انجام کار

استایل‌دهی دینامیک در آنگولار

• اعمال استایل‌های دینامیک بر اساس وضعیت کامپوننت

دستورالعمل های آنگولار

• آشنایی با دستورالعمل های ساختاری و ویژگی

دستورالعمل ngFor

• استفاده پیشرفته از دستورالعمل ngFor

دستورالعمل ngIf

• استفاده از دستورالعمل ngIf و بلوک‌های else

دستورالعمل ngSwitch

• پیاده‌سازی منطق switch-case با ngSwitch

مسیریابی اولیهدر Angular

• پیکربندی مسیرها و ناوبری
• ساخت اپلیکیشن های تک صفحه‌ای

افزودن هدر با مسیریابی

• ایجاد هدر ناوبری با مسیریابی

ساخت صفحه 404

• مدیریت مسیرهای نامعتبر با صفحه 404

انتقال داده بین صفحات

• استفاده از route parameters و query parameters برای انتقال دیتا

مسیریابی دینامیک

• پیاده‌سازی مسیرهای دینامیک با پارامترها

فرم‌ها در Angular

• آشنایی با فرم‌های مبتنی بر قالب و واکنشی

فرم‌های واکنشی اولیه

• ساخت فرم با APIs واکنشی

سازماندهی فرم‌های واکنشی با گروه‌بندی فرم‌ها

• مرتب‌سازی فرم‌ها با استفاده از گروه‌بندی فرم‌ها

ارزیابی اعتبار فرم‌های واکنشی

• پیاده سازی اعتبارسنجی فرم با فرم های واکنشی

فرم‌های قالب محور

• ساخت فرم‌های قالب محور

اعتبارسنجی فرم‌های قالب محور در Angular

• اعتبارسنجی در فرم‌های قالبی

انتقال دیتا از والد به کودک

• استفاده از Input@ برای انتقال داده‌ بین کامپوننت‌ها

نمونه کامپوننت قابل استفاده مجدد

• ساخت کامپوننت‌های قابل استفاده مجدد

انتقال دیتا از کامپوننت کودک به والد

• استفاده از Output@ و emit کردن رویدادها

پایپ ها در Angular

• تبدیل داده‌ با پایپ های داخلی

ساخت پایپ های سفارشی در Angular

• ایجاد پایپ های تبدیل داده‌ سفارشی

آموزش قلاب‌های چرخه عمردر Angular 

• درک و استفاده از قلاب های چرخه عمر کامپوننت

سرویس‌های Angular

• ساخت و استفاده از سرویس‌های Angular برای به اشتراک‌گذاری داده‌

فراخوانی API با سرویس‌ها در Angular

• انجام درخواست‌های HTTP با سرویس‌های Angular 

استفاده از نوع داده‌ برای نتایج API

• تعریف نوع‌های داده برای API responses

آموزش API با متد POST

• پیاده سازی درخواست های POST

آموزش API با متد DELETE

• پیاده سازی درخواست های DELETE

پر کردن داده در فیلدهای ورودی با استفاده از API

• پر کردن فرم ها با داده دریافتی از API

بروزرسانی داده با متد PUT API

• پیاده سازی درخواست های PUT

Lazy Loading مسیرها

• بهبود عملکرد با استفاده از lazy loading

ماژول 4: Angular پیشرفته و استقرار

ساخت و استقرار محلی

• ساخت و استقرار اپلیکیشن های Angular به صورت محلی

استقرار یک اپلیکیشن Angular روی Vercel

• استقرار اپلیکیشن های Angular روی Vercel

راه اندازی Tailwind CSS در Angular 

• یکپارچه سازی Tailwind CSS برای استایل دهی

آشنایی با RxJS در Angular 

• درک observables و operators در RxJS

RxJS Observables در مقابل Angular Signals

•  مقایسه Signals و Observables

تزریق وابستگی (DI) در Angular

• درک و استفاده از تزریق وابستگی

بهینه سازی عملکرد در Angular

• تکنیک های بهینه سازی عملکرد اپلیکیشن Angular

این دوره برای چه کسانی مناسب است؟

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

• توسعه‌دهندگان فرانت‌اند: توسعه‌دهندگانی که با HTML ،CSS و JavaScript آشنا هستند و می‌خواهند مهارت‌های خود را با Angular ارتقاء دهند.
• توسعه‌دهندگان فول‌استک: برنامه‌نویسان بک‌اند که می‌خواهند Angular را با فناوری‌های بک‌اند خود ادغام کنند.
• مهندسان نرم‌افزار: متخصصانی که قصد تخصص در توسعه وب اپلیکیشن مدرن با Angular را دارند.
• طراحان UI/UX با دانش کد نویسی: طراحانی که می‌خواهند رابط‌های کاربری تعاملی و دینامیک پیاده‌سازی کنند.
• دانشجویان و فارغ‌التحصیلان علوم کامپیوتر: افرادی که می‌خواهند فرصت‌های شغلی خود را با تخصص در Angular بهبود بخشند.
• فریلنسرها و کارآفرینان: کسانی که به ساخت وب اپلیکیشن های حرفه‌ای برای مشتریان و کسب‌وکارها علاقه‌مندند.
• توسعه‌دهندگان جایگزین با فریمورک‌های دیگر: برنامه‌نویسان React، Vue یا jQuery که می‌خواهند اکوسیستم Angular را بررسی کنند.
• توسعه‌دهندگان بک‌اند: متخصصانی که با Node.js ،Python یا Java کار می‌کنند و می‌خواهند Angular را در اپلیکیشن های فول‌استک ادغام کنند.
• تیم‌های شرکتی و متخصصان فناوری اطلاعات: کارمندانی که در شرکت‌هایی مشغول به کار هستند و اپلیکیشن های سازمانی را با Angular توسعه می‌دهند.