آموزش فارسی آنگولار و ASP.NET Core

آموزش فارسی آنگولار و ASP.NET Core

آموزش فارسی آنگولار و asp.net core (بخش هفتم)

  1. آموزش برنامه نویسی Angular و ASP.NET Core (بخش ششم)
     

باسلام. در بخش های قبل آموزش آنگولار و asp.net core ما به شما ساخت اولین پروژه را در ویژوال استودیو را در مجموعه ABLY یاد دادیم. در بخش قبل آموزش ایجاد اولین پروژه با ASP.Net Core 2  راجع به پروژه و فایل های مربوطه صحبت کردیم و حال تصمیم داریم ادامه آنرا به شما عزیزان توضیح دهیم.

 

آموزش فارسی آنگولار و asp.net core

آموزش فارسی آنگولار و asp.net core (بخش هفتم)

  1. آموزش برنامه نویسی Angular و ASP.NET Core (بخش ششم)

باسلام. در بخش های قبل آموزش آنگولار و asp.net core ما به شما ساخت اولین پروژه را در ویژوال استودیو را در مجموعه ABLY یاد دادیم. در بخش قبل آموزش ایجاد اولین پروژه با ASP.Net Core 2  راجع به پروژه و فایل های مربوطه صحبت کردیم و حال تصمیم داریم ادامه آنرا به شما عزیزان توضیح دهیم.

 

پوشه /Views


نگاهی سریع به پوشه Views میاندازیم، این پوشه شامل یک فایل HTML5 میباشدکه تگ های HTML درون تگ های <head> و <body> قرار گرفته اند. همچنین این پوشه تعدادی تگ <script> و <link> را دربردارد که مسیر فایل های css و js پروژه را نشان میدهد. عنصر <app>  که توسط آنگولار جهت تزریق SPA ها به درون <app> مورد استفاده قرار میگیرد.


کدهای سمت کلاینت


اجازه دهید نگاهی به اپلیکشن آنگولار بیاندازیم و ببینیم چگونه کار میکند. پوشه /ClientApp/ را بازکنید، دو فایل و سه پوشه دیگر درون این پوشه میبینیم. تنها چیزی که میبایست به آن توجه کنیم پوشه /ClientApp/app/ میباشد. این پوشه مکانی هست که تمام فایل های Typescript درون آن قرار دارد. به عبارت دیگر این پوشه مکانیست که تمام کدهای برنامه سمت کلاینت در آن قرار دارد. اجازه دهید نگاهی به پوشه های دیگر بیاندازیم:


1)پوشه /ClientApp/dist و فایل boot.server.ts هر دو توسط Webpack مورد استفاده قرار میگیرند. این فایل ها قابلیت SSR یا Server Side Rendering را در آنگولار فعال میکنند. قابلیت SSR در .NET Core 2.0 پیاده سازی شده و در پکیج Microsoft ASP.NET Core JavaScript Services موجود است. در آینده در این مورد توضیحات بیشتری خواهیم داد.


2)پوشه /ClientApp/test محلیست که فایلهای مربوط به Unit Test در آن قرار خواهد گرفت. در مورد unit test نیز در آینده بیشتر خواهیم گفت.


3)فایل boot.browser.ts اولین کدی که توسط مرورگر اجرا میشود را در بردارد. اگر این فایل را باز کنیم و نگاهی درون آن بیاندازیم، میتوانیم پکیج های مورد نیاز که توسط این فایل جهت عملیات bootstrap مورد استفاده قرار گرفته اند را ببینیم. ماژولهایی مانند AppModule از پوشه /ClientApp/app/  درون این فایل اضافه شده اند، سپس تگ های HTML برنامه درون تگ <app> اضافه شده اند.
اگر تصمیم دارید در مورد Angular Universal و Server-Side Rendering  مطالب بیشتری بخوانید ، قویا به شما توصیه میکنیم که مقاله زیر از Burak Tasci را مطالعه کنید:


 https://medium.com/burak-tasci/angular-4-with-server-siderendering-aka-angular-universal-f6c228ded8b0


