آموزش 30 روز با Angular: ساخت 30 پروژه با Angular - آخرین آپدیت

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• ارائه دوره Course presentation

راه اندازی محیط Environment Setup

• نصب Visual Studio Code در ویندوز Install Visual Studio Code on Windows

• تنظیم افزونه ها برای Visual Studio Code Setting up Extensions for Visual Studio Code

• نصب Node.js و Angular 19 در ویندوز Install Node.js and Angular 19 on Windows

• رفع خطاهای Execution Policy در PowerShell در ویندوز Solve Execution Policy Errors in PowerShell on Windows

• ایجاد اولین پروژه Angular Creating your first Angular Project

کد منبع Source code

• کدهای منبع تمام پروژه ها Source codes of all projects

روز 1: کارت پروفایل Day 1: Profile Card

• معرفی Introduction

• راه اندازی پروژه Setting up our project

• درون یابی رشته (String interpolation) String interpolation

• اتصال داده دو طرفه (Two way data binding) Two way data binding

• نکات مهم برای یادآوری Important things to remember

روز 2: شمارنده Day 2: Counter

• معرفی Introduction

• راه اندازی پروژه Setting up project

• کدنویسی برنامه Coding the app

• وضعیت شمارنده Counter status

• استایل دهی پویا (Dynamic Styling) Dynamic Styling

• کپی و پیست استایل Styling Copy and Paste

• اعمال کلاس پویا (Dynamic Class Application) Dynamic Class Application

روز 3: لیست انجام ساده Day 3: Simple todo

• معرفی Introduction

• کدنویسی برنامه Coding the app

• نکات کلیدی Takeaways

روز 4: کرنومتر Day 4: Stopwatch

• معرفی Introduction

• راه اندازی پروژه Setting up project

• کدنویسی پروژه Coding project

• عملگر سه تایی و پایپ (Ternary operator and pipe) Ternary operator and pipe

روز 5: حدس عدد Day 5: Guess the number

• معرفی Introduction

• آماده سازی پروژه Project preparation

• کدنویسی برنامه Coding the app

روز 6: تیک تاک تو Day 6: Tic Tac Toe

• معرفی Introduction

• راه اندازی پروژه Setting up project

• کدنویسی برنامه Coding the app

• تکمیل پروژه Finishing project

روز 7: لیست فیلتر پویا Day 7: Dynamic Filter List

• معرفی Introduction

• پاکسازی پروژه Cleaning project

• موارد کپی و پیست Items to copy and paste

• کدنویسی پروژه Coding the project

• توضیحات پایپ Pipe explanations

• استایل دهی Styling

روز 8: بازی سنگ کاغذ قیچی Day 8: Paper Rock Scissors Game

• معرفی Introduction

• راه اندازی پروژه Setting up project

• کدنویسی فایل ts Coding ts file

• کدنویسی قالب Coding template

• استایل دهی و اتمام پروژه Styling and finishing the project

روز 9: آکاردئون تعاملی با انیمیشن های Angular Day 9: Interactive Accordion with Angular Animations

• معرفی Introduction

• راه اندازی پروژه Setting up project

• سوالات متداول (faq) faq

• کدنویسی FAQ Coding FAQ

• اضافه کردن انیمیشن ها Adding animations

• تئوری انیمیشن Animation theory

روز 10: تولید کننده جوک تصادفی Day 10: Random Joke Generator

• معرفی Introduction

• راه اندازی پروژه Setting up project

• ایجاد سرویس جوک Creating the joke service

• کدنویسی برنامه Coding the app

• استایل دهی و اتمام برنامه Styling and finishing the app

روز 11: اسکرول بی نهایت Day 11: Infinite Scroll

• معرفی Introduction

• راه اندازی پروژه Setting up project

• سرویس پست Post Service

• کامپوننت پست Post component

• لیست پست ها Post list

روز 12: ساعت آنالوگ Day 12: Analog Clock

• معرفی Introduction

• انتخاب الگو Choosing pattern

• راه اندازی پروژه Setting up project

• ایجاد اعداد Creating numbers

• اتمام پروژه Finishing project

• تست با MockTimeService Testing with MockTimeService

روز 13: فرم بازخورد با استفاده از FormsModule Day 13: Feedback form using FormsModule

