آموزش قدم به قدم AngularJS (قسمت دوم)

در درس قبلی سری آموزش قدم به قدم AngularJS یک نمونه ساده Hello World را دیدیم و اساس کار Angular را یاد گرفتیم. در این درس چگونگی کار با event ها و validation ها در AngularJS را خواهید دید. ما ۵ قدم را انجام دادیم، پس بیایید با قدم ششم شروع کنیم. آموزش AngularJS

قدم ششم : درست کردن Function و اضافه کردن event

بیایید یک function ساده به نام Func1 را به کلاس Hello که در جلسه قبلی درست کردیم، اضافه کنیم.Func1  هر چیزی را که در متغییر txthello  وارد کنید را از طریق alert نشان خواهد داد. حالا اگر فکر می‌کنید که متد بالا(Func1)  می تواند از طریق یک دستور ساده جاوااسکریپت فراخوانی شود، سخت در اشتباهید. Instance هایی که توسط Angular ساخته می‌شوند، فقط از طریق event های Angular قابل دستیابی هستند. بنابراین کدهای زیر کار نخواهند کرد. برای فراخوانی function ما به event های Angular احتیاج داریم. بنابراین اگر می‌خواهیم Func1 را صدا بزنیم، به ng-click در Angular احتیاج داریم. پس از انجام این کار باید بتوانید هنگام کلیک روی دکمه Alert رویداد کلیک را در عمل ببینید.(مانند تصویر زیر) پیغام در جاوا اسکریپت در پایین کد کامل شده event ها در Angular که توضیح داده شد، آورده شده است.  

قدم هفتم : اضافه کردن Validator های HTML

  • Validation های Angular به صورت توکار از validator های HTML5 استفاده می‌کنند. بنابراین بگذارید بگوییم ما می‌خواهیم مطمئن شویم که txthello نمی‌تواند مقدار  null بگیرد. برای این‌ منظور نیاز داریم که کارهای زیر را انجام دهیم:
  • آراستن input با validator  های HTML . برای مثال، در کد زیر ما خاصیت required را اضافه کرده ایم. در HTML5 ،validator های زیادی وجود دارند، که می‌توانید از هر کدام از آنها استفاده کنید.
  • این input text درون تگ form قرار داده شده و باید خاصیت name آن با texthello پر شود. دقت داشته باشید که id در Angular اهمیتی ندارد و فقط name برای آن مهم است.
  • حالا اعتبارسنجی HTML توسط Browser به صورت خودکار انجام می‌پذیرد. وقتی کاربر بر روی دکمه submit کلیک می‌کند، باید با پیغام خطای زیر مواجه شود، اما ما نمی‌خواهیم که پیغام خطای Internet Explorer یا chrome را ببینیم، ما می‌خواهیم Angular کنترل پیغام‌ خطاها را در دست بگیرد.
کد زیر حاوی تغییراتی است که در سه مرحله بالا اعمال کردیم.

 قدم هشتم : استفاده از خاصیت $valid در Angular

حالا که همه تنظیمات را انجام دادیم و validator های توکار HTML را داریم، می‌خواهیم وقتی کاربر جیزی را تایپ می‌کند، دو کار انجام شود:
  • فعال و غیر فعال کردن دکمه در هنگام اعتبارسنجی
  • نمایش دادن و پنهان کردن پیغام خطا در تک div
برای این منظور، به دو دایرکتیو ng-disabled و ng-show در Angular احتیاج داریم. وقتی هر کدام از validator ها انجام شود، ارزیابی صورت می‌گیرد و خاصیت valid$ بسته به داده های وارد شده true یا false می‌شود.  

قدم نهم : اجرای برنامه

حالا که همه کارها انجام شد. کلید Ctrl+F5 را فشار داده و از نتیجه کار سخت خود لذت ببرید. در پایین یک تصویر متحرک را می‌بینید که برنامه را در حال اجرا به شما نشان می‌دهد. ngvalid

قدم دهم: کد کامل شده

در زیر کد کامل شده تا به اینجا، که شامل event ها و  validation هاست که نشان داده شده است.  

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *