ساختار پروژه‌ی انگولاری (قالب‌ها و سرویس‌ها)

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

ساخت بلوک های انگولاری: قالب ها

قالب ها برای مشخص کردن نمای کامپوننت مورد استفاده قرار می گیرند. یک قالب شبیه به یک اچ تی ام ال منظم است، اما تفاوت هایی هم دارد. قالب ها می توانند کامپوننت ها را در خود جای دهند.

ساخت بلوک های انگولاری: سرویس ها

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

کلاس های کامپوننت باید بسیار سبک و کوتاه باشند، چرا که کار آن ها صرفا ایجاد تجربه ی کاربری است (کامپوننت ها واسطه ای بین «نمای اپلیکیشن» و «منطق های اپلیکیشن» هستند). کامپوننت ها وظیفه ی فیچ کردن اطلاعات (رفتن و گرفتن اطلاعات) از سرور را بر عهده ندارند یا اینکه مثلا درستی و نادرستی اطلاعات ورودی کاربر را چک نمی کنند و کاربران را لاگین و لوگ اوت نمی کنند. کامپوننت ها چنین وظایفی را به سرویس ها واگذار می کنند.

سرویس ها در انگولار از ضروریات یک اپلیکیشن ها و کامپوننت ها هستند و به کم حجم شدن برنامه نیز کمک می کنند.

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

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

AnswersService، QuestionsService، CategoriesService

هر کدام از این سرویس ها مسئولیت خاصی که به آن اختصاص داده شده را بر عهده دارد. در این آموزش ما تمرکز خود را بر روی سرویس CategoriesService می گذاریم و در قسمت های بعدی، دیگر سرویس ها را نیز بررسی خواهیم کرد.

سرویس CategoriesService دارای متدهای زیر می باشد:

//gets all the question categories from a local json
getCategories(){
  return this.http.get("./assets/categories.json")
  .map((res:any) => res.json())
  .toPromise();
}

//finds a specific category by slug
getCategoryBySlug(slug: string){
  return this.getCategories()
  .then(data =>{
    return data.categories.find((category) => {
      return category.slug == slug;
    });
  })
}

ساخت بلوک های انگولاری: منابع دیگر

منابع خارجی ای مثل دیتابیس و API ها و غیره از ضروریات اپلیکیشن هستند. چرا که باعث متعامل شدن اپلیکیشن ما با دنیای بیرون از خود می شوند (پویایی و عکس العمل برای اپلیکیشن ما ملزم به داشتن این منابع است).

مطالب زیادی راجع به بلوک های پایه ای سازنده ی بلوک های انگولار وجود دارد. بلوک هایی مثل Dependency Injection، دیتا بایندینگ، دایرکتیوها و غیره. در حتما در رابطه با این موضوعات تحقیق های بیشتری داشته باشید.

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

ساختار پروژه ی اپلیکیشن انگولاری نمونه ما

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

اما در ساختار پروژه سه فولدر و چند فایل بسیار مهم داریم:

• فولدر src: این فولدر، مهم ترین فولدر است. تمام فایل های مهم تشکیل دهنده ی اپلیکیشن انگولاری ما در این فولدر قرار دارد.
• فولدر e2e: این پوشه وظیفه ی تست کردن اپلیکیشن را بر عهده دارد که به وسیله ی فریم ورک Jasmine ساخته شده و با تکنولوژی اجرای تست e2e اپلیکیشن را اجرا می کند. ما در این آموزش راجع به تست کردنريا، زیاد صحبت نمی کنیم.
• فولدر nodemodules: پکیج npm، به وسیله ی اجرای فرمان نصب آن، در پروژه ی ما قرار گرفت...
• فایل package.json: مثل بسیاری از اپلیکیشن های مدرن ما به یک سیستم پکیج یا مدیریت پکیج ها نیاز داریم تا همه ی کتابخانه ها و ماژول های مورد استفاده در اپلیکیشن مان را درون آن بریزیم. در درون این فایل بسیاری از موارد مورد نیاز اپلیکیشن مثل اسکریپت های npm قابل دسترسی هستند. این موارد به ما کمک می کنند که پروسه ی توسعه ی اپلیکیشن خود (bundling/compiling) را منظم تر کنیم.
• فایل tsconfig.json: این فایل، فایل اصلی مربوط به پیکربندی اپلیکیشن است. این فایل باید در مسیر روت اپلیکیشن باشد (نه درون فولدر خاصی)، همان جایی که کامپایلر تایپ اسکریپت، آن را پیدا خواهد کرد.

در داخل فولدر یا دایرکتوری src کدهای خام و کامپایل نشده ی خود را پیدا خواهیم کرد. این دایرکتوری همان جایی است که اکثر کارهای مربوط به اپلیکیشن در آن انجام خواهد گرفت. زمانی که فرمان ng serve را اجرا می کنیم، کدهای درون دایرکتوری src تبدیل به کدهای جاوا اسکریپت می شوند تا برای مرورگر قابل فهم و نمایش باشند (ES5). این بدان معناست که ما می توانیم در یک سطح حرفه ای، از تایپ اسکریپت استفاده کنیم و هر گاه که می خواهیم آن را به ورژن جاوا اسکریپت (قابل فهم برای مرورگر) تبدیل می کنیم.

در درون دایرکتوری src ، چند فولدر مهم دیگر را پیدا خواهید کرد:

• فولدر app: حاوی همه ی کامپوننت ها، ماژول ها و برگه هایی است که اپلیکیشن را با آن ها ساخته اید.
• فولدر environments: این فولدر برای مدیریت متغیرهای محیطی مختلفی مثل dev و prod ساخته شده است. برای مثال، ما باید یک دیتابیس محلی یا لوکال برای محیط توسعه ی خود داشته باشیم و یک دیتابیس تولید برای محیط تولید داشته باشیم. زمانی که فرمان ng servr را اجرا می کنیم، به صورت پیش فرض از دیتابیس محیط توسعه (dev env) استفاده می کند. اگر مایل به اجرای اپ در حالت تولید یا production mode بودید، باید عبارت prod-- را به ng serve اضافه نمایید.
• فایل index.html: این فایل همان برگه ی پیش فرض نمایش داده شده در اپلیکیشن است و اغلب نیاز به مشخص کردن آن نیست. در این مثال فقط نقش نگه دارنده اطلاعات را ایفا خواهد کرد. همه ی اسکریپت ها و استایل های مورد نیاز برای ایجاد اپلیکیشن به صورت خودکار توسط فرآیند بویل شدن صفحه وب، به برنامه تزریق می شوند. پس نیازی نیست که این کارها را به صورت دستی انجام دهید. تنها چیزی که اکنون به ذهنم برای قرار دادن در این فایل خطور می کند، برخی از برچسب های متا هستند (البته می توانید این موارد را از طریق Angular نیز انجام دهید).
• فولدر assets: عکس ها و برخی فایل های غیرضروری را که برای اپلیکیشن شما مورد نیاز هستند، در این فولدر میریزیم.

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

منبع: سایت Angular Templates