آموزش کار کردن با Template-driven Form ها در Angular

Angular Forms
تعداد ویدئو 43
زمان دوره 02:03:12
مترجم پرووید
ناظر ترجمه پرووید
دوبلر پرووید
ناظر دوبلاژ پرووید
سایت منتشر کننده پلورال سایت

آموزش کار کردن با Template-driven Form ها در Angular یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته آموزشی، کار کردن با فرم ها در انگولار است که با نام اصلی Angular Forms از شرکت Pluralsight منتشر شده است.

کار کردن با فرم ها در Angular

در فریم ورک Angular قابلیت های بسیار مفیدی برای کار کردن با فرم ها قرار داده شده اند. در تمامی وب اپلیکیشن ها، فرم ها نقش بسیار مفیدی و مهمی ایفا می کنند. فرم ها امکان دریافت کردن داده های ورودی کاربر و ارسال کردن آنها به سرور را فراهم می کنند. در فریم ورک Angular دو روش کلی برای کار کردن با فرم ها با نام های template-driven form و reactive form معرفی شده اند. این روش ها برای سناریوها و سلایق مختلف برنامه نویسی راه حل های مناسبی را در اختیار قرار میدهند. همین موضوع کمک میکند تا برنامه نویسان، انعطاف پذیری بالاتری داشته باشند و بتوانند بر اساس نیازمندی خود، از هر کدام از این دو روش استفاده نمایند.

بررسی Template-Driven Form ها در Angular

در فریم ورک Angular میتوان از template-driven form ها برای ایجاد کردن فرم ها استفاده کرد. این روش به صورت declarative کار میکند و حجم کد نویسی کمتری را دارد. با استفاده از این روش برنامه نویسان ساختار کلی فرم را مستقیماً در template مربوط به یک component تعریف کرده و سپس با استفاده کردن از directive هایی از قبیل NgModel میتوانند data binding دو طرفه بین form control ها و data model مربوطه ایجاد کنند. از روش template-driven برای ساختن فرم های ساده تر و در سناریوهایی که سرعت توسعه و نمونه سازی اولویت دارند استفاده می کنیم. روش template-driven به صورت خودکار فرم کنترل ها را ایجاد و آنها را به روز رسانی میکند. این موضوع کمک می کند تا مدیریت کردن state مربوط به فرم بدون نیاز به حجم زیادی از کد نویسی انجام شود.

Angular Forms Snapshot

بررسی Reactive Form ها در Angular

روش دیگری برای ایجاد کردن فرم ها در فریم ورک Angular استفاده کردن از reactive form ها می باشد. در این روش حجم کد نویسی بیشتر است و برنامه نویس باید خود مکانیزم دریافت کردن داده ها در فرم را مدیریت کند. در واقع در پیاده سازی reactive form ها برنامه نویس کنترل های موجود بر روی فرم را ایجاد و آنها را با استفاده از کدهایی که مستقیماً در component قرار میگیرند، مدیریت میکند. این روش کنترل بیشتری بر روی رفتار و اعتبارسنجی کنترل ها در اختیار برنامه نویس قرار می دهد. استفاده کردن از این روش در سناریوهای پیچیده تر که نیازمندی های پویا و تعاملی گسترده تری دارند، توجیه پذیر است. در استفاده کردن از این روش برنامه نویس میتواند از RxJS و قابلیتهای آن از قبیل observable ها برای رد گیری کردن و واکنش نشان دادن به تغییرات درون کنترل های فرم و نهایتاً ایجاد کردن یک تجربه کاربری responsive تر استفاده کند. هرچند که استفاده کردن از این روش نیاز به حجم کد نویسی بالاتری دارد اما قابلیت نگهداری و تست پذیری آن برای اپلیکیشن های پیچیده تر بالاتر است. اینکه از روش template-driven و یا reactive استفاده کنید اساساً به نیازمندیهای پروژه و سطح پیچیده گی آن بستگی دارد.

سرفصل مطالب آموزش ویدئویی کار کردن با Template-driven Form ها در Angular

فصل اول: مقدمه دوره آموزشی

  • مقدمه دوره آموزشی

فصل دوم: مقدمه

  • مقدمه و معرفی دوره آموزشی
  • کار کردن با فرم ها در Angular
  • اپلیکیشن این دوره آموزشی

فصل سوم: کار کردن با فرم ها در Angular

  • مقدمه
  • کار کردن با FormsModule در Angular
  • ایجاد کردن یک Form Component
  • استفاده از Bootstrap برای اضافه کردن استایل
  • کار کردن با Checkbox و Radio
  • کار کردن با Select و Option
  • سایر کنترل های فرم
  • جمع بندی

فصل چهارم: انجام Data Binding در فرم ها

  • مقدمه
  • استفاده کردن از NgForm
  • استفاده کردن از NgModel
  • ایجاد کردن یک Data Model
  • انجام Data Binding دو طرفه
  • کپی کردن اطلاعات فرم
  • جمع بندی

فصل پنجم: انجام اعتبار سنجی در کار کردن با فرم ها

  • مقدمه
  • استفاده کردن از Field Validation در HTML5
  • استفاده کردن از کلاس های CSS برای اعتبارسنجی
  • استفاده کردن از پروپرتی های NgModel برای اعتبارسنجی
  • اضافه کردن استایل به فرم ها با خطاهای اعتبارسنجی
  • ارسال فرم ها به سرور
  • هندل کردن رویدادهای کنترل های فرم
  • جمع بندی

فصل ششم: ارسال فرم به سرور و دسترسی به داده ها

  • مقدمه
  • ایجاد کردن یک Data Service
  • ارسال کردن فرم با استفاده از Observableها
  • دسترسی به HTTP با استفاده از HttpClient
  • ارسال کردن فرم
  • هندل کردن خطاهای POST
  • بازیابی اطلاعات برای عنصر Select
  • جمع بندی

فصل هفتم: کنترل های Third-party برای فرم ها

  • مقدمه
  • منابع موجود در Angular.io
  • نصب کردن و استفاده کردن از ngx-bootstrap
  • کار با Button ها
  • کار کردن باDate و Date Range
  • کار کردن با Datepicker
  • کار کردن با Rating
  • جمع بندی
دسته های محصولات

افزودن به سبد خرید