مسترکلاس Angular 20 - ساخت پروژه واقعی
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت یک اپلیکیشن واقعی Angular 20 از ابتدا با استفاده از جدیدترین ویژگیها
- درک و به کارگیری مفاهیم کلیدی Angular مانند کامپوننتها، مسیریابی و سرویسها
- ایجاد رابطهای کاربری واکنشگرا با اتصال داده و فرمهای واکنشگرا
- اتصال اپلیکیشنهای Angular به REST APIها و مدیریت داده بلادرنگ
- تسلط به Angular CLI برای ایجاد ساختار و مدیریت کارآمد پروژههایتان
- استقرار آنلاین اپلیکیشن Angular خود با استفاده از پلتفرمهای میزبانی مدرن مانند Firebase
- به کارگیری بهترین شیوه ها در معماری Angular برای نوشتن کد تمیز و قابل نگهداری
پیشنیازهای دوره
- دانش اولیه HTML ،CSS و JavaScript
- یک کامپیوتر با دسترسی به اینترنت
- یک مرورگر وب مدرن (Chrome ،Firefox ،Edge و غیره)
- نصب Visual Studio Code (ویرایشگر کد پیشنهادی)
- نصب Node.js و npm (مراحل نصب آموزش داده خواهد شد)
- هیچ تجربه قبلی با Angular نیاز نیست - همه چیز را گامبهگام خواهید آموخت.
توضیحات دوره
آیا آماده یادگیری Angular 20 و ساخت وب اپلیکیشنهای واقعی از ابتدا هستید؟
در این مسترکلاس عملی و مبتنی بر پروژه، شما گامبهگام با مهمترین ویژگیهای Angular 20، جدیدترین و قدرتمندترین نسخه یکی از محبوبترین فریمورکهای فرانتاند جهان آشنا خواهید شد.
چه کاملاً مبتدی باشید و چه توسعهدهندهای با تجربه در JavaScript یا فناوریهای بکاند مانند Java یا Node.js، این دوره مهارت و اعتمادبهنفس لازم برای ایجاد وب اپلیکیشنهای حرفهای و مقیاسپذیر با استفاده از Angular را به شما میدهد.
در پایان این دوره، شما یک اپلیکیشن کاملاً کاربردی با Angular 20 ساخته و مستقر کردهاید و به ابزارها و تکنیکهایی که توسعهدهندگان واقعی در شرکتهای واقعی استفاده میکنند، مسلط خواهید شد.
زمینه واقعی بکاند با Operis
این دوره Angular 20 به یک پروژه بکاند واقعی مبتنی بر میکروسرویس به نام Operis متصل است. در این دوره، ما کاملاً بر ساخت اپلیکیشن فرانتاند و درک نحوه ارتباط Angular با یک سیستم بکاند واقعی تمرکز میکنیم.
بکاند از قبل وجود دارد و به عنوان یک محیط واقعگرایانه استفاده میشود. ما در اینجا منطق بکاند را پیادهسازی نمیکنیم. در عوض، بر روی دغدغههای فرانتاند مانند ارتباط API، جریانهای احراز هویت، مدیریت استیت، مسیریابی و معماری تمیز Angular تمرکز میکنیم.
این رویکرد به شما امکان میدهد Angular 20 را در یک زمینه واقعی بدون حواسپرتی یاد بگیرید، در حالی که همچنان با یک بکاند در سطح سازمانی کار میکنید.
چه چیزی این دوره را متمایز میکند؟
- 100% بروزرسانی شده برای Angular 20
- توضیحات شفاف و مناسب برای مبتدیان
- یک پروژه واقعی که گامبهگام ساخته میشود
- تمرکز بر ویژگیهای مدرن Angular و بهترین شیوه ها
- معماری فرانتاند تمیز و مقیاسپذیر
- جایزه: استقرار اپلیکیشن Angular خود با استفاده از Firebase Hosting
- تدریس توسط یک مهندس نرمافزار با تجربه
آنچه خواهید آموخت
- ساخت یک اپلیکیشن واقعی Angular 20 از ابتدا
- استفاده از Angular CLI برای تولید کامپوننتها و سرویسها
- تسلط به مسیریابی، اتصال داده و فرمهای واکنشگرا
- ارتباط با REST APIها با استفاده از HttpClient
- مدیریت احراز هویت و مسیرهای محافظتشده
- به کارگیری بهترین شیوه ها برای کد تمیز و قابل نگهداری
- استقرار آنلاین اپلیکیشن Angular
این دوره برای چه کسانی است؟
- توسعهدهندگان فرانتاند مشتاق که میخواهند به Angular مسلط شوند.
- توسعهدهندگان بکاند که میخواهند توسعه مدرن فرانتاند را یاد بگیرند.
- مبتدیان JavaScript یا TypeScript
- دانشجویان و متخصصانی که برای مصاحبههای شغلی فرانتاند آماده میشوند.
- هر کسی که درباره Angular 20 و توسعه وب واقعی کنجکاو است.
پیشنیازها
هیچ تجربه قبلی با Angular نیاز نیست.
دانش اولیه برنامهنویسی مفید است اما اجباری نیست.
انگیزه خود را بیاورید، گامبهگام همراه شوید و بیایید با هم چیزی عالی بسازیم.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگانی که میخواهند Angular 20 را از ابتدا یاد بگیرند و اپلیکیشنهای واقعی بسازند.
- مبتدیان JavaScript یا TypeScript که به دنبال تسلط به توسعه مدرن فرانتاند هستند.
- توسعهدهندگان بکاند (Java ،Node.js و غیره) که میخواهند Angular را به مجموعه مهارتهای خود اضافه کنند.
- دانشجویان و متخصصانی که برای مشاغل توسعهدهنده فرانتاند آماده میشوند.
- هر کسی که کنجکاو ساخت وب اپلیکیشنهای واکنشگرا و پویا با استفاده از جدیدترین ویژگیهای Angular است.
مسترکلاس Angular 20 - ساخت پروژه واقعی
-
چرا Angular 20 انتخاب درستی است؟ 02:17
-
آنچه در این دوره خواهید ساخت: اپلیکیشن Operis (ابزار مدیریت پروژه) 01:59
-
درک نیاز تجاری: مدیریت پروژهها، تسک هاو حسابها در Operis 02:10
-
تشریح معماری Fullstack: انگولار، API Gateway و سرویسهای Backend 02:09
-
نقشه راه یادگیری Angular 20 شما 01:33
-
چگونگی دنبال کردن این دوره و استفاده از سورس کد 01:47
-
دمو زنده: اپلیکیشن Operis – مرور جریان کسب و کار 02:42
-
کامپوننتهای Standalone چه هستند و چرا اهمیت دارند؟ 01:31
-
ایجاد یک صفحه فقط با کامپوننتهای Standalone 00:57
-
سرویسهای Singleton و Local در کامپوننتهای Standalone 01:40
-
چگونگی ایجاد المانهای UI قابل استفاده مجدد Standalone 00:53
-
مهاجرت یک ماژول ویژگی به Standalone 01:44
-
کامپوننتهای Standalone در Angular None
-
مقدمهای بر Signals و چرایی دور شدن Angular از RxJS برای کامپوننتها 04:52
-
مقدمهای بر Signals None
-
مقایسه Signals و RxJS None
-
ایجاد و استفاده از computed و effect 02:21
-
()computed None
-
()effect None
-
جایگزینی Input@ و Output@ با Signals 04:53
-
جایگزینی Input@ و Output@ با Signals None
-
Bind کردن سیگنالها در قالب (بدون نیاز به Observables) 01:07
-
Bind کردن Signals در Templateها None
-
بهترین شیوه ها None
-
رندرینگ سمت کلاینت (CSR): رندر کامل در مرورگر 03:01
-
رندرینگ سمت کلاینت (CSR) None
-
SSR بدون Hydration: مزیت SEO، اشکال در عملکرد 02:38
-
SSR بدون Hydration None
-
SSR با Hydration: بارگذاری سریع و SEO عالی 01:33
-
SSR با Hydration None
-
ارائه: SSG - تولید سایت استاتیک 01:21
-
تولید سایت استاتیک (SSG) None
-
حالتهای رندرینگ Angular 20: بررسی کامل 01:49
-
انتخاب حالت رندرینگ مناسب (Angular 20) None
-
نصب Node.js (شامل npm) 01:44
-
نصب Angular CLI (نسخه 20) 01:32
-
ایجاد پروژه Angular با CLI 01:13
-
درک ساختار پروژه 06:05
-
اجرای اپلیکیشن Angular با Angular CLI 01:49
-
درک Router Outlet 01:31
-
بروزرسانی تست پیشفرض Angular (app.spec.ts) پس از جایگزینی قالب App 03:24
-
سازماندهی پوشه برنامهریزی شده برای Operis 04:58
-
مقدمهای بر API بکاند OPERIS 01:29
-
دموی بکاند OPERIS با Postman 05:16
-
میکروسرویسهای Operis – بررسی اجزای باقیمانده معماری 14:13
-
مقدمه: آنچه میسازیم 02:18
-
کدنویسی زنده: ایجاد کامپوننت ثبتنام کاربر Standalone 03:48
-
کدنویسی زنده: ساخت فرم ثبتنام کاربر با Angular Reactive Forms 09:22
-
ساخت اعتبارسنجی هوشمند و مدیریت خطا در Angular 06:11
-
کدنویسی زنده: خداحافظ ngIf، سلام if@ 02:22
-
چگونه Angular برای ایجاد حساب کاربری، Backend را فراخوانی میکند؟ 01:27
-
کدنویسی زنده: راهاندازی Model و Service برای ایجاد حساب کاربری 06:29
-
کدنویسی زنده: HttpClient در Angular: پیکربندی app.config.ts 01:13
-
بهبود فرم ثبتنام: پیامهای بارگذاری، موفقیت و خطا 02:37
-
تست End-to-End جریان ایجاد حساب کاربری 02:48
-
کدنویسی زنده: تست سرویس حساب کاربری 11:23
-
درک تستهای کامپوننت UserRegistration 04:46
-
مقدمه: آنچه میسازیم 02:03
-
کدنویسی زنده: ساخت JwtTokenService 04:01
-
تست واحد JwtTokenService: تسلط به جاسوسهای localStorage در Angular 04:22
-
کدنویسی زنده: افزودن متد Login به UserAccountService 03:57
-
ساخت فرم ورود و مدیریت درخواست Sign-In 01:08
-
کدنویسی زنده: ذخیره توکن JWT با استفاده از ()pipe و ()tap 01:50
-
پیشنمایش آنچه در ادامه خواهیم ساخت: جریان ورود به داشبورد 00:58
-
کدنویسی زنده: از ورود تا داشبورد: ایجاد مسیر و جریان تغییر مسیر 01:58
-
ساخت هدر داشبورد و تجربه خروج امن (پاک کردن توکن + تغییر مسیر) 01:40
-
در این درس، ما جریان کامل احراز هویت را به صورت دستی تست خواهیم کرد 02:38
-
ساخت ساختار داشبورد و آمادهسازی ناوبری 03:42
-
بیایید بخش پروژهها را بسازیم: ایجاد، مدیریت و کنترل پروژههایتان 00:47
-
بنیاد صفحه پروژهها: ساختار، هدر و ناوبری 01:50
-
مودال ایجاد پروژه: طراحی UI، اعتبارسنجی و کامپوننت (UI + Reactive Form) 03:47
-
مودال ایجاد پروژه: کنترل استیت با رویدادهای Parent–Child مبتنی بر Output 04:42
-
تست ایجاد پروژه از طریق UI و اعتبارسنجی درخواست شبکه 01:55
-
درک مشکل: تکرار هدر در کامپوننتها 01:39
-
پیادهسازی یک طرح بندی اصلی با مسیرهای تودرتو در Angular 02:59
-
ایمنسازی طرح بندی اصلی با Auth Guards و CanActivate 02:29
-
نمایش لیست پروژهها با ورودیهای مبتنی بر Signal در Angular 02:44
-
بارگذاری پروژهها از Backend و ارسال دادهها از طریق Signal Inputs 02:54
-
محاسبات ناکارآمد قالب در لیستهای پروژه Angular 01:43
-
کدنویسی زنده: بهینهسازی رندر لیست پروژه با Computed Signals 03:02
-
ایمنسازی فراخوانیهای API بکاند با احراز هویت JWT در Angular 02:21
-
مدیریت دستی احراز هویت JWT در سرویسهای Angular 01:19
-
پیادهسازی و ثبت یک JWT HTTP Interceptor در Angular 01:39
-
مدیریت واکنشگرای توکن JWT با Angular Signals و Effects 02:28
-
داکرایز کردن اپلیکیشن Angular Operis با بیلد چندمرحلهای 03:14
-
اجرای اپلیکیشن Angular Operis با Docker Compose 02:46
-
بررسی Firebase Hosting و استقرار زنده 02:55
-
پیکربندی Firebase Hosting با firebase.json 03:17
-
لینک کردن پروژه Angular با .firebaserc 01:01
-
درک راهاندازی و فرآیند استقرار Firebase Hosting 02:05
-
SSR با Hydration: چرا از آن در صفحه ورود استفاده میکنیم؟ 02:10
-
درک فایلهای Angular SSR و پیکربندی سرور 03:56
-
ورود امن برای SSR: بررسیهای LocalStorage و پلتفرم 01:51
-
معرفی سریع و نصب Angular DevTools 00:57
-
دیباگ واکنشگرایی Signals خود با Angular DevTools 02:48
-
پایپ سفارشی Standalone – الگوی Time Ago 03:49
-
مدیریت خطای متمرکز با HTTP Interceptors 03:06
-
ساخت یک اصول قوی Angular، سپس ارتقا با PrimeNG 01:39
-
جمعبندی دوره و نکات پایانی 01:43
مشخصات آموزش
مسترکلاس Angular 20 - ساخت پروژه واقعی
- تاریخ به روز رسانی: 1404/12/10
- سطح دوره:متوسط
- تعداد درس:99
- مدت زمان :04:07:09
- حجم :2.24GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy