دوره آموزش جامع و سریع Angular: از صفر تا پروژه‌های کاربردی برای مبتدیان همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره آموزش جامع و سریع Angular: از صفر تا پروژه‌های کاربردی برای مبتدیان

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

موضوع میانی: چارچوب Angular

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر توسعه وب فرانت‌اند
• 2. چرا Angular؟ آشنایی با مزایا و کاربردها
• 3. تاریخچه مختصر Angular و تفاوت آن با AngularJS
• 4. پیش‌نیازها: HTML، CSS و JavaScript (مرور سریع)
• 5. TypeScript: چرا و چگونه؟ (معرفی)
• 6. نصب Node.js و NPM
• 7. نصب Angular CLI
• 8. ایجاد اولین پروژه Angular با CLI
• 9. اجرای برنامه Angular و Live Reload
• 10. ساختار پروژه Angular: نگاهی عمیق
• 11. ابزارهای توسعه: VS Code و افزونه‌های مفید
• 12. مفهوم SPA (Single Page Application) در Angular
• 13. مبانی TypeScript: متغیرها و انواع داده
• 14. مبانی TypeScript: توابع و کلاس‌ها
• 15. مبانی TypeScript: رابط‌ها (Interfaces) و Type Aliases
• 16. اجزا (Components) در Angular: مفهوم و کاربرد
• 17. ایجاد کامپوننت جدید با Angular CLI
• 18. فایل‌های یک کامپوننت: .ts, .html, .css, .spec.ts
• 19. Selector کامپوننت و استفاده از آن
• 20. قالب‌ها (Templates) در Angular و نحوه‌ی تعریف
• 21. استایل‌دهی به کامپوننت‌ها: مفهوم Encapsulation
• 22. ماژول‌ها (Modules) در Angular: سازماندهی برنامه
• 23. AppModule: ماژول ریشه (Root Module)
• 24. وارد کردن (Import) و اعلام (Declare) کامپوننت‌ها در ماژول
• 25. ویژگی‌های یک کامپوننت: @Component Decorator
• 26. درک مفهوم NgModule و نقش آن
• 27. داده‌بندی (Data Binding) در Angular: معرفی کلی
• 28. Interpolation (درون‌یابی): نمایش داده متنی
• 29. Property Binding: تنظیم ویژگی‌های HTML
• 30. Event Binding: واکنش به رویدادهای DOM
• 31. Two-Way Data Binding: همگام‌سازی دوطرفه با ngModel
• 32. FormsModule: فعال‌سازی ngModel
• 33. کار با فرم‌های ساده: Input و Button
• 34. ارسال داده از کامپوننت والد به فرزند با @Input
• 35. ارسال داده از کامپوننت فرزند به والد با @Output و EventEmitter
• 36. مثال عملی: ساخت کامپوننت نمایش اطلاعات کاربر
• 37. مثال عملی: کامپوننت دکمه با قابلیت سفارشی‌سازی
• 38. دستورات (Directives) در Angular: معرفی کلی
• 39. دستورات ساختاری (Structural Directives): ngIf برای نمایش شرطی
• 40. دستورات ساختاری: ngFor برای تکرار لیست‌ها
• 41. دستورات ساختاری: ngSwitch برای انتخاب چندگانه
• 42. دسترسی به Index و First/Last/Even/Odd با ngFor
• 43. دستورات خصیصه‌ای (Attribute Directives): ngClass برای استایل‌های شرطی
• 44. دستورات خصیصه‌ای: ngStyle برای استایل‌دهی inline
• 45. مثال عملی: ساخت یک لیست پویا با فیلترینگ
• 46. لوله‌ها (Pipes) در Angular: تبدیل و فرمت‌دهی داده‌ها
• 47. استفاده از Pipes داخلی: DatePipe و CurrencyPipe
• 48. استفاده از Pipes داخلی: UpperCasePipe, LowerCasePipe, JsonPipe
• 49. ایجاد اولین Custom Pipe: تبدیل متن
• 50. کار با پارامترها در Custom Pipes
• 51. ترکیب Pipes (Chaining Pipes)
• 52. مثال عملی: ساخت Custom Pipe برای جستجو در لیست
• 53. سرویس‌ها (Services) در Angular: اشتراک‌گذاری منطق
• 54. چرا به سرویس‌ها نیاز داریم؟ (معرفی مفهوم)
• 55. ایجاد یک سرویس با Angular CLI
• 56. Injectable Decorator و مفهوم ProvidedIn
• 57. تزریق وابستگی (Dependency Injection) در Angular
• 58. استفاده از سرویس‌ها در کامپوننت‌ها
• 59. مثال عملی: یک سرویس برای مدیریت داده‌ها (CRUD)
• 60. مثال عملی: سرویس Logging برای ثبت رویدادها
• 61. Singleton Services و Scope of Providers
• 62. مسیریابی (Routing) در Angular: ناوبری در SPA
• 63. معرفی Angular Router و نقش آن
• 64. تنظیم ماژول مسیریابی (AppRoutingModule)
• 65. تعریف مسیرها (Routes) و Path Matching
• 66. استفاده از `routerLink` برای ناوبری اعلانی
• 67. `routerLinkActive` برای فعال‌سازی کلاس
• 68. `Router Outlet`: نمایش کامپوننت مسیر
• 69. مسیریابی با پارامترها (Route Parameters)
• 70. خواندن پارامترها با `ActivatedRoute`
• 71. ناوبری برنامه‌ای (Programmatic Navigation) با `Router`
• 72. ریدایرکت (Redirect) و Wildcard Routes (صفحه 404)
• 73. Guards: محافظت از مسیرها (CanActivate) (معرفی)
• 74. ارتباط با Backend: ماژول `HttpClient`
• 75. آماده‌سازی `HttpClientModule`
• 76. ارسال درخواست‌های GET برای دریافت داده
• 77. ارسال درخواست‌های POST برای ایجاد داده
• 78. ارسال درخواست‌های PUT/PATCH برای به‌روزرسانی داده
• 79. ارسال درخواست‌های DELETE برای حذف داده
• 80. معرفی مختصر RxJS: Observables و Subscriptions
• 81. کار با `Observable` ها در `HttpClient`
• 82. مدیریت خطاها (Error Handling) در درخواست‌های HTTP
• 83. فرم‌ها در Angular: فرم‌های Template-Driven (معرفی)
• 84. ایجاد فرم Template-Driven با `ngForm`
• 85. اعتبار سنجی (Validation) در فرم‌های Template-Driven
• 86. نمایش پیام‌های خطا در Template-Driven Forms
• 87. فرم‌ها در Angular: فرم‌های Reactive (معرفی)
• 88. ایجاد فرم Reactive با `FormGroup` و `FormControl`
• 89. اعتبار سنجی (Validation) در فرم‌های Reactive
• 90. استفاده از `FormBuilder` برای فرم‌های Reactive
• 91. نمایش پیام‌های خطا در Reactive Forms
• 92. مقایسه فرم‌های Template-Driven و Reactive
• 93. چرخه عمر کامپوننت (Component Lifecycle) در Angular
• 94. `ngOnInit`: اجرای منطق پس از مقداردهی اولیه
• 95. `ngOnDestroy`: پاکسازی منابع
• 96. دیگر Lifecycle Hooks (مرور سریع)
• 97. مفاهیم پیشرفته‌تر RxJS: Operators (مثلاً `map`, `filter`)
• 98. استفاده از `async` Pipe برای `Observable` ها در قالب
• 99. تست‌نویسی در Angular: معرفی و آشنایی (Unit Testing)
• 100. پروژه‌ی عملی نهایی: ساخت برنامه مدیریت مخاطبین (تلفیق تمام مفاهیم)