مقدمه ای بر کامپوننت

کامپوننت جزء اصلی تشکیل دهنده ساختار برنامه های کاربردی تحت آنگولار می باشد. در حقیقت یک برنامه آنگولار، زنجیره ای از کامپوننت هاست که با یکدیگر ارتباط دارند.

تیم آنگولار یک کامپوننت را به صورت زیر تعریف می کند :

کامپوننت مجموعه ای از رخدادهای صفحه نمایش که View نام دارد را کنترل می کند و بر اساس آنها ساختار ارتباط برنامه با کاربر را ایجاد می کند.

به طور اساسی کامپوننت هر چیز قابل مشاهده توسط کاربر است که می تواند به دفعات در یک برنامه مورد استفاده قرار گیرد.

در آنگولار کامپوننت ها معمولا به صورت یک ساختار درختی تعریف می شوند که هر کامپوننت موقع اجرا کامپوننت های زیر مجموعه خود را فراخوانی می کند.

در ریشه این درخت کامپوننت اصلی قرار دارد که به عنوان کامپوننت ریشه (Root Component) نامگذاری می شود.

زمانی که یک برنامه آنگولار را راه اندازی می کنیم، به مرورگر اعلام می کنیم که کامپوننت ریشه را فراخوانی کند. کامپوننت ریشه نیز به نوبه خود کامپوننتهای زیر مجموعه خود را فراخوانی خواهد کرد.

 

مراحل تعریف کامپوننت های برنامه :

زمانی که ساخت یک برنامه آنگولار آغاز می شود مراحل زیر به ترتیب طی خواهد شد :

1. برنامه به چندین کامپوننت تقسیم خواهد شد.
2. وظایف و مسئولیت های هر کامپوننت تعریف می شود.
3. پس از تعریف وظایف هر کامپوننت، ورودی ها، خروجیها و رابط نمایش عمومی آن مشخص می گردد.

 

به عنوان نمونه به مثال زیر توجه کنید :

در این مثال یک برنامه ساده نمایش داده شده که از یک سرصفحه (Header)، منوی کناری (Sidebar) و محیط کاری اصلی (Content) تشکیل شده و ما هر کدام از این قسمت ها را به عنوان یک کامپوننت در نظر می گیریم. مرحله بعدی برای هر کامپوننت شرح وظایف و تعیین ورودی ها و خروجی های هر کامپوننت به شرح زیر است :

 

کامپوننت Header

              وظایف :

              ایجاد سیستم کنترل کاربر جهت ورود/ثبت نام کاربر و همچنین خروج از حساب کاربری

              ورودی ها :

              بدون ورودی

              خروجی ها :

              LoginChanged : یک رویداد خروجی که به هنگام تغییر وضعیت ورود کاربران رخ می دهد.

 

کامپوننت SideBar

              وظایف :

              اعمال جستجو

              ورودی ها :

              بدون ورودی

              خروجی ها :

SearchTermChanged : یک رویداد خروجی که هنگام درخواست جستجو از سوی کاربر رخ می دهد. شیء $event محتویات جستجو را در خود نگه می دارد.

 

کامپوننت Content

              وظایف :

                  نمایش نتایج جستجو

              ورودی ها :

                  SearchTerm : عبارت جستجو که نتیجه بر اساس آن فیلتر خواهد شد.

              خروجی ها :

                  بدون خروجی

 

نکته : مشخص نمودن خروجی ها و ورودیها و همچنین شرح وظایف یک کامپوننت پیاده سازی صحیح ساختار کامپوننت را تضمین خواهد کرد. هدف این است که کامپوننت به بهترین صورت طراحی شود.

 

جریان اطلاعات

پس از اینکه ارتباط کامپوننت ها با کامپوننت ریشه برنامه برقرار شد، جریان اطلاعات بین ورودی ها و خروجی ها به شکل زیر انجام می گیرد :

جریان اطلاعات نشان می دهد که کامپوننت ها چگونه از طریق ورودی ها و خروجی هایشان با یکدیگر ارتباط برقرار می کنند.

با نگاه دقیق تر به شکل بالا این تکته مهم مشخص می شود که  با ارتباط یک طرفه اطلاعات، ورودی ها به سمت پائین درخت و خروجی ها به سمت بالای درخت حرکت می کنند. از این طریق تجزیه و تحلیل سیستم بسیار آسان تر خواهد بود. به این ترتیب ما می توانیم جریان اطلاعات و رویدادها را به راحتی در کل سیستم ردیابی نمائیم.

 

---

مقدمه ای بر کامپوننت - جمع بندی :

معماری یک سیستم آنگولار به معنای فهم این مطلب است که کل سیستم از یکسری کامپوننت تشکیل شده که به صورت برگ های یک درخت با یکدیگر در ارتباط هستند. هر کامپوننت از یکسری ورودی و خروجی تشکیل شده و همچنین یک سری وظایف برعهده دارد که توسط آنها با کل برنامه در تعامل می باشد.

کامپوننت ها را می توان به صورت بلوک های یک اسباب بازی خانه سازی تصور کرد که با چیدن و سر هم کردن آنها ساختار برنامه کامل تر می شود. البته این کار باید بر مبنای اصول انجام پذیرد.  به عنوان مثال ما می توانیم از یک کامپوننت LoginButton در کامپوننت Header استفاده کنیم و به راحتی جهت ورود و خروج کاربر از آن استفاده نمائیم. ولی انجام این کار در صورتی بهینه خواهد بود که تصمیم داشته باشیم از این کامپوننت جدید به طور مستقل از کامپوننت Header در بقیه برنامه نیز استفاده نمائیم.

• بعدی