بررسی آناتومی پروژه های طراحی سایت Angular بخش دوم

موضوع مورد بررسی در این مقاله Template ها و Data Binding در انگولار میباشد. template ها فایلهای ساده HTML هستند که همانند دیگر منابع استاتیک در کلاینت لود میشوند. رابط کاربری در template ها تعریف میشود که برای اینکار از کدهای استاندارد HTML به همراه دایرکتیو های انگولار استفاده میشود.

مقالات مرتبط

موضوع مورد بررسی در این مقاله Template ها و Data Binding در انگولار میباشد. template ها فایلهای ساده HTML هستند که همانند دیگر منابع استاتیک در کلاینت لود میشوند. رابط کاربری در template ها تعریف میشود که برای اینکار از کدهای استاندارد HTML به همراه دایرکتیو های انگولار استفاده میشود.

زمانی که template ها در کلاینت لود شدند انگولار داده های موجود در مدل را در آنها جاگذاری میکند و رابط کاربری وب سایت شما را تشکیل داده و به کاربر نمایش میدهد. بهتر است به یک نمونه از این tmplate ها نگاهی بیاندازیم:

در نمونه بالا یکسری آیتم داریم که در یک آرایه به نام items در مدل قرار گرفته اند. در template بالا انگولار یک حلقه بر روی اعضای آرایه میزند و به ازای هر عضو یک تگ div تشکیل میدهد و برای هر div یک span ایجاد میکند که در بر دارنده عنوان آن آیتم خاص میباشد.

سوالی که هم اکنون بوجود می آید این هست که فهرست آیتمها چگونه به دست انگولار رسیده است؟ میدانیم که در مدل ذخیره شده اما در یک وب اپلیکیشن مدرن این داده باید از پایگاه داده استخراج و به کلاینت فرستاده شود. خوب مراحل این سناریو به شرح زیر میباشد:

سه گام اولیه برای تمامی برنامه های انگولار یکسان میباشد اما در گام 4 و 5 شما حق انتخاب دارید که داده را به صورت sync و یا async لود کنید. برای بهبود کارایی نرم افزار معمولاً داده اولیه در HTML قرار میگیرد تا از اتصالات و request های متعدد جلوگیری شود. این بدان معناست که در ابتدا بخشهایی از template ها میتوانند در سرور با استفاده از داده های موجود در پایگاه داده به کمک Razor در ASP.NET MVC و یا PHP ساخته شوند.

زمانی که شما ساختار پروژه را بر مبنای انگولار قرار میدهید template ها کاملاً از داده ای که قرار است در آنها قرار بگیرد جدا میشوند. این بدان معنی است که همانند فایلهای css و js که در کلاینت cache میشوند template ها نیز در کلاینت cache میشوند و به ازای هر درخواست جدید نیاز نیست که دوباره از سرور دانلود شوند. این ویژگی باعث بالا رفتن سرعت اجرای برنامه و بالا رفتن میزان کاربر پسندی اپلیکیشن میشود.

در ادامه syntax های گوناگون جهت پیاده سازی انواع template ها را معرفی میکنیم.

نمایش متن

برای نمایش و آپدیت متن در هر نقطه ای از اپلیکیشن شما از دایرکتیو ng-bind میتوانید استفاده کنید و یا از آکولادهای مضاعف که در مثالهای قبل با آن برخورد داشتیم. به طور مثال:

در مثال بالا هر دو خط کد یک عمل را انجام میدهند و آن جاگذاری مقدار متغییر greetin در یک تگ p میباشد. خوب چرا برای انجام یک کار دو راه داریم؟ در پاسخ باید خدمتتان عرض کنم که اگر از آکولادهای مضاعف استفاده کنید احتمال این هست که قبل از اینکه انگولار وارد عمل شود کاربر به جای دیدن مقدار موجود در مدل خود directive را برای چند لحظه ببیند. علت این هست که انگولار تا زمانی که ویو ها کاملاً لود نشده اند وارد عمل نمیشود. که با توجه به سرعت دسترسی به اینترنت توصیه میکنم که برای ویو های اولیه مانند index.html از ng-bind استفاده کنید اما برای بقیه ویو ها که بعد از لود شدن انگولار از سرور درخواست میشوند میتوان از آکولادهای مضاعف استفاده کرد.

تگهای input در form ها

بر خلاف ng-bind که جهت حرکت داده از مدل به ویو است با استفاده از ng-model جهت حرکت داده دو طرفه از ویو به مدل و برعکس میباشد. زمانی که شما میخواهید مقادیری که کاربر در یک فرم وارد میکند را مستقیماً به یک متغییر و یا obj مدل متصل کنید از دایرکتیو ng-bind باید استفاده کنیم. لازم به ذکر است که این بایندیگ کاملاً همزمان بوده و در حین تایپ کاربر مدل دائماً در حال آپدیت شدن میباشد همچنین در صورتی که در یک کنترلر مقدار مدل تغییر کند تغییرات در همان لحظه بر روی ویو اعمال میشود. به طور مثال:

در مثال بالا به محض اینکه کاربر checkbox را کلیک کند مقدار youCheckedIt در مدل true میشود. همچنین اگر در کنترلر مقدار youCheckedIt در مدل برابر true یا false قرار بگیرد ویو به صورت خودکار آپدیت شده و ckeckbox یا checked و یا unchecked میشود.

حال فرض کنیم که زمانی که کاربر مقادیر input های فرم را تغییر میدهد شما میخواهید برنامه عکس العمل متناسب را از خود نشان دهد برای این منظور میتوان از دایرکتیو ng-change بر روی تگهای input استفاده کرد همانطور که از اسمش پیداست شما در این دایرکتیو متدی از کنترلر را معرفی میکنید که بعد از تغییر مقدار input باید صدا زده بشود. به طور مثال:

در این مثال زمانی که کاربر مقداری در فرم وارد میکند متد computeNeeded فرا خوانده خواهد شد. اگر فرض کنیم که این متد مقدار ورودی را ضربدر 10 کند و همچنین مقدار اولیه فرم صفر باشد کنترلر به صورت زیر خواهد بود:

در مثال بالا توجه ما بر روی فیلد input میباشد و در واقع پشت پرده رویداد change آن را داریم هندل میکنیم. این موضوع تا زمانی که تنها قرار باشد مقدار funding.needed تنها بواسطه مقدار وارد شده در فیلد input توسط کاربر محاسبه شود مشکلی پیش نمی آید. اما اگر نیاز باشد که به هر نحوی مثلاً دریافت داده جدید از سرور و تغییر مدل این فیلد نیز آپدیت شود دیگر این روش جوابگو نیست. برای حل این مشکل دیدگاه ما باید تغییر کند یعنی تمرکز را از روی رویداد change فیلد input باید برداریم و تمرکز بر روی funding.startingEstimate در مدل داشته باشیم و عملاً به نحوی یک listener به این متغییر در مدل الصاق کنیم تا زمانی که مقدار آن تغییر کرد ویو نیز آپدیت شود. برای اینکار از متد watch که بواسطه scope در اختیار کنترلر قرار میگیرد استفاده میکنیم.

به طور مثال در مثال قبل ما میخواهیم که تنها زمانی که مقدار funding.startingEstimate تغییر کرد مقدرا funding.needed آپدیت شود برای این منظور کد نمونه قبل باید به صورت زیر آپدیت شود:

توجه داشته باشید که عبارتی که میخواهیم آن را تحت نظر بگیریم به صورت یک رشته به متد watch ارائه میشود. و همچنین متد computeNeeded در scope تعریف نمیشود بلکه در کنترلر تعریف میشود. همچنین از آنجا که دیگر مقدار funding.needed به صورت اتوماتیک زمانی که funding.startingEstimate تغییر میکند آپدیت میشود دیگر نیازی به ng-change در ویو نیست و ویو را میتوان به صورت زیر ساده تر کرد:

پس به طور خلاصه بواسطه استفاده از متد watch عملاً یک listener به یک فیلد از مدل الصاق میکنیم تا زمانی که مقدار مدل تغییر کرد هندلر معرفی شده در watch صدا زده شود.

در صورتی که شما در template خود یک فرم دارید که input های مختلف را در برگرفته میتوانید از دایرکتیو ng-submit برای معرفی متدی که در حین submit فرم باید اجرا شود استفاده کنید. اگر مثال قبل را کمی گسترش دهیم به صورت زیر خواهد شد:

پیاده سازی متد requestFunding در کنترلر به صورت زیر خواهد بود:

توجه داشته باشید که به صورت پیش فرض انگولار مانع postback فرم میشود. برای هندل کردن دیگر event های مربوط به فرم و یا دکمه ها انگولار هندلر هایی مترادف با هندلرهای HTML تعریف کرده است مثلاً به جای onclick میتوان از ng-click استفاده کرد و همچنین بجای ondblckick می توان از ng-dblclick استفاده کنید. به طور مثال به مثال قبل یک دکمه reset اضافه می کنیم تا کاربر با کلیک بر روی آن فرم را پاک کند.

کنترلر به صورت زیر باید آپدیت شود:

در مقاله آینده به بررسی دایرکتیوهای مربوط به جداول و لیستها و دیگر عملیات مرتبط با حلقه های خواهیم پرداخت.