Angular در یک نگاه – Directive – بخش سوم

Angular در یک نگاه – Directive – بخش سوم

Directives یا دستوردهنده ها

 

Directiveها قلب و روح Angular است. پیشنهاد می کنم آنها را به عنوان HTML ساده در نظر بگیرید. بیشتر اوقات، directive ها یا دستور دهنده ها در فرم خواص HTML ظاهر می شوند که می توان در حالت عادی یا همان عناصر آشنایی که در اچ تی ام استفاده می کنیم استفاده شود. دستور دهنده ها توکار قبل از استفاده عموما با پیشوند -ng شروع می شوند که ng اشاره به Angular است. دستور دهنده های شخص ثالث بی شماری نیز در حال حاظر وجود دارد.

اگر توجه داشته باشید، می بینید که در بخش های قبل هم از directive ها استفاده کرده ایم، یا آن را به یاد دارید؟ قبل از اینکه در این بخش مثال های جدید را با هم کار کنیم، ابتدا ng-app را به عنصر body صفحه خود اضافه کنید. (برای یادآوری به بخش قبل مراجعه کنید.) در این مورد، ما بدون اینکه آرگومانی را به directive اختصاص دهیم استفاده خواهیم کرد. برای اختصاص آرگومان هایی به یک دستور دهنده، به سادگی از ""= استفاده می کنیم، به همان شکلی که در HTML عادی استفاده می کنیم. به عنوان مثال، ما می خواهیم نام آپ را به عنوان آرگومان به دستور دهنده پاس دهیم. (نام آپ در واقع نام ماژول می باشد، بخش مهم معماری آنگولار در بخش ماژول پوشیده شده است.)

 

 

ng-bind

 

بیشتر دستور دهنده ها عبارات رشته ای را قبول و تجزیه می کنند. (شما می توانید پارامترهای توکار directiveها را در مستندات آنگولار مطالعه فرمایید.) به عنوان مثال، دستوردهنده ng-bind به راحتی عبارات را ترجمه و تحویل می دهد، درست مثل بخش های قبل که از دو جفت براکت استفاده کردیم. مثال زیر توضیحات بالا را بصورت عملی نشان می دهد.

 

 

که نتیجه به صورت .The number 7 می شود.

در حالی که نتیجه مثال ساده بالا، دقیقا مثل خروجی بخش پیش شد، ولی یک تفاوت مهم در رفتار ng-bind وجود دارد: محتوای عنصری که به آن ng-bind اختصاص داده شده است هنگامی اعمال می شود که قالب بطور کامل رندر شده باشد. بنابراین، روش ng-bind عموما ترجیح داده می شود، اما تا زمانی که چیزی را در داخل عنصر تا وقتی که Angular بر روی قالب پردازش انجام نداده است قرار نمی دهد. این می تواند سودمند باشد. بستگی به محیط کاربر دارد و همچنین بستگی به اندازه و رفتار آنگولار در آپ دارد، در واقع می تواند تأخیری در آپ وجود داشته باشد که کاربران اجازه مشاهده دو جفت براکت جداکننده و عبارات در صفحه کامپایل نشده داشته باشند.

در مراحلی که آپ آنگولار شما توسعه پیدا کرد، شاید بخواهید محتوا وب سایت را تا بارگذاری کامل Angular مخفی کنید. این کار را به راحتی با ng-cloak می شود انجام داد.

در بخش بعدی با ng-show و ng-non-bindable و ng-init آشنا می شویم.