آشنایی با ngInclude Directive در AngularJS

در این مقاله با ngInclude Directive آشنا می شویم و نحوه استفاده از آن را می آموزیم. چگونگی کار با Directive و مزایا و معایب استفاده از آن در این مقاله توضیح داده خواهند شد.

آشنایی با ngInclude Directive در AngularJS

ngInclude

این دایرکتیو برای include کردن بخش های HTML خارجی در صفحه استفاده می شود و این تگ نیز در صفحه reference داده می شود. این کار به ما کمک می کند تا به کد ، قابلیت استفاده ی مجدد بدهیم، به این صورت که اگر بخش HTML در بیش از یک صفحه مورد نیاز باشد، کافی است یک بار صفحه HTML ایجاد شود و در همه مواردی که نیاز داریم آن را با دایرکتیو ng-include مورد استفاده قرار بدهیم. نحوه این کار در زیر توضیح داده شده است .

این دایرکتیو یک Angular expression می گیرد و آن را همانند مسیر برای یک فایل HTML مورد استفاده قرار می دهد. (Angular expression را به منزله ی یک مسیر که در آن فایل HTML قرار دارد، در نظر می گیرد.) سپس این دایرکتیو محتویات را از سمت سرور می گیرد و به عنوان فرزند این المان ( المان ng-include ) به نمایش می گذارد.

قاعده کلی این دایرکتیو به صورت زیر است :

حالا اجازه بدهید Property هایی که در تصویر بالا می بینیم را مورد بررسی قرار بدهیم.

1- Src برای مشخص کردن صفحه ای استفاده می شود که قرار است در صفحه جاری فراخوانی شود.

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

نکته : نامی که در بالا در درون ngInclude داریم، باید در داخل تک کوتیشن (‘’) و سپس در داخل یک دابل کوتیشن (“”) قرار بگیرد. در هر دو حالت،همان طور که در تصویر نیز می توانید ببینید، یک literal  تعریف شده است ، اگر بخواهیم این کار را انجام ندهیم و یک متغیر را در درون بخش ngInclude قرار بدهیم، باید در داخل دابل کوتیشن (“”) قرار بگیرد . طریقه این کار در زیر نشان داده شده است . در تصویر زیر ابتدا ما یک صفحه در داخل ngInit تعریف و مشخص کرده ایم و سپس در درون دایرکتیو ngInclude ، یک متغیر را آدرس دهی کرده ایم .

2- Onload برای فراخوانی یک تابع و یا یک عبارت مورد استفاده قرار می گیرد. به عنوان مثال در شکل زیر می بینید که ما یک تابع صدا زده ایم که عنوان صفحه ی فراخوانی شده را در خودش دارد و به ما می دهد.

3- Autoscroll استفاده شده است تا در صورت نیاز در صفحه مورد استفاده قرار بگیرد. صفحه ای که در تگ ngInclude فراخوانی می شود، باید در بخش خاصی از خودش، Autoscroll را مورد استفاده قرار بدهد. در نهایت خروجی Autoscroll، true و یا false خواهد بود.

به صورت پیش فرض، مقدار این property برابر با false است و استفاده از آن در دایرکتیو ngInclude به صورت اختیاری است.

بیایید با یک مثال ، نحوه انجام این کار را بررسی کنیم.

فرض کنید که ما یک صفحه را توسط ngInclude برای نمایش آماده کرده ایم ، که دارای تعدادی داده و همچنین یک اسکرول عمودی است. این صفحه در نهایت، مانند شکل زیر خواهد بود :

حالا ما می خواهیم به div که در زیر grid استفاده شده است، autoscroll کنیم . به محض این که صفحه بارگذاری شود، ما می توانیم autoscroll property را برابر با true قرار بدهیم. نحوه انجام این کار در شکل زیر نمایش داده شده است :

تنظیم autoscroll property نیز مانند زیر خواهد بود :

کدهای controlle برای این بخش در زیر آورده شده اند :

اگر مقدار property برابر با true باشد، صفحه به صورت خودکار به div ، اسکرول خواهد شد و در غیر این صورت ، اسکرولی نخواهیم داشت.

محدودیت های ng-include

اگر ما یک متغیر در صفحه اصلی داشته باشیم که در صفحه های دیگر توسط ng-include مورد استفاده قرار گرفته باشد، این فایل به یک کنترلر (کنترلر مربوط به صفحه خودش) وابسته شده است و به همین دلیل نمی تواند توسط کنترلر های دیگر مورد استفاده قرار بگیرد. به دلیل همین محدودیت های ng-include ما می توانیم دایرکتیو های سفارشی سازی شده ایجاد کرده و از آن ها استفاده کنیم.

امیدواریم از این مقاله لذت برده باشید.  آموزش angular