• معرفی Introduction

• راه اندازی پروژه Setting up project

• ایجاد و استایل دهی فرم Creating and styling form

• اتمام پروژه Finishing the project

روز 14: فرم تماس با استفاده از ReactiveFormsModule Day 14: Contact form using ReactiveFormsModule

• معرفی Introduction

• راه اندازی پروژه Setting up project

• ایجاد قالب و استایل دهی Creating template && styling

• کدنویسی فایل ts Coding ts file

• اتمام پروژه Finishing the project

روز 15: دایرکتیوهای سفارشی Day 15: Custom Directives

• معرفی Introduction

• راه اندازی پروژه Setting up project

• دایرکتیو برجسته سازی با هاور Hover highlight directive

• دایرکتیو تغییر متن Text transform directive

• دایرکتیو کلیک بیرون Click outside directive

• دایرکتیو تمرکز Focus on directive

روز 16: ماشین حساب Day 16: Calculator

• معرفی Introduction

• راه اندازی پروژه Setting up project

• ایجاد طرح بندی ماشین حساب Creating calculator layout

• اتمام برنامه Finishing application

روز 17: مبدل ارز Day 17: Currency Converter

• معرفی Introduction

• راه اندازی پروژه Setting up project

• نرخ های تبدیل برای کپی و پیست Conversion Rates to copy and paste

• سرویس مبدل ارز Currency Converter Service

• پرچم ها برای کپی و پیست Flags to copy and paste

• کدنویسی کامپوننت Coding component

• کدنویسی قالب Coding template

• بازسازی نام متد Refactoring method name

• استایل دهی و اتمام پروژه Styling and finishing project

روز 18: آب و هوا Day 18: Weather

• معرفی Introduction

• راه اندازی پروژه Setting up project

• سرویس آب و هوا Weather service

• متدهای Emoji برای کپی و پیست Emoji methods to copy and paste

• کامپوننت آب و هوا Weather component

• قالب آب و هوا Weather template

• استایل دهی و اتمام برنامه Styling and finishing app

• رفع باگ Bug correction

روز 19: جستجوی Emoji Day 19: Emoji Search

• معرفی Introduction

• راه اندازی پروژه Setting up project

• emojis.json emojis.json

• سرویس Emoji و HttpClient Emoji Service and HttpClient

• استایل دهی سراسری Global Styling

• انتخاب تم Theme picker

• کامپوننت جستجوی Emoji Emoji Search Component

• قالب جستجوی Emoji Emoji Search Template

• استایل دهی و اتمام پروژه Styling and finishing the project

روز 20: نمودارهای Crypto Day 20: Crypto Charts

• معرفی Introduction

• راه اندازی پروژه Setting up project

• هدر Header

• سرویس CryptoPrice CryptoPrice Service

• متد updateChart برای کپی و پیست updateChart method to copy and paste

• نمودار قیمت Crypto Crypto price chart

• رشته برای کپی و پیست string to copy and paste

• گزینه های Crypto Crypto Options

• استایل دهی و اتمام برنامه Styling and finishing app

روز 21: تقویم Day 21: Calendar

• معرفی Introduction

• راه اندازی پروژه Setting up project

• سرویس تقویم Calendar Service

• کارت روز Day card

• صفحه تقویم Calendar Page

• اتمام پروژه Finishing the project

روز 22: چکرز (دوز) Day 22: Checkers

• معرفی Introduction

• راه اندازی پروژه Setting up project

• سرویس بازی قسمت 1 Game Service part 1

• سرویس بازی قسمت 2 Game Service part 2

• کامپوننت چکرز Checkers component

• استایل دهی چکرز Styling checkers

• اتمام برنامه Finishing app

روز 23: امنیت رمز عبور Day 23: Password Security

• معرفی Introduction

• راه اندازی پروژه Setting up project

• هدر Header

• متدها برای کپی و پیست Methods to copy and paste

• کامپوننت تولید کننده رمز عبور Password Generator component

• استایل های تولید کننده رمز عبور برای کپی و پیست Password generator styles to copy and paste

• قالب تولید کننده رمز عبور Password generator template

• قالب توضیحات رمز عبور Password Explanation template

• کامپوننت توضیحات رمز عبور Password Explanation component

• سرویس Pwned Password Pwned Password Service

• اتمام پروژه Finishing the project

روز 24: مین روب Day 24: Minesweeper

• معرفی Introduction

• راه اندازی پروژه Setting up project

• تایمر Timer

• سرویس بازی Game Service

• کامپوننت سلول Cell component

• کامپوننت مین روب Minesweeper component

• اتمام و تست برنامه Finishing and testing application

روز 25: لیست انجام پیشرفته Day 25: Advanced Todo

• معرفی Introduction

• راه اندازی پروژه Setting up project

• سرویس کاربر User Service

• سرویس انجام Todo Service

• کامپوننت انجام Todo component

• استایل برای کپی و پیست style to copy and paste

• قالب Todos Todos template

• اتمام برنامه Finishing application

روز 26: برنامه مدیریت کاربر Day 26: User Management App

• معرفی Introduction

• راه اندازی پروژه Setting up project

• سرویس کاربر User Service

• استایل های Userform برای کپی و پیست Userform styles to copy and paste

• کامپوننت Usercard Usercard component

• کامپوننت Users Users component

• کامپوننت Userform Userform component

روز 27: رزومه ساز Day 27: Resume Builder

• معرفی Introduction

• کلاس رزومه کپی پیست resume class copy paste

• راه اندازی برنامه Setting up application

• ResumeDataService ResumeDataService

• سرویس ها Services

• کامپوننت رزومه قابل ویرایش Editable resume component

• کامپوننت رزومه Resume component

• استایل دهی رزومه برای کپی و پیست Resume styling to copy and paste

• قالب رزومه Resume template

• دکمه دانلود و اتمام پروژه Download button and finishing the project

روز 28: برنامه کوئیز (آزمون) Day 28: Quiz App

• معرفی Introduction

• quizzes.json quizzes.json

• راه اندازی پروژه Setting up project

• مسیرها و هدر Routes and Header

• ایجاد مدل ها Creating models

• سرویس ها Services

• کامپوننت سوال Question component

• استایل دهی کامپوننت کوئیز برای کپی و پیست quiz component styling to copy and paste

• کامپوننت کوئیز Quiz component

• لیست کوئیزها Quiz list

• کامپوننت تاریخچه History component

• کامپوننت استایل دهی کوئیز افزودنی برای کپی و پیست add quiz styling component to copy and paste

• ایجاد کامپوننت کوئیز Create quiz component

• ایجاد قالب کوئیز Create Quiz template

• اتمام پروژه Finishing the project

روز 29: بازی تایپ - Keyboard Masters Day 29: Typing Game - Keyboard Masters

• معرفی Introduction

• themes.scss برای کپی و پیست themes.scss to copy and paste

• راه اندازی پروژه Setting up project

• هدر و فوتر Header and footer

• صفحه اصلی Home page

• صفحه درباره ما About page

• صفحه خطا Error page

• تم ها برای کپی و پیست Themes to copy and paste

• تم ها Themes

• ورودی های تابلوی امتیازات Leaderboard entries

• سرویس و کامپوننت تابلوی امتیازات Leaderboard service and component

• استایل دهی کامپوننت تابلوی امتیازات Leaderboard component styling

• سرویس تایمر Timer Service

• سرویس کلمه Word Service

• سرویس آمار Stats Service

• سرویس بازی Game Service

• راه اندازی کامپوننت تست تایپ Setting up typing test component

• کامپوننت نمایش کلمه Word display component

• کامپوننت ردیف ورودی Input row component

• استایل دهی کامپوننت آمار Stats component styling

• کامپوننت آمار Stats component

روز 30: نمونه کارها (پورتفولیو) Day 30: Portfolio

• معرفی Introduction

• راه اندازی پروژه Setting up project

• هدر Header

• دکمه سفارشی Custom button

• کامپوننت معرفی Introduction component

• استایل کامپوننت نمونه کارها portfolio component style

• کامپوننت درباره من About me component

• کامپوننت نمونه کارها Portfolio component

• کامپوننت سرویس ها Services component

• استایل کامپوننت تماس برای کپی و پیست contact component style to copy and paste

• کامپوننت تماس Contact component

• استایل نشانگر ماوس برای کپی و پیست Cursor style to copy and paste

• دایرکتیو نشانگر ماوس سفارشی Custom cursor directive