آموزش جامع انگولار Angular – (0 تا 100)

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

در این دوره چه مباحثی آموزش داده شده است؟

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

همچنین ما در طول این دوره از دیتا بایندینگ (Data binding) برای ساخت رابط کاربری تعاملی و کاملا ریسپانسیو استفاده می کنیم. همچنین ما از الگوهای موثر تعامل کامپوننت برای پیاده سازی برنامه های ماژولار استفاده خواهیم کرد.

از ویژگی های جذاب دیگر این دوره می توان به راهنمای سوالات مصاحبه برای هر موضوع دوره و همچنین وجود تمرینات عملی متعدد برای درک بهتر دانشجویان از مباحث آموزش داده شده اشاره کرد.

علاوه بر اینها شما در طول این دوره مباحث زیر را خواهید آموخت:

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

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

داشتن مهارت های پایه ای درباره HTML و CSS می تواند مفید باشد اما داشتن همین اطلاعات نیز ضروری نیست و با حداقل دانش برنامه نویسی می توانید این دوره را شروع کنید.

چرا باید این دوره را برای یادگیری انگولار انتخاب کنید؟

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

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

همگام با جدیدترین‌ها: به کمک این دوره با ترندها و بهترین شیوه‌های توسعه Angular آشنا می شوید.

تکنولوژی‌های پوشش داده شده در طول این دوره

• Angular 18
• HTML5
• CSS3
• Bootstrap
• TypeScript
• Node.js
• MySQL
• Git
• Angular CLI
• Visual Studio Code

سرفصل های دوره آموزش جامع انگولار Angular – (0 تا 100)

معرفی دوره

• آشنایی با Angular 18
• آشنایی با Angular CLI 19
• درک ساختار پروژه
• ویژگی‌های انگولار 19

مبانی انگولار

• اولین کامپوننت با معماری
• IQ – اولین کامپوننت با معماری
• نمایش پیام به‌صورت داینامیک (Interpolation)
• IQ – درون‌گذاری (Interpolation)
• وظیفه – نمایش مجموع دو مقدار
• بایندینگ ویژگی (Property Binding)
• IQ – بایندینگ ویژگی (Property Binding)
• وظیفه – بایندینگ ویژگی با تگ تصویر
• بایندینگ رویداد با کلیک
• IQ – بایندینگ رویداد
• وظیفه – ایجاد مثال شمارنده
• بایندینگ سایر رویدادهای مربوط به ماوس
• بایندینگ رویدادهای صفحه‌کلید
• شیء $event
• IQ – شیء $event
• وظیفه – بررسی وضعیت کلید Shift
• وظیفه – استفاده از Keydown برای افزایش/کاهش شمارنده
• بایندینگ دوطرفه (ngModel)
• IQ – بایندینگ دوطرفه (ngModel)
• وظیفه (بایندینگ دوطرفه) – دریافت مقدار فیلد ورودی با کلیک روی دکمه
• وظیفه – محاسبه ساده سبد خرید با استفاده از بایندینگ دوطرفه

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

• معرفی دستورالعمل ها
• دستورالعمل‌های ساختاری (*ngIf)
• IQ – دستورالعمل *ngIf
• وظیفه – پیاده‌سازی قابلیت نمایش و پنهان کردن با *ngIf
• دستورالعمل‌های ساختاری (*ngFor)
• IQ – دستورالعمل *ngFor
• دستورالعمل‌های ساختاری (*ngSwitch)
• IQ – دستورالعمل *ngSwitch
• وظیفه – پیاده‌سازی قابلیت اعتبارسنجی سن
• دستورالعمل‌های ویژگی [ngClass]
• وظیفه – پیاده‌سازی قابلیت تغییر وضعیت با استفاده از ngClass
• دستورالعمل‌های ویژگی [ngStyle]
• وظیفه [ngStyle] – تغییر رنگ فیلد ورودی
• گروه‌بندی عناصر با ng-container
• قالب‌های HTML با ng-template
• IQ – مقایسه ng-template و ng-container
• وظیفه – نمایش پیام در صورت خالی ماندن ورودی (با استفاده از ng-container و ng-template)
• رندر کردن قالب‌ها با ngTemplateOutlet – بخش ۱
• رندر کردن قالب‌ها با ngTemplateOutlet – بخش ۲
• IQ – دستورالعمل ngTemplateOutlet
• وظیفه – سازنده پورتفولیو (مرحله ۱) – تعریف قالب
• وظیفه – سازنده پورتفولیو (مرحله ۲) – استایل‌دهی با CSS
• وظیفه – سازنده پورتفولیو (مرحله ۳) – بایندینگ

چرخه عمر کامپوننت

• هوک ایجاد کامپوننت – ngOnChanges()
• IQ – ngOnChanges()
• درک شیء SimpleChanges
• IQ – شیء SimpleChanges
• هوک ایجاد کامپوننت – ngOnInit()
• IQ – ngOnInit()
• تشخیص تغییرات سفارشی با هوک ngDoCheck()
• IQ – ngDoCheck()
• درک هوک ngAfterContentInit()
• IQ – ngAfterContentInit()
• بررسی محتوا با هوک ngAfterContentChecked()
• بارگذاری محتوا با هوک ngAfterViewInit()
• IQ – ngAfterViewInit()
• بررسی نمای کامپوننت با هوک ngAfterViewChecked()
• حذف کامپوننت با هوک ngDestroy()

دکوراتورها (Decorators)

• مقدمه‌ای بر دکوراتورها
• دکوراتورهای کلاس – @NgModule
• دکوراتورهای کلاس – دکوراتور @Component
• دکوراتورهای ویژگی – دکوراتور @Input()
• IQ – دکوراتور @Input()
• وظیفه – دکوراتور @Input()
• دکوراتورهای ویژگی – دکوراتور @Output
• IQ – دکوراتور @Output
• وظیفه – استفاده همزمان از @Input و @Output
• دکوراتورهای ویژگی – دسترسی به کامپوننت فرزند با @ViewChild
• IQ – دکوراتور @ViewChild
• دکوراتورهای ویژگی – دسترسی به محتوای پروژه‌شده با @ContentChild
• IQ – دکوراتور @ContentChild()
• دکوراتورهای ویژگی – بایند کردن ویژگی‌ها با @HostBinding
• دکوراتورهای متد – بایند کردن متدها به رویدادها با @HostListener
• وظیفه – پیاده‌سازی انتخابگر رنگ
• دکوراتورهای پارامتر

پایپ های انگولار (Angular Pipes)

• مقدمه‌ای بر پایپ‌ها
• وظیفه – پیاده‌سازی پایپ‌های داخلی
• درک پایپ Slice
• وظیفه – ناوبری صفحه با استفاده از پایپ Slice (بخش ۱)
• وظیفه – ناوبری صفحه با استفاده از پایپ Slice (بخش ۲)
• درک پایپ Number
• وظیفه – تبدیل پوند به کیلوگرم با استفاده از پایپ Number
• درک پایپ JSON
• نمایش داده‌های جدول به‌صورت رشته JSON

پایپ های سفارشی (Custom Pipes)

• ایجاد پایپ‌های سفارشی
• IQ – پایپ‌های سفارشی
• وظیفه – ایجاد پایپ سفارشی برای مرتب‌سازی اعداد
• وظیفه – ایجاد پایپ سفارشی برای شمارش حروف
• پایپ‌های خالص در برابر ناخالص (Pure vs Impure Pipe)
• استفاده از پایپ‌های impure

مسیریابی در انگولار

• مقدمه‌ای بر مسیریابی
• ایجاد یک مسیر ساده – <router-outlet>
• IQ – <router-outlet>
• ایجاد یک لینک ناوبری با استفاده از دستورالعمل routerLink
• IQ – دستورالعمل routerLink
• ایجاد یک نوار ناوبری با استفاده از مسیرها
• ارسال پارامترهای مسیر (مسیریابی داینامیک)
• IQ – مسیریابی داینامیک
• مسیرهای جایگزین (Wildcard Routes) – نمایش صفحه ‘404’
• IQ – مسیرهای جایگزین
• درک مسیرهای تو در تو (Nested Routes)
• IQ – مسیرهای تو در تو
• وظیفه – ایجاد یک منوی چندسطحی
• تغییر مسیرها (Redirecting Routes)
• IQ – تغییر مسیرها
• درک ActivatedRoute
• IQ – ActivatedRoute
• پارامترهای کوئری در مسیریابی
• IQ – پارامترهای کوئری در مسیریابی
• ناوبری بین مسیرها
• IQ – متد navigate()
• وظیفه – نمایش جزئیات دوره و دریافت پارامترهای کوئری

سرویس های انگولار

• مقدمه‌ای بر سرویس‌ها
• IQ – مقدمه‌ای بر سرویس‌ها
• تزریق وابستگی (Dependency Injection)
• IQ – تزریق وابستگی
• ارائه سرویس‌ها (Providing Services)
• IQ – ارائه سرویس‌ها
• تزریق سرویس‌ها با استفاده از inject()
• IQ – تابع inject()

توکن های انگولار (Angular Tokens)

• تزریق توکن‌ها
• IQ – تزریق توکن‌ها
• تزریق توکن‌های رشته‌ای
• IQ – تزریق توکن‌های رشته‌ای
• شیء توکن تزریق (Injection Token Object)
• IQ – شیء توکن تزریق
• ارائه مقدار با useValue
• IQ – ارائه مقدار با useValue
• وظیفه – ارائه یک مقدار ثابت به عنوان وابستگی
• ارائه‌دهنده نام مستعار – ویژگی useExisting
• IQ – ویژگی useExisting
• ارائه‌دهنده کارخانه‌ای – ویژگی useFactory
• IQ – ویژگی useFactory
• ارائه وابستگی‌ها با استفاده از ویژگی deps در useFactory
• IQ – ارائه وابستگی‌ها با استفاده از ویژگی deps در useFactory
• مقایسه useFactory و useValue

فرم های قالب محور انگولار (Angular Template Driven Forms)

• مقدمه‌ای بر فرم‌های انگولار
• شروع کار با فرم‌های مبتنی بر الگو (Template-Driven Forms) – دستورالعمل ngForm
• IQ – دستورالعمل ngForm
• وظیفه – ایجاد یک فرم ساده با دکمه‌های ارسال و بازنشانی
• فرم مبتنی بر الگو (Template-Driven Form)
• IQ – فرم مبتنی بر الگو (Template-Driven Form)

فرم های واکنشی انگولار (Angular Reactive Forms)

• درک ReactiveFormsModule
• IQ – ReactiveFormsModule
• درک FormControl
• IQ – FormControl
• درک FormGroup
• IQ – FormGroup
• فرم‌های داینامیک با FormArray
• IQ – فرم‌های داینامیک با FormArray
• درک FormBuilder
• IQ – FormBuilder
• اعتبارسنجی کنترل‌های فرم
• IQ – اعتبارسنجی کنترل‌های فرم
• وظیفه – ایجاد فرم واکنشی چندمرحله‌ای با Bootstrap (بخش ۱)
• وظیفه – ایجاد فرم واکنشی چندمرحله‌ای با Bootstrap (بخش ۲)
• وظیفه – ایجاد فرم واکنشی چندمرحله‌ای با Bootstrap (بخش ۳)
• ردیابی وضعیت کنترل‌های فرم
• IQ – ردیابی وضعیت کنترل‌های فرم
• وظیفه – اعمال چندین اعتبارسنجی روی فیلد رمز عبور

اعتبارسنجی فرم های سفارشی (Custom Forms Validator)

• ایجاد اعتبارسنج‌های سفارشی
• IQ – ایجاد اعتبارسنج‌های سفارشی
• وظیفه – ایجاد اعتبارسنج سفارشی برای URL

نگهبانان مسیر (Route Guards)

• ایمن‌سازی مسیرها با گاردهای مسیر (Route Guards)
• IQ – گاردهای مسیر (Route Guards)
• گارد مسیر CanDeactivate
• IQ – گارد مسیر CanDeactivate
• گارد مسیر CanActivateChild
• IQ – گارد مسیر CanActivateChild
• وظیفه – احراز هویت ورود به سیستم
• گارد CanMatch
• IQ – گارد CanMatch

بارگذاری تنبل (Lazy Loading)

• مقدمه‌ای بر بارگذاری تنبل (Lazy Loading)
• بارگذاری تنبل کامپوننت‌ها
• پیش‌بارگذاری کامپوننت‌ها
• IQ – پیش‌بارگذاری کامپوننت‌ها
• استراتژی پیش‌بارگذاری (NoPreloading)
• IQ – استراتژی NoPreloading
• استراتژی پیش‌بارگذاری سفارشی (Custom Preloading)
• IQ – استراتژی پیش‌بارگذاری سفارشی
• وظیفه – پیش‌بارگذاری بر اساس نقش‌های کاربری
• IQ – مقایسه پیش‌بارگذاری و بارگذاری تنبل
• بارگذاری تأخیری (Deferred Loading)
• @defer با @placeholder
• @defer با @loading
• @defer با @error
• کار با تریگرها (on idle)
• کار با تریگرها (on viewport)
• کار با تریگرها (on interaction)
• کار با تریگرها (on hover)
• کار با تریگرها (on immediate)
• کار با تریگرها (on timer)
• پیش‌واکشی بلوک‌های @defer
• تعریف تریگرهای سفارشی

observables و RxJS

• درک Observables و RxJS
• IQ – Observables و RxJS
• مدیریت Observables و Subscribers
• IQ – مدیریت Observables و Subscribers
• لغو اشتراک از یک Observable
• IQ – لغو اشتراک از یک Observable
• درک Async Pipe
• IQ – درک Async Pipe
• وظیفه – دریافت داده‌های JSON با Async Pipe
• مقایسه Hot Observable و Cold Observable

RxJS Operators

• عملگر { of } در RxJS
• IQ – عملگر { of } در RxJS
• عملگر { from } در RxJS
• IQ – عملگر { from } در RxJS
• عملگر { interval } در RxJS
• عملگر { timer } در RxJS
• وظیفه – پیاده‌سازی یک اسپینر بارگذاری
• عملگر { EMPTY } در RxJS
• IQ – عملگر { EMPTY } در RxJS
• عملگرهای لوله‌ای (Pipeable Operators) در RxJS
• IQ – عملگرهای لوله‌ای (Pipeable Operators) در RxJS
• عملگر { filter } در RxJS
• عملگر { map } در RxJS
• IQ – عملگر { map } در RxJS
• عملگر { mergeMap } در RxJS
• IQ – عملگر { mergeMap } در RxJS
• وظیفه – نمایش محصولات مرتبط با کاربر
• عملگر { concatMap } در RxJS
• IQ – عملگر { concatMap } در RxJS
• عملگر { switchMap } در RxJS
• IQ – عملگر { switchMap } در RxJS

مدیریت فراخوانی http با انگولار

• ارسال درخواست‌های HTTP با HttpClient
• ارسال درخواست‌های HTTP با Observable
• پیاده‌سازی درخواست HTTP POST
• ویرایش داده‌ها با درخواست PUT
• حذف داده‌ها با درخواست DELETE
• وظیفه – اپلیکیشن CRUD – نمایش محصولات با درخواست GET (بخش ۱)
• وظیفه – اپلیکیشن CRUD – افزودن محصولات با درخواست POST (بخش ۲)
• وظیفه – اپلیکیشن CRUD – دریافت داده‌های محصول قبل از به‌روزرسانی (بخش ۳)
• وظیفه – اپلیکیشن CRUD – به‌روزرسانی محصولات با درخواست PUT (بخش ۴)
• وظیفه – اپلیکیشن CRUD – حذف محصولات با درخواست DELETE (بخش ۵)

سیگنال ها (Signals)

• مقدمه‌ای بر سیگنال‌ها (Signals)
• ایجاد سیگنال
• IQ – ایجاد سیگنال
• به‌روزرسانی مقدار سیگنال
• IQ – متد update()
• وظیفه – لیست کارها (To-do List)
• سیگنال‌های محاسباتی (Computed Signals)
• IQ – سیگنال‌های محاسباتی
• درک تابع effect()
• پاک‌سازی effect()
• ردگیری نکردن سیگنال‌ها (Untracking Signals)
• وظیفه – به‌روزرسانی سبد خرید با استفاده از سیگنال‌ها
• سیگنال‌های مرتبط (Linked Signals)
• تبدیل Observable به سیگنال
• وظیفه – فیلتر کردن محصولات بر اساس ورودی کاربر با linkedSignal() (بخش ۱)
• وظیفه – فیلتر کردن محصولات بر اساس ورودی کاربر با linkedSignal() (بخش ۲)
• وظیفه – فیلتر کردن محصولات بر اساس ورودی کاربر با linkedSignal() (بخش ۳)

حاصل دوره

دانشجویان عزیز با گذراندن این دوره به طور کامل با انگولار ورژن 18 و 19 آشنا می شوند و می توانند به کمک این فریم ورک قدرتمند و محبوب پروژه های مختلف و حتی پیچیده را توسعه دهند.