همچنین برای اینکه بصورت مقدماتی با مفاهیم بالا آشنا شوید به لینک های زیر مراجعه کنید:


https://universal.angular.io/


https://github.com/aspnet/JavaScriptServices


پوشه /ClientApp/app


این پوشه دارای ساختار زیر است:


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


1)یک فایل تایپ اسکریپت که فرمت نام گذاری آن بصورت <componentName>.component.ts میباشد.
2)یک فایل HTML که ساختار قالب کامپوننت را در بردارد، به عبارتی همان UI کامپوننت را تشکیل میدهد.
3)یک فایل CSS که استایل و ظاهر گرافیکی UI را تشکیل میدهد.
4)دیگر فایل ها، مانند counter.component.spec.ts در پوشه /component/counter که زمانی مورد استفاده قرار میگیرد که نیاز داریم کدهای کامپوننت را به چندین فایل تقسیم کنیم و برای بالاتر بردن خوانایی و قابلیت استفاده مجدد کدها بکار میرود.


سه فایل تایپ اسکریپت به نام های app.module.browser.ts ، app.module.server.ts و app.module.shared.ts که شامل کلاسهای ریشه آنگولار میباشند، که این کلاس ها بعنوان AppModule شناخته میشوند.


اگر سابقه کار با آنگولار را داشته باشید، حتما AppModule را میشناسید و میدانید چگونه کار میکند. اگر با آن آشنایی ندارید، تنها چیزی که نیاز دارید بدانید این است که AppModule نقطه شروع برنامه آنگولار میباشد. در شکل زیر چرخه برنامه های آنگولار و نحوه کارکرد یک برنامه آنگولار را مشاهده میکنید.

کامپوننت های آنگولار


 
همانطور که در شکل بالا میبینیم، فایل boot.ts فایل app.module.ts را راه اندازی میکند، که در ادامه فایل app.module.ts باعث راه اندازی فایل app.component.ts میگردد، در ادامه نیز تمام کامپوننتهایی که برنامه آنگولار جهت راه اندازی به آنها نیاز دارد بارگذاری میشود. در تمام برنامه های آنگولار ساختار بالا را مشاهده میکنیم، البته قالب برنامه آنگولار ما دارای ساختار پیچیده تری میباشد. چون برنامه ما قابلیت Server-Side Rendering را پشتیبانی میکند. شکل زیر ساختار یک برنامه آنگولار زمانیکه که قابلیت SSR را پشتیبانی میکند نشان میدهد:
 

یادگیری آنگولار


همه این فایلها توسط Webpack مورد پردازش قرار میگیرند و در پوشه dist در مسیر /wwwroot/dist/ دو فایل به نامهای main-client.js و main-server.js ساخته میشوند که نسخه بسته بندی شده (bundle) فایلهای برنامه آنگولار میباشد. با توجه به توضیحات داده شده هم اکنون دید کلی نسبت به پروژه پیدا کرده ایم.

 

کش شدن فایل های استاتیک


آیا فایل test.html را در بخش های قبلی به یاد دارید؟ این فایل را در مسیر /wwwroot/test.html ساختیم. ما از این فایل برای نشان دادن عملیات Cache فایل های استاتیک استفاده میکنیم. با زدن کلید F5 یا زدن دکمه Run برنامه را اجرا میکنیم، بعد از انجام اینکار بدون stop کردن برنامه خطوط هایلایت شده زیر را به فایل test.html اضافه میکنیم.


 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Time for a test!</title>
</head>
<body>
Hello there!
<br /><br />
This is a test to see if the StaticFiles middleware is working
properly.
<br /><br />
IT DOES, BUT THE FILES ARE CACHED ON CLIENTS BY DEFAULT!
</body>
</html>

 

منبع مورداستفاده: 

ASP.NET.Core.2.and.Angular.5.Full-Stack.Web.Development.with..NET.Core.and.Angular

 

" تهیه شده در مجموعه و سایت ABLY "

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس