آموزش مواد زاویه ای در عمق (Angular 15)

Angular Material In Depth (Angular 15)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: گشت راهنمای عمیق به کتابخانه اجزای Angular Material (در Angular 15) کد در مخزن Github با فایل‌های ZIP قابل دانلود در هر بخش آموزش نحوه استفاده از کتابخانه مواد Angular یاد بگیرید چگونه برنامه‌های کاربردی پاسخگو با Angular Material طراحی کنید یاد بگیرید چگونه منوی ناوبری را تنظیم کنید. از برنامه Angular Material خود یاد بگیرید چگونه از متداول‌ترین ابزارک‌های Angular Material Form استفاده کنید بر جدول داده‌های مواد زاویه‌ای مسلط شوید، صفحه‌بندی، مرتب‌سازی و فیلتر کردن سمت سرور را بیاموزید یاد بگیرید چگونه دیالوگ‌های سفارشی Angular Material بسازید یاد بگیرید چگونه یک تم سفارشی Angular Material بسازید. یادگیری کامپوننت Angular Material Tree، Virtual Scrolling و سایر اجزای پیشرفته

این دوره با جزئیات کتابخانه اجزای Angular Material را پوشش می‌دهد و با مخزن Github در حال اجرا همراه است.

این دوره به طور خلاصه

Angular یک چارچوب شگفت‌انگیز است که کارهای زیادی را برای ما انجام می‌دهد، اما چیزی که ماژول‌های اصلی به تنهایی انجام نمی‌دهند این است که مؤلفه‌های متداول رابط کاربری را در اختیار شما قرار می‌دهند.

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

این نه تنها عملی نیست، بلکه در بیشتر موارد غیرممکن است، زیرا توسعه و آزمایش برخی از این مؤلفه‌ها با توجه به پیچیدگی‌شان، ممکن است هفته‌ها تا ماه‌ها طول بکشد!

همچنین، در مورد استایل و قالب بندی برنامه خود و اطمینان از اینکه همه چیز مرتب و حرفه ای به نظر می رسد، چطور؟

تصور کنید چه چیزی می‌خواهد برای استایل دادن به کل برنامه‌تان از ابتدا، از یک صفحه کاملاً خالی باشد. این حجم عظیمی از کار و توسعه سفارشی است که اکثر شرکت ها ترجیح می دهند از آن اجتناب کنند.

و بنابراین اینجا جایی است که Angular Material وارد می شود! :-)

Angular Material یک مجموعه اجزای شگفت‌انگیز برای Angular است که بر اساس طراحی متریال (یک استاندارد توسعه رابط کاربری از Google) است.

با Angular Material، فقط با افزودن چند مؤلفه و سبک به برنامه‌تان، می‌توانید به سرعت به برنامه‌های خود ظاهر و ظاهری شبیه به Android مانند Material Design بدهید.

همچنین، شما هرگز مجبور نخواهید بود انتخابگر تاریخ خود و بسیاری دیگر از اجزای معمول مورد نیاز خود را توسعه دهید، همه چیز از ابتدای پروژه شما در دسترس است.

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

این مؤلفه‌ها که توسط خود Google ایجاد شده‌اند، برخی از باکیفیت‌ترین مؤلفه‌های رابط کاربری هستند که می‌توانید برای ساخت برنامه خود انتخاب کنید، و از روز اول در پروژه‌تان آماده استفاده هستند.

نمای کلی دوره

در این دوره ما قصد داریم یک نمونه برنامه Angular را از ابتدا با استفاده از Angular Material بسازیم.

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

>

سپس یاد خواهیم گرفت که چگونه از برخی از رایج‌ترین کنترل‌های فرم مورد نیاز، مانند ورودی‌ها و نواحی نوشتاری، انتخابگرهای تاریخ، فهرست‌های بازشو، دکمه‌های رادیویی و کادرهای انتخاب، و سایر اجزای فرم رایج استفاده کنیم.

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

نحوه صفحه‌بندی داده‌ها را در جدول داده‌ها نشان می‌دهیم، و زمانی که داده‌ها بارگیری می‌شوند، نشانگر بارگیری را به کاربر نمایش می‌دهیم.

ما همچنین یک ویژگی بسیار رایج که دیالوگ‌ها هستند را به تفصیل پوشش می‌دهیم و در مورد زمان استفاده و زمان استفاده نکردن از آنها بحث خواهیم کرد و در مورد برخی از بهترین روش‌های مفید صحبت خواهیم کرد.

سپس برخی از پیشرفته‌ترین مؤلفه‌های مجموعه Angular Material را پوشش می‌دهیم، از جمله ویژگی‌های قدرتمند کشیدن و رها کردن، قابلیت‌های طراحی واکنش‌گرای Angular Material، و همچنین نحوه استفاده از مؤلفه درخت مواد را به تفصیل توضیح خواهیم داد.

ما یاد خواهیم گرفت که چگونه با استفاده از پیمایش مجازی حجم زیادی از داده ها را مدیریت کنیم، و دوره را با یادگیری نحوه ایجاد تم های سفارشی خود به پایان خواهیم رساند.

فهرست مطالب

این دوره به موضوعات زیر می پردازد:

  • مواد زاویه ای را از ابتدا تنظیم کنید

  • پیمایش و کانتینرها، منوی جانبی، محفظه برگه

  • داده‌ها را با کارت‌ها نمایش دهید، از برخی دکمه‌ها استفاده کنید

  • کنترل‌ها و دکمه‌های فرم رایج - ایجاد فرم دوره

  • ورودی ها و نواحی متن

  • دکمه‌های رادیویی، کادرهای انتخاب، نکات ابزار

  • انتخابگر تاریخ، قالب‌بندی تاریخ/زمان

  • نمایش خطاهای فرم

  • جدول داده های زاویه ای در عمق

  • جدول درون خطی قابل ویرایش

  • ردیف های جدول قابل گسترش

  • نشانگر صفحه‌بندی و بارگیری

  • روکش‌ها، بهترین روش‌های استفاده از آنها

  • کشیدن و رها کردن

  • طراحی پاسخگو با mat-grid-list

  • ناظرهای نقطه شکست پاسخگو

  • جزء درخت

  • پیمایش مجازی - مدیریت مقدار زیادی داده

  • طرح‌های زمینه سفارشی

  • تغییر تم در زمان اجرا

در این دوره چه چیزی یاد خواهید گرفت؟

در پایان این دوره، با استفاده از کتابخانه Angular Material برای ساخت و سبک سازی برنامه های خود احساس راحتی خواهید داشت.

می‌دانید چگونه Angular Material را به یک برنامه Angular موجود اضافه کنید، و با اکثر مؤلفه‌های پرکاربرد آن و همچنین با بسیاری از پیشرفته‌ترین مؤلفه‌ها آشنا خواهید شد.

دروس رایگان دوره را در زیر نگاه کنید و لطفاً از دوره لذت ببرید!


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

معرفی Introduction

  • مهم IMPORTANT

  • مواد زاویه ای در عمق - نمای هلیکوپتر Angular Material In Depth - Helicopter View

  • نحوه شرکت در این دوره - توسعه محلی خود را تنظیم کنید How to Take this Course - Set Up Your Local Development

  • Angular Material چیست؟ What is Angular Material?

  • چگونه متریال زاویه ای را به پروژه خود اضافه کنید How to Add Angular Material to Your Project

معرفی Introduction

  • مهم IMPORTANT

  • مواد زاویه ای در عمق - نمای هلیکوپتر Angular Material In Depth - Helicopter View

  • نحوه شرکت در این دوره - توسعه محلی خود را تنظیم کنید How to Take this Course - Set Up Your Local Development

  • Angular Material چیست؟ What is Angular Material?

  • چگونه متریال زاویه ای را به پروژه خود اضافه کنید How to Add Angular Material to Your Project

ناوبری مواد زاویه ای و اجزای کانتینر Angular Material Navigation and Container Components

  • راه اندازی یک سیستم ناوبری کامل با مواد زاویه ای Setting Up a Complete Navigation System With Angular Material

  • منوهای کشویی مواد زاویه ای Angular Material Dropdown Menus

  • گروه های برگه مواد زاویه ای Angular Material Tab Groups

  • کارت های مواد زاویه ای - چگونه از آنها استفاده کنیم؟ Angular Material Cards - How to Use Them?

  • فیلد ورودی مواد زاویه ای: بسیاری از گزینه های مفید Angular Material Input Field: Lots Of Useful Options

  • جعبه انتخاب مواد زاویه ای Angular Material Select Box

  • چک باکس Angular Material Angular Material Check Box

  • منطقه متن مواد زاویه ای Angular Material Text Area

  • جدول داده های مواد زاویه ای - بارگیری داده ها از قسمت پشتیبان Angular Material Data Table - Loading Data From the Backend

  • نشانگر بارگذاری مواد زاویه ای Angular Material Loading Indicator

  • صفحه‌بندی جدول داده‌های مواد زاویه‌ای Angular Material Data Table Paginator

  • جدول داده های مواد زاویه ای - ردیف های داده چند قالبی و ردیف های قابل گسترش Angular Material Data Table - Multi-Template Data Rows and Expandable Rows

  • جدول داده های مواد زاویه ای - هدر چسبنده و ستون های چسبنده Angular Material Data Table - Sticky Header and Sticky Columns

ناوبری مواد زاویه ای و اجزای کانتینر Angular Material Navigation and Container Components

  • راه اندازی یک سیستم ناوبری کامل با مواد زاویه ای Setting Up a Complete Navigation System With Angular Material

  • منوهای کشویی مواد زاویه ای Angular Material Dropdown Menus

  • گروه های برگه مواد زاویه ای Angular Material Tab Groups

  • کارت های مواد زاویه ای - چگونه از آنها استفاده کنیم؟ Angular Material Cards - How to Use Them?

  • استپر مواد زاویه ای - فرم های چند مرحله ای Angular Material Stepper - Multi-Step Forms

  • استپر مواد زاویه ای - فرم های چند مرحله ای Angular Material Stepper - Multi-Step Forms

  • فیلد ورودی مواد زاویه ای: بسیاری از گزینه های مفید Angular Material Input Field: Lots Of Useful Options

  • دکمه رادیویی Angular Material Angular Material Radio Button

  • دکمه رادیویی Angular Material Angular Material Radio Button

  • جعبه انتخاب مواد زاویه ای Angular Material Select Box

  • انتخابگر تاریخ مواد زاویه ای Angular Material Date Picker

  • انتخابگر تاریخ مواد زاویه ای Angular Material Date Picker

  • انتخابگر تاریخ مواد زاویه ای - برجسته کردن تاریخ تقویم Angular Material Date Picker - Highlighting a Calendar Date

  • انتخابگر تاریخ مواد زاویه ای - برجسته کردن تاریخ تقویم Angular Material Date Picker - Highlighting a Calendar Date

  • چک باکس Angular Material Angular Material Check Box

  • منطقه متن مواد زاویه ای Angular Material Text Area

  • نکته ابزار زاویه ای مواد - چندین گزینه مفید Angular Material Tooltip - Several Useful Options

  • نکته ابزار زاویه ای مواد - چندین گزینه مفید Angular Material Tooltip - Several Useful Options

  • جدول داده های مواد زاویه ای - مثال کامل با منبع داده ساده شده Angular Material Data Table - Complete Example With Simplified DataSource

  • جدول داده های مواد زاویه ای - مثال کامل با منبع داده ساده شده Angular Material Data Table - Complete Example With Simplified DataSource

  • نحوه استایل دادن به ستون های جدول داده های مواد زاویه ای How To Style The Columns of an Angular Material Data Table

  • نحوه استایل دادن به ستون های جدول داده های مواد زاویه ای How To Style The Columns of an Angular Material Data Table

  • جدول داده های مواد زاویه ای - بارگیری داده ها از قسمت پشتیبان Angular Material Data Table - Loading Data From the Backend

  • نشانگر بارگذاری مواد زاویه ای Angular Material Loading Indicator

  • صفحه‌بندی جدول داده‌های مواد زاویه‌ای Angular Material Data Table Paginator

  • جدول داده های مواد زاویه ای - مرتب سازی داده ها Angular Material Data Table - Sorting Data

  • جدول داده های مواد زاویه ای - مرتب سازی داده ها Angular Material Data Table - Sorting Data

  • جدول داده های مواد زاویه ای - ردیف های داده چند قالبی و ردیف های قابل گسترش Angular Material Data Table - Multi-Template Data Rows and Expandable Rows

  • انتخاب داده های جدول داده های مواد زاویه ای Angular Material Data Table Data Selection

  • انتخاب داده های جدول داده های مواد زاویه ای Angular Material Data Table Data Selection

  • جدول داده های مواد زاویه ای - هدر چسبنده و ستون های چسبنده Angular Material Data Table - Sticky Header and Sticky Columns

دیالوگ های مواد زاویه ای Angular Material Dialogs

  • دیالوگ های مواد زاویه ای - نحوه ایجاد یک دیالوگ Angular Material Dialogs - How To Create a Dialog

  • گفتگوی مواد زاویه ای - اجرای نهایی و نمایش Angular Material Dialog - Final Implementation and Demo

دیالوگ های مواد زاویه ای Angular Material Dialogs

  • دیالوگ های مواد زاویه ای - نحوه ایجاد یک دیالوگ Angular Material Dialogs - How To Create a Dialog

  • گفتگوی مواد زاویه ای - اجرای نهایی و نمایش Angular Material Dialog - Final Implementation and Demo

  • گفتگوی مواد زاویه ای - بهترین روش ها، الگوها و ضد الگوها Angular Material Dialog - Best Practices, Patterns and Anti-Patterns

  • گفتگوی مواد زاویه ای - بهترین روش ها، الگوها و ضد الگوها Angular Material Dialog - Best Practices, Patterns and Anti-Patterns

ویژگی های پیشرفته Angular Material Angular Material Advanced Features

  • کشیدن و رها کردن مواد زاویه ای - نمونه کامل گام به گام Angular Material Drag and Drop - Complete Step-by-Step Example

  • مواد زاویه ای بین لیست های مختلف بکشید و رها کنید Angular Material Drag and Drop Between Different Lists

ویژگی های پیشرفته Angular Material Angular Material Advanced Features

  • کشیدن و رها کردن مواد زاویه ای - نمونه کامل گام به گام Angular Material Drag and Drop - Complete Step-by-Step Example

  • مواد زاویه ای بین لیست های مختلف بکشید و رها کنید Angular Material Drag and Drop Between Different Lists

طراحی واکنشگرا با متریال زاویه ای Responsive Design With Angular Material

  • مقدمه ای بر طراحی واکنشگرا با متریال زاویه ای Introduction To Responsive Design With Angular Material

  • کامپوننت mat-grid-list Material Angular The Angular Material mat-grid-list Component

  • سرویس ناظر نقطه شکست پاسخگوی مواد زاویه ای The Angular Material Responsive Breakpoint Observer Service

  • نوشتن CSS پاسخگو برای اجزای متریال زاویه ای Writing Responsive CSS for Angular Material Components

طراحی واکنشگرا با متریال زاویه ای Responsive Design With Angular Material

  • مقدمه ای بر طراحی واکنشگرا با متریال زاویه ای Introduction To Responsive Design With Angular Material

  • کامپوننت mat-grid-list Material Angular The Angular Material mat-grid-list Component

  • سرویس ناظر نقطه شکست پاسخگوی مواد زاویه ای The Angular Material Responsive Breakpoint Observer Service

  • نوشتن CSS پاسخگو برای اجزای متریال زاویه ای Writing Responsive CSS for Angular Material Components

  • دیالوگ های پاسخگوی مواد زاویه ای Angular Material Responsive Dialogs

  • دیالوگ های پاسخگوی مواد زاویه ای Angular Material Responsive Dialogs

جزء درختی مواد زاویه ای Angular Material Tree Component

جزء درختی مواد زاویه ای Angular Material Tree Component

  • مقدمه ای بر مولفه درختی مواد زاویه ای Introduction to The Angular Material Tree Component

  • مقدمه ای بر مولفه درختی مواد زاویه ای Introduction to The Angular Material Tree Component

  • درخت تودرتو با مواد زاویه ای - مثال گام به گام Angular Material Nested Tree - Step-by-Step Example

  • درخت تودرتو با مواد زاویه ای - مثال گام به گام Angular Material Nested Tree - Step-by-Step Example

  • درختان مسطح مواد زاویه ای Angular Material Flat Trees

  • درختان مسطح مواد زاویه ای Angular Material Flat Trees

پیمایش مجازی و تم های سفارشی Virtual Scrolling and Custom Themes

  • پیمایش مجازی مواد زاویه ای Angular Material Virtual Scrolling

  • تم سفارشی مواد زاویه ای Angular Material Custom Theme

پیمایش مجازی و تم های سفارشی Virtual Scrolling and Custom Themes

  • پیمایش مجازی مواد زاویه ای Angular Material Virtual Scrolling

  • تم سفارشی مواد زاویه ای Angular Material Custom Theme

نتیجه Conclusion

  • سخنرانی پاداش Bonus Lecture

نتیجه Conclusion

  • سخنرانی پاداش Bonus Lecture

  • مواد زاویه ای در عمق - نتیجه گیری و نکات کلیدی Angular Material In Depth - Conclusions & Key Takeaways

  • مواد زاویه ای در عمق - نتیجه گیری و نکات کلیدی Angular Material In Depth - Conclusions & Key Takeaways

نمایش نظرات

آموزش مواد زاویه ای در عمق (Angular 15)
جزییات دوره
6.5 hours
44
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
8,415
4.6 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Angular University Angular University

پرفروش ترین دوره های انگولار | بیش از 100 هزار دانش آموز | 16 دوره