کدنویسی با Angular: اصول تا توسعه Full-Stack
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- یک راهنمای کامل برای شروع کار با Angular؛ مبانی فریمورک Angular، معماری آن، مفاهیم کلیدی TypeScript، کامپوننتها، ماژولها و قالبها را بیاموزید.
- با کامپوننتهای Angular و چگونگی تعامل آنها، ساخت بلوکهای UI قابل استفاده مجدد، هوکهای چرخه عمر و ارتباط بین کامپوننتها با Input و Output آشنا شوید.
- به بررسی دنیای فرمهای Template-driven و Reactive بپردازید و کنترلهای فرم، گروههای فرم، آرایههای فرم و تکنیکهای اعتبارسنجی را برای مدیریت پویای فرمها یاد بگیرید.
- مقدمهای بر مسیریابی سمت کلاینت، پیکربندی مسیرها، محافظت از مسیرها با Route Guards، پارامترهای داینامیک و ناوبری با استفاده از Angular Router
- نقش سرویسها و تزریق وابستگی را درک کرده، سرویسها را ایجاد و مدیریت کنید، درخواستهای HTTP ارسال کنید، از APIها استفاده کنید، خطاها را مدیریت کرده و با بکاند یکپارچه شوید.
- اهمیت مدیریت استیت، استفاده از RxJS برای observables و برنامهنویسی reactive را بیاموزید و با NgRx و سایر کتابخانههای محبوب آشنا شوید.
- چگونگی اتصال Angular به تکنولوژیهای بکاند مانند Node.js و Express و MongoDB را یاد بگیرید و با یکپارچهسازی RESTful API و احراز هویت مبتنی بر JWT آشنا شوید.
- فرآیند استقرار اپلیکیشنهای Angular روی پلتفرمهای پروداکشن مانند Firebase و Vercel و Netlify یا سرورهای وب سنتی را بررسی کرده و با پیکربندی محیطهای مختلف آشنا شوید.
پیشنیازهای دوره
- داشتن درک اولیه یا علاقه زیاد به HTML و CSS و JavaScript، که به عنوان سنگ بنای یادگیری Angular و توسعه full-stack عمل میکنند.
- تمایل به یادگیری و درک مفاهیم اصلی Angular مانند کامپوننتها، ماژولها، data binding، دایرکتیوها، سرویسها، مسیریابی و مدیریت فرمها برای ساخت اپلیکیشنهای فرانتاند مدرن و مقیاسپذیر
- علاقه به یادگیری تکنولوژیهای بکاند مانند Node.js و Express.js و MongoDB و یکپارچهسازی آنها با Angular برای ساخت اپلیکیشنهای قدرتمند full-stack
- کنجکاوی برای پیادهسازی RESTful API، احراز هویت کاربران با JWT و درک چگونگی ارتباط فرانتاند و بکاند در پروژههای واقعی
- انگیزه برای ساخت اپلیکیشنهای کامل و آماده استقرار، استقرار آنها روی پلتفرمهای ابری (مانند Firebase و Vercel یا Heroku) و پیادهسازی بهترین شیوههای بهینهسازی عملکرد مانند lazy loading
توضیحات دوره
آموزش معماری مبتنی بر کامپوننت در Angular، فرمها و اعتبارسنجی، مسیریابی و ناوبری، سرویسها و HTTPClient، یکپارچهسازی با بکاند و استقرار اپلیکیشنهای Angular
توضیحات
گام بعدی را در مسیر شغلی خود بردارید! این دوره فرصتی است تا مهارتهای کدنویسی Angular خود را تقویت کنید، کارایی خود را در ارزیابی و برنامهریزی بهبود دهید و تأثیری مثبت و ماندگار در سازمان یا کسبوکار خود بگذارید.
با راهنمایی این دوره، یاد میگیرید چگونه:
- به تمام مفاهیم اساسی توسعه Angular، از جمله کامپوننتها، ماژولها، قالبها، سرویسها، data binding، دایرکتیوها، مسیریابی و مدیریت فرمها برای ساخت اپلیکیشنهای فرانتاند پویا مسلط شوید.
- مهارتهای توسعه وب خود را با یادگیری یکپارچهسازی Angular با Node.js و Express و MongoDB متحول کرده و اپلیکیشنهای full-stack مقیاسپذیر و آماده استقرار را از ابتدا بسازید.
- به ساختارهای پیشنهادی پروژه، استانداردهای کدنویسی و الگوهای قابل استفاده مجدد که در پروژههای واقعی Angular و full-stack رایج هستند، دسترسی پیدا کنید.
- مفاهیم ضروری مانند مدیریت استیت، یکپارچهسازی API، احراز هویت کاربران با JWT، اعتبارسنجی فرمها و بهترین شیوههای استقرار را که برای ساخت اپلیکیشنهای در سطح سازمانی حیاتی هستند، درک و پیادهسازی کنید.
- یاد بگیرید چگونه اپلیکیشنهای تکصفحهای (SPA) واکنشگرا، سریع و سازگار با SEO را با استفاده از Angular ایجاد و مستقر کرده و ویژگیهای بلادرنگ و یکپارچهسازی با سرویسهای دیگر را پیادهسازی کنید.
- با سرمایهگذاری روی یادگیری توسعه full-stack با Angular، از مزایای بلندمدت آن در مسیر شغلی خود بهرهمند شوید؛ مهارتی که در شرکتهای نرمافزاری، استارتاپها و بازارهای فریلنسری در سراسر جهان بسیار ارزشمند است.
چارچوب کلی دوره
این دوره شامل چندین پروژه کدنویسی واقعی، منابعی مانند قالبهای آماده، کتابخانههای کامپوننت، چیت شیت ها، جزوات دقیق، تکالیف، آزمونها، چالشهای کدنویسی و ارزیابیهای مبتنی بر پروژه است تا درک شما را از توسعه Angular، مدیریت استیت با RxJS، مسیریابی، فرمها و یکپارچهسازی با بکاند عمیقتر کند.
- در بخش اول دوره، جزئیات اصول Angular را خواهید آموخت؛ شامل مفاهیم ضروری TypeScript، ماژولها، کامپوننتها، سرویسها، مسیریابی و ناوبری، فرمها (Template-driven و Reactive) و استفاده از APIها از طریق HTTPClient
- در بخش میانی دوره، درک عمیقی از مفاهیم پیشرفته Angular توسعه خواهید داد؛ مانند مدیریت استیت (با استفاده از مبانی RxJS و NgRx)، احراز هویت و مدیریت دسترسی، بهینهسازی عملکرد از طریق Lazy Loading و بهترین شیوهها برای ساختار پروژههای بزرگ Angular
- در بخش پایانی دوره، به بررسی دنیای توسعه Full-Stack خواهید پرداخت؛ یاد میگیرید که چگونه فرانتاند Angular را با بکاند (Node.js و Express و MongoDB) یکپارچه کنید، RESTful API بسازید، احراز هویت JWT را پیادهسازی کرده و در نهایت، اپلیکیشن Full-Stack کامل را روی پلتفرمهای ابری مانند Firebase و Vercel یا AWS مستقر کنید.
این دوره با یک پروژه جامع به پایان میرسد که در آن تمام آموختههای خود را برای ساخت یک اپلیکیشن Full-Stack با Angular از ابتدا به کار میگیرید. شامل پیادهسازی UI/UX فرانتاند، APIهای بکاند، احراز هویت و عملیات پایگاه داده - به همراه بررسی کد، شیوههای تست و استراتژیهای استقرار.
- در بخش آخر دوره، دانش خود را در زمینه همکاری و ارتباطات در کدنویسی Angular از مبانی تا Full-Stack در یک پروژه DevOps توسعه خواهید داد.
محتوای دوره:
ماژول 1: مقدمهای بر Angular
ماژول 2: اصول Angular
ماژول 3: کار با سرویسها و تزریق وابستگی
ماژول 4: مسیریابی و ناوبری در Angular
ماژول 5: فرمها در Angular
ماژول 6: کار با دایرکتیوها و پایپها در Angular
ماژول 7: مفاهیم پیشرفته Angular
ماژول 8: مدیریت استیت در Angular
ماژول 9: تست اپلیکیشنهای Angular
ماژول 10: استقرار اپلیکیشنهای Angular
بخش 2 - پروژه جامع: توسعه یک اپلیکیشن Full-Stack با Angular
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان فرانتاند و full-stack که به یادگیری Angular علاقهمند هستند.
- دانشجویان و فارغالتحصیلان جدید که به دنبال ایجاد یک پایه محکم در توسعه وب با Angular هستند.
- متخصصان و توسعهدهندگان جونیور که میخواهند با تسلط به Angular، مهارتهای خود را ارتقا داده و به نقشهای توسعه full-stack منتقل شوند.
- بنیانگذاران استارتاپ، فریلنسرها و مدیران فنی که میخواهند با درک کامل چرخه توسعه، مدیریت توسعه وب اپلیکیشنها را بر عهده بگیرند.
کدنویسی با Angular: اصول تا توسعه Full-Stack
-
مقدمه و برنامه آموزشی 09:16
-
ماژول 1: مقدمهای بر Angular 03:18
-
ویژگیهای کلیدی Angular 02:51
-
ویژگیهای کلیدی Angular (بخش دوم) 03:28
-
معماری Angular 02:54
-
معماری Angular (بخش دوم) 02:55
-
راهاندازی محیط توسعه Angular 02:03
-
ایجاد یک کامپوننت ساده در Angular 01:38
-
ایجاد یک کامپوننت ساده در Angular (بخش دوم) 01:33
-
ایجاد یک کامپوننت ساده در Angular (بخش سوم) 01:15
-
جمعبندی 01:52
-
ماژول ۲: اصول Angular 03:42
-
Angular چیست؟ 03:32
-
ویژگیهای کلیدی Angular 02:17
-
ویژگیهای کلیدی Angular (بخش دوم) 02:35
-
ویژگیهای کلیدی Angular (بخش سوم) 01:46
-
ویژگیهای کلیدی Angular (بخش چهارم) 02:23
-
ویژگیهای کلیدی Angular (بخش پنجم) 02:04
-
ویژگیهای کلیدی Angular (بخش ششم) 01:51
-
ویژگیهای کلیدی Angular (بخش هفتم) 04:31
-
ویژگیهای کلیدی Angular (بخش هشتم) 02:04
-
معماری Angular 03:22
-
راهاندازی یک کامپوننت Angular 03:09
-
ایجاد یک کامپوننت ساده در Angular 03:53
-
ویرایش فایل my-component.component.html 02:47
-
جمعبندی 02:50
-
ماژول 3: کار با سرویسها و تزریق وابستگی 03:12
-
سرویسها در Angular چه هستند؟ 03:07
-
تزریق وابستگی چیست؟ 02:37
-
ایجاد یک سرویس در Angular 02:56
-
گام دوم: پیادهسازی سرویس 04:30
-
گام دوم: پیادهسازی سرویس (بخش دوم) 04:00
-
استفاده از سرویس در یک کامپوننت 03:28
-
گام دوم: نمایش داده در HTML 02:30
-
ارائه سرویس در یک ماژول 04:03
-
ارائه سرویس در یک ماژول (بخش دوم) 03:34
-
استفاده از سرویس برای درخواستهای HTTP 03:12
-
استفاده از سرویس برای درخواستهای HTTP (بخش دوم) 04:17
-
گام اول: ایمپورت کردن ماژول HttpClient 03:22
-
گام دوم: استفاده از سرویس در کامپوننت 04:04
-
نمایش داده در HTML 03:32
-
تزریق وابستگی سلسلهمراتبی 03:41
-
خلاصه 02:49
-
ماژول 4: مسیریابی و ناوبری در Angular 03:58
-
راهاندازی مسیریابی در Angular 03:42
-
تعریف مسیرها 04:56
-
تعریف مسیرها (بخش دوم) 04:44
-
راه اندازی لینکهای مسیریابی 05:15
-
ناوبری به صورت برنامهنویسی 04:38
-
ناوبری به صورت برنامهنویسی (بخش دوم) 02:57
-
پارامترهای مسیر (مسیریابی داینامیک) 04:08
-
دریافت پارامترها در user.component.ts 03:48
-
ویرایش فایل app.component.html 04:19
-
پارامترهای کوئری 04:08
-
دریافت پارامترهای کوئری در user.component.ts 05:41
-
محافظهای مسیر 04:09
-
محافظهای مسیر (بخش دوم) 05:42
-
اعمال محافظ در فایل app-routing.module.ts 05:23
-
Lazy Loading برای بهینهسازی عملکرد 05:35
-
تغییر مسیر 05:28
-
خلاصه 03:21
-
ماژول 5: فرمها در Angular 03:10
-
فرمهای Template-Driven 02:46
-
گام اول: فعالسازی FormsModule 08:32
-
گام دوم: ایجاد یک فرم ساده 06:40
-
گام سوم: مدیریت ارسال فرم 06:16
-
فرمهای Reactive (استفاده از FormGroup و FormControl) 04:31
-
گام دوم: تعریف فرم در کامپوننت 05:00
-
گام دوم: تعریف فرم در کامپوننت (بخش دوم) 05:36
-
گام سوم: اتصال فرم به HTML 06:33
-
گام سوم: اتصال فرم به HTML (بخش دوم) 06:43
-
افزودن FormArray (برای فیلدهای داینامیک) 06:08
-
ویرایش فایل app.component.html 05:10
-
استفاده از FormBuilder (برای راهاندازی آسانتر) 05:40
-
جمعبندی نهایی 03:14
-
ماژول 6: کار با دایرکتیوها و پایپها در Angular 02:44
-
دایرکتیوها در Angular 03:22
-
دایرکتیوهای ساختاری 03:59
-
دایرکتیوهای ساختاری (بخش دوم) 04:24
-
کار با ngSwitch* برای نمایش شرطی چندگانه 04:27
-
دایرکتیوهای خصوصیتی 04:28
-
دایرکتیوهای خصوصیتی (بخش دوم) 03:40
-
ایجاد یک دایرکتیو سفارشی 03:19
-
گام دوم: ویرایش دایرکتیو (highlight.directive.ts) 05:47
-
گام سوم: استفاده از دایرکتیو در HTML 03:12
-
پایپها در Angular 02:35
-
پایپهای پیشفرض 03:34
-
قالببندی ارز (پایپ currency) 04:51
-
پایپهای Uppercase و Lowercase 04:10
-
ایجاد یک پایپ سفارشی 05:44
-
گام سوم: استفاده در HTML 03:16
-
جمعبندی نهایی 03:29
-
ماژول 7: مفاهیم پیشرفته Angular 03:26
-
تشخیص تغییر و بهینهسازی عملکرد 02:31
-
استراتژیهای تشخیص تغییر 02:27
-
مثال با استفاده از OnPush 05:19
-
بهینهسازی عملکرد با TrackBy 04:21
-
Lazy Loading ماژولها 02:28
-
ایجاد یک ماژول با Lazy Loading 04:53
-
تکنیکهای پیشرفته مسیریابی 03:02
-
تکنیکهای پیشرفته مسیریابی (بخش دوم) 04:31
-
تکنیکهای پیشرفته مسیریابی (بخش سوم) 04:21
-
مدیریت استیت با NgRx 02:22
-
نصب NgRx 03:42
-
راهاندازی NgRx Store 03:19
-
تعریف State در user.reducer.ts 04:27
-
تعریف Actions در user.actions.ts 03:35
-
دسترسی به State در کامپوننت 05:27
-
فرمهای پیشرفته در Angular 05:25
-
تزریق وابستگی و سرویسها 04:01
-
وبسوکتها و ارتباطات بلادرنگ 04:09
-
امنیت در Angular 02:57
-
جلوگیری از حملات XSS 03:58
-
استفاده از Content Security Policy (CSP) 03:54
-
وب اپلیکیشنهای پیشرونده (PWA) 03:07
-
تست در Angular 03:10
-
تست واحد با Jasmine 03:10
-
تست End-to-End با Cypress 02:52
-
جمعبندی 03:31
-
ماژول 8: مدیریت استیت در Angular 03:32
-
چرا به مدیریت استیت نیاز داریم؟ 03:24
-
رویکردهای مختلف مدیریت استیت در Angular 02:57
-
مدیریت استیت در سطح کامپوننت (State محلی) 04:27
-
مدیریت استیت مبتنی بر سرویس (سرویسهای Singleton) 05:14
-
استفاده از سرویس در کامپوننت 05:38
-
استفاده از RxJS و BehaviorSubject برای مدیریت استیت 05:45
-
مشترک شدن با استیت در کامپوننتها 04:56
-
مدیریت استیت پیشرفته با NgRx (معادل Redux برای Angular) 02:43
-
NgRx چیست؟ 02:29
-
نصب NgRx 03:31
-
راهاندازی NgRx در یک اپلیکیشن Angular 03:19
-
گام دوم 04:14
-
گام سوم 05:09
-
گام چهارم 04:57
-
گام پنجم 05:42
-
گام ششم 03:32
-
انتخاب رویکرد مناسب برای مدیریت استیت 04:06
-
دیباگ کردن State با Redux DevTools 03:45
-
دیباگ کردن State با Redux DevTools (بخش دوم) 04:39
-
جمعبندی 02:59
-
ماژول 9: تست اپلیکیشنهای Angular 03:17
-
چرا اپلیکیشنهای Angular را تست کنیم؟ 03:16
-
انواع تست در Angular 03:18
-
راهاندازی محیط تست در Angular 03:17
-
تست واحد در Angular (با Jasmine و Karma) 02:49
-
تست واحد (فایل counter.component.spec.ts) 04:08
-
نمونه تست واحد (counter.component.spec.ts) 06:39
-
تست کردن یک سرویس 04:13
-
نمونه تست واحد برای سرویس 05:13
-
تست درخواستهای HTTP با HttpClientTestingModule 05:45
-
تست واحد (فایل user.service.spec.ts) 07:30
-
تست یکپارچهسازی در Angular 05:49
-
تست یکپارچهسازی (فایل dashboard.component.spec.ts) 05:14
-
تست یکپارچهسازی (فایل dashboard.component.spec.ts) (بخش دوم) 05:40
-
تست End-to-End (E2E) با Cypress 06:38
-
اجرای تستها 02:50
-
بهترین شیوهها برای تست در Angular 03:11
-
جمعبندی 02:54
-
ماژول 10: استقرار اپلیکیشنهای Angular 03:10
-
آمادهسازی اپلیکیشن Angular برای استقرار 03:06
-
استقرار روی GitHub Pages 04:18
-
استقرار روی Firebase Hosting 04:31
-
استقرار روی Netlify 04:48
-
استقرار روی AWS S3 (وب سرویسهای آمازون) 04:53
-
استقرار روی Vercel 03:43
-
بهترین شیوهها برای استقرار اپلیکیشنهای Angular 04:34
-
جمعبندی 04:08
-
بخش 2 - پروژه جامع: توسعه یک اپلیکیشن Full-Stack با Angular 49:09
مشخصات آموزش
کدنویسی با Angular: اصول تا توسعه Full-Stack
- تاریخ به روز رسانی: 1404/09/07
- سطح دوره:متوسط
- تعداد درس:168
- مدت زمان :11:54:59
- حجم :2.6GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy