بررسی و مروری بر معماری در Angular

مروری بر معماری در Angular

Angular پلتفرم و فریمورکی برای ساخت برنامه‌های کلاینت در HTML و تایپ اسکریپت است که به زبان تایپ اسکریپت نوشته شده است. Angular کارکردهای اصلی و اختیاری را به صورت مجموعه‌ای از کتابخانه‌های تایپ اسکریپت پیاده سازی می‌کند به گونه‌ای که بتوانید این مجموعه را در برنامه‌های خود وارد کنید.
NgModule ها بلوک‌های ساختاری و اصلی یک برنامه‌ی Angular هستند. این بلوک‌ها زمینه‌ای را برای کامپایل کردن کامپوننت ها فراهم می‌کنند. Ngmodule ها کدهای مربوط را در مجموعه‌هایی کارکردی جمع آوری می‌کنند که یک برنامه‌ی Angular توسط مجموعه‌ای از NgModule ها تعریف می‌شود. برنامه‌ها همیشه حداقل یک ماژول ریشه دارند که این ماژول امکان بوت استرپ کردن را فراهم می‌کند که البته معمولاً این ماژول‌ها بسیار بیشتر می‌شوند.

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

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

• متادیتای یک کلاس کامپوننت این کلاس را به قالبی مرتبط می‌کند که کار آن تعریف کردن یک view است. یک قالب HTML معمولی را با دستورالعمل‌های Angular و binding markup ترکیب می‌کند. از این طریق می‌توان قبل از رندر شدن HTML برای نمایش آن را اصلاح کرد.
• متادیتای یک کلاس سرویس اطلاعات مورد نیاز Angular را فراهم می‌کند تا Angular بتواند با استفاده از این اطلاعات از طریق تزریق وابستگی (DI) این کلاس را در اختیار کامپوننت ها قرار دهد.

ماژول‌ها

NgModule های Angular با ماژول‌های جاوا اسکریپت (ES2015) تفاوت دارند و به نوعی آن‌ها را تکمیل می‌کنند. NgModule ها برای مجموعه‌ای از کامپوننت هایی که به یک دامنه‌ی برنامه، یک workflow و یا مجموعه‌ای وابسته از قابلیت‌ها تخصیص داده شده‌اند، یک زمینه‌ی کامپایل را اعلان می‌کند. NgModule می‌توانند کامپوننت های خود را به کدهای مربوطه مانند سرویس‌ها ارتباط دهند تا از این طریق واحدهای کارکردی شکل گیرند.
تمامی برنامه‌های Angular یک ماژول اصلی (root module) دارند. اسم این ماژول به صورت قراردادی AppModule است که کار آن فراهم کردن سازوکاری برای بوت استرپ کردن برنامه و در نهایت راه اندازی آن است. یک برنامه معمولاً شامل ماژول‌های کارکردی بسیاری است.
NgModule ها مانند ماژول‌های جاوا اسکریپت می‌توانند از NgModule های دیگر کارکرد مورد نیاز خود را وارد کنند و این امکان را فراهم کنند تا کارکردشان برای NgModule های دیگر صادر شود و توسط آن‌ها استفاده شود. برای مثال، برای آن که بتوانید از سرویس روتر در برنامه‌ی خود استفاده کنید، باید Router NgModule را import کنید.
در صورتی که کد خود را داخل ماژول‌های کارکردی مجزا سازماندهی کنید، می‌توانید توسعه‌ی برنامه‌های پیچیده و طراحی برنامه‌ی خود جهت فراهم کردن قابلیت استفاده‌ی مجدد را مدیریت کنید. علاوه بر این با کمک این روش می‌توانید از قابلیت lazy-loading (به بارگیری ماژول‌ها در صورت نیاز گفته می‌شود) استفاده کنید تا تعداد کدی که در استارت آپ برنامه باید بارگیری شود را به حداقل برسانید.
برای اطلاعات بیشتر به «معرفی ماژول‌ها» مراجعه کنید.

کامپوننت ها

هر برنامه‌ی Angular حداقل یک کامپوننت (همان کامپوننت اصلی) دارد. این کامپوننت سلسله مراتبی از کامپوننت را به DOM صفحه وصل می‌کند. هر کامپوننت کلاسی را تعریف می‌کند که شامل منطق و داده‌های برنامه است و با یک قالب HTML ارتباط دارد که این قالب view مورد نظر برای نمایش دادن در یک محیط مطلوب را تعریف می‌کند.
دکوراتور @Component() بلافاصله پایین خود کلاس را به عنوان یک کامپوننت تعیین می‌کند و قالب و متادیتاهای مختص به کامپوننت و مرتبط را فراهم می‌کند.
دکوراتورها توابعی هستند که کلاس‌های جاوا اسکریپت را اصلاح می‌کنند. Angular تعدادی از دکوراتورها را تعریف می‌کند که کار این دکوراتورها پیوند زدن انواع مشخصی از متادیتاها به کلاس‌ها است، به گونه‌ای که سیستم معنای این کلاس‌ها و چگونگی کارکرد آن‌ها را بفهمد.
از طریق این لینک بیشتر در رابطه با دکوراتورها مطالعه کنید.

قالب‌ها، دستورالعمل‌ها و مقید سازی داده

قالب‌ها HTML را با markup Angular ترکیب می‌کنند به گونه‌ای که عناصر HTML را بتوان قبل از نمایش آن‌ها اصلاح کرد. دستورالعمل‌های قالب منطق برنامه را فراهم می‌کند و binding markup اطلاعات برنامه‌ی شما را به DOM متصل می‌کند. دو نوع مقیدسازی داده وجود دارد:

• مقیدسازی رویداد (Event binding): برنامه‌ی شما با استفاده از آن می‌تواند با به روز کردن داده‌های برنامه‌تان به ورودی کاربر در محیط مطلوب پاسخ دهد.
• مقیدسازی ویژگی (Property binding): به شما این امکان را می‌دهد تا مقادیری که از داده‌های برنامه‌تان محاسبه شده‌اند را داخل HTML جای دهید.

قبل از آن که view ای نمایش داده شود، Angular دستورالعمل‌ها را ارزیابی می‌کند و سینتکس مقیدسازی را درون قالب حل و فصل می‌کند تا بتواند عناصر HTML و DOM را براساس منطق و داده‌های برنامه‌تان اصلاح کند. Angular از مقیدسازی دوطرفه پشتیبانی می‌کند. مقیدسازی دوطرفه یعنی تغییراتی که در DOM (مانند انتخاب‌های کاربر) به وجود می‌آیند، در داده‌های برنامه‌ی شما نیز بازتاب داده می‌شوند.
قالب‌های شما برای آن که با تبدیل مقادیر مربوط به نمایش، تجربه‌ی کاربر را بهتر کنند، می‌توانند از pipe ها استفاده کنند. برای مثال می‌توان به استفاده از pipe ها جهت نمایش دادن مقادیر مربوط به ارز و تاریخ اشاره کرد، به گونه‌ای که این دو مناسب زبان کاربر باشند. Angular برای انجام تبدیلات رایج pipe های از قبل تعریف شده‌ای را فراهم می‌کند و البته شما می‌توانید pipe های مخصوص به خود را نیز تعریف کنید.
برای دریافت اطلاعات بیشتر در رابطه با این مفاهیم به «معرفی کامپوننت ها» مراجعه کنید.

سرویس‌ها و تزریق وابستگی

برای داده‌ها یا منطقی که به یک view خاص وابسته نیستند و می‌خواهید آن را در سراسر کامپوننت ها به اشتراک بگذارید باید یک کلاس سرویس را ایجاد کنید. تعریف کلاس سرویس درست قبل از دکوراتور @Injectable() می‌آید. این دکوراتور متادیتاهایی را فراهم می‌کند که شما می‌توانید به کمک آن‌ها سرویس خود را داخل کامپوننت های کلاینت به صورت یک وابستگی تزریق کنید.
با کمک تزریق وابستگی (DI) می‌توانید کلاس‌های کامپوننت خود را کم حجم و کارامد کنید. آن‌ها داده‌ها را از سرور دریافت نمی‌کنند، اعتبار ورودی کاربر را تأیید نمی‌کنند و یا به صورت مستقیم در کنسول گزارش نویسی نمی‌کنند، بلکه این کارها را به سرویس‌ها محول می‌کنند.
برای اطلاعات بیشتر به «معرفی سرویس‌ها و DI» مراجعه کنید.

Routing

Router NgModule Angular سرویسی را فراهم می‌کند که شما می‌توانید با کمک آن میان حالت‌های مختلف برنامه و سلسله مراتب view برنامه‌ی خود مسیرهایی را برای حرکت تعریف کنید. این NgModule بر اساس قوانین آشنای مربوط به حرکت در مرورگر مدل سازی شده است:

• URL ای را در نوار آدرس مرورگر وارد کنید تا مرورگر به آدرس مورد نظر برود.
• بر روی لینک‌های موجود در صفحه کلیک کنید تا مرورگر به صفحه‌ی جدیدی برود.
• بر روی دکمه‌های back و forward مرورگر کلیک کنید تا مرورگر از طریق سابقه‌ی صفحاتی که شما دیده‌اید به عقب و جلو برود.

روتر مسیرهای شبه URL را به جای صفحات در view ها ترسیم می‌کند. زمانی که کاربر کاری انجام می‌دهد (مانند کلیک کردن بر روی یک لینک) و این کار منجر به بارگیری صفحه‌ی جدیدی در مرورگر می‌شود، در این صورت روتر حرکت مرورگر را قطع می‌کند و سلسله مراتب view را نمایش می‌دهد و یا پنهان می‌کند.
اگر روتر تشخیص دهد که حالت فعلی برنامه نیاز به کارکرد خاصی دارد و ماژولی که آن را تعریف می‌کند هنوز بارگیری نشده است، در این صورت روتر می‌تواند ماژول را در صورت نیاز lazy-load کند.
روتر بر اساس قوانین حرکتی view برنامه‌ی شما و حالت داده‌ها یک لینک URL را تفسیر می‌کند. زمانی که کاربر بر روی دکمه‌ای کلیک می‌کند و یا از drop box گزینه‌ای را انتخاب می‌کند، در پاسخ به هر محرک دیگری از هر منبع دیگر می‌توانید به view های جدید بروید. روتر گزارش فعالیت‌ها را در سابقه‌ی مرورگر ثبت می‌کند. به همین دلیل دکمه‌های back و forward به خوبی کار می‌کنند.
برای این که قوانین حرکتی را تعیین کنید، باید مسیرهای حرکتی را به کامپوننت های خود ارتباط دهید. مسیرها از یک سینتکس شبیه به URL استفاده می‌کنند که این سینتکس ها داده‌های برنامه‌ی شما را یکپارچه می‌کنند؛ درست مانند زمانی که سینتکس قالب view های شما را با داده‌های برنامه یکپارچه می‌کند. بعد از این کار می‌توانید برای آن که انتخاب کنید در پاسخ به ورودی کاربر و قوانین دسترسی خودتان کدام view ها آشکار و کدام مخفی باشند، منطق برنامه را اعمال کنید.
برای اطلاعات بیشتر به «مسیریابی و حرکت» مراجعه کنید.

در ادامه خواهید دید

تا به اینجای کار اصول اولیه‌ی بلوک‌های ساختاری اصلی یک برنامه‌ی Angular را فرا گرفته‌اید. در دیاگرام زیر نشان داده شده است که این اصول اولیه چگونه به یکدیگر وابسته هستند.

• کامپوننت و قالب در کنار هم یک view را در Angular تعریف می‌کنند.
  
  • دکوراتور موجود در یک کلاس کامپوننت، متادیتا را به همراه اشاره گر به سمت قالب مرتبط اضافه می‌کند.
  • دستورالعمل‌ها و binding markup موجود در قالب کامپوننت بر اساس منطق و داده‌های برنامه، view ها را اصلاح می‌کنند.
• تزریق کننده‌ی وابستگی سرویس‌هایی را مانند سرویس روتر در اختیار یک کامپوننت می‌گذارد تا شما بتوانید در میان view ها به گشت و گذار بپردازید.

در صفحات بعدی به هر یک از موضوعات زیر به صورت دقیق پرداخته شده است.

• معرفی ماژول‌ها
• معرفی کامپوننت ها
• قالب‌ها و view ها
• متادیتای کامپوننت
• مقیدسازی داده
• دستورالعمل‌ها
• Pipe ها
• معرفی سرویس‌ها و تزریق وابستگی

توجه داشته باشید که کد اشاره شده در این صفحات را می‌توانید در این لینک مشاهده کنید:

live example / download example

زمانی که با این بلوک‌های ساختاری اصلی آشنا شدید، می‌توانید در این آموزش به صورت دقیق‌تر آن‌ها را بررسی کنید. برای آن که در رابطه با ابزار و روش‌هایی که شما می‌توانید به کمک آن‌ها برنامه‌های Angular را بسازید و گسترش دهید به قدم‌های بعدی: «ابزارها و روش‌ها» مراجعه کنید.