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

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

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

 

در مقاله قبلی آموزش فارسی آنگولار و ASP.NET Core در مورد نحوه از کارانداختن عملیات Cache در فایلهای استاتیک پروژه ASP.NET Core بحث کردیم. با اضافه کردن کدهای مقاله قبلی هنوز کاری انجام نداده ایم. تاکنون آموختیم چگونه بتوانیم رفتار پیش فرض را تغییر دهیم. حال به ادامه آموزش خواهیم پرداخت.

 

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

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

 

در مقاله قبلی آموزش فارسی آنگولار و ASP.NET Core در مورد نحوه از کارانداختن عملیات Cache در فایلهای استاتیک پروژه ASP.NET Core بحث کردیم. با اضافه کردن کدهای مقاله قبلی هنوز کاری انجام نداده ایم. تاکنون آموختیم چگونه بتوانیم رفتار پیش فرض را تغییر دهیم، بدین منظور خط کدهای زیر را به فایل appsettings.Development.json اضافه میکنیم:


 

{
"Logging": {
"IncludeScopes": false,
"Debug": {
"LogLevel": {
"Default": "Debug",
"System": "Information",
"Microsoft": "Information"
}
},
"Console": {
"LogLevel": {
"Default": "Debug",
"System": "Information",
"Microsoft": "Information"
}
}
},
"StaticFiles": {
"Headers": {
"Cache-Control": "no-cache, no-store",
"Pragma": "no-cache",
"Expires": "-1"
}
}
}


سپس فایل Startup.cs را بصورت زیر تغییر میدهیم:


app.UseStaticFiles(new StaticFileOptions()
{
OnPrepareResponse = (context) =>
{
// Disable caching for all static files.
context.Context.Response.Headers["Cache-Control"] =
Configuration["StaticFiles:Headers:Cache-Control"];
context.Context.Response.Headers["Pragma"] =
Configuration["StaticFiles:Headers:Pragma"];
context.Context.Response.Headers["Expires"] =
Configuration["StaticFiles:Headers:Expires"];
}
});


مطمئن شوید که این کدها به نسخه non-development فایل appsettings.json اضافه شده است، در غیر اینصورت اپلیکشن قادر به پیدا کردن آنها نخواهد بود و باعث بروز خطا میشود. در حالیکه اگر این کدها به محیط production اضافه گردد، میتوانیم سیاستهای مربوط به عملیات cache را اعمال کنیم بصورت زیر:


 

{
"Logging": {
"IncludeScopes": false,
"Debug": {
"LogLevel": {
"Default": "Warning"
}
},
"Console": {
"LogLevel": {
"Default": "Warning"
}
}
},
"StaticFiles": {
"Headers": {
"Cache-Control": "max-age=3600",
"Pragma": "cache",
"Expires": null
}
}
}


استفاده از این الگو بصورت موکد توصیه میگردد، بطوریکه این روش بهترین و موثرترین راه برای پیکره بندی صحیح تنظیمات اپلیکشن میباشد. الان نوبت آن است که برنامه را جهت تست عملیات cache مورد ارزیابی قرار دهیم. برنامه را در مد debug اجرا نمایید، سپس درخواستی را برای صفحه test.html بصورت زیر توسط مرورگر ارسال نمایید:


http://localhost:<port>/test.html

 

الان میبایست قادر باشیم محتویات تغییر یافته ای را که در مقاله قبلی اعمال نمودیم را در صفحه مرورگر ببینیم، اگر اینطور نیست، دکمه F5 را فشار دهید تا اطلاعات از سرور درخواست شود. صفحه لود شده باید همانند تصویر زیر باشد:
 

آموزش فارسی آنگولار

 

اکنون بدون 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 seems like it works, and now it doesn't even cache those files!
</body>
</html>

 

بعد از کار گفته شده، دوباره به مرورگر رفته و بدون refresh  کردن آن فقط در قسمت address bar کلید Enter را فشار دهید. اگر تمام مراحل را به دقت انجام داده باشید بلافاصله تغییرات را در صفحه مرورگر مشاهده خواهید نمود.

 

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

پوشه components


در این بخش قصد داریم، پوشه components را در مسیر /ClientApp/app/components مورد بررسی قرار دهیم:
پوشه /app/ شامل فایل های مربوط به AppComponent میباشد. این فایل، اصلی ترین فایل کامپوننت اپلیکشن میباشد. این فایل اصلی ترین فایل برای بارگذاری دینامیک دیگر کامپوننتها است.


پوشه /home/ تمام فایلهای مربوط به HomeComponent را دربردارد، تمام Viewهای مربوط به Home در این پوشه قرار دارد.


پوشه /navmenu/ تمام فایل های مرتبط با NavMenuComponent را در بردارد. این فایل ها عملیات مربوط به Navigation Menu را دربردارند. Layout  نیز در این پوشه میباشد. پوشه های /counter/ و /fetchdata/ دو کامپوننت را شامل میشوند، وظیفه این دو کامپوننت رسیدگی به واکشی داده ها از سمت سرور و کار با عناصر موجود در DOM میباشد. وجود آنها در پروژه ممکن است باعث گیج شدن بیشتر ما شود، از این رو بهتر است این دو پوشه به جایی خارج از پروژه منتقل شود، یا درنهایت میتوانیم آنها را حذف کنیم. در صورت حذف این دو پوشه کامپایلر تایپ اسکریپت بلافاصله دو خطا را بصورت زیر انتشار میدهد:


Error TS2307 (TS) Cannot find module
'./components/fetchdata/fetchdata.component'.
Error TS2307 (TS) Cannot find module
'./components/counter/counter.component'.

 


هر دو خطا مربوط به فایل app.module.shared.ts میباشد. اگر این فایل را باز کنیم میتوانیم محل بروز خطا را همانند تصویر زیر ببینیم.

 

آموزش آنگولار به زبان فارسی
 

برای حذف خطاهای موجود دوخط بالا را از فایل app.module.shared.ts حذف میکنیم. به محض حذف این دو خط کامپایلر تایپ اسکریپت خطاهای زیر را انتشار میدهد:


Error TS2304 (TS) Cannot find name 'CounterComponent'.
Error TS2304 (TS) Cannot find name 'FetchDataComponent'.
Error TS2304 (TS) Cannot find name 'CounterComponent'.
Error TS2304 (TS) Cannot find name 'FetchDataComponent'.

 


تمام خطاهای بالا نیز به فایل app.module.shared.ts اشاره دارد. اگر در تصویر زیر دقت کنید4 نام را مشاهده میکنید که رفرنس معتبری ندارند:

 

آموزش asp.net core به زبان فارسی


 
هر 4 خط بالا که شامل خطا میباشند را پاک کنید. بعد از انجام اینکار فایل AppModuleShared را بروزرسانی کنید:

 


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}


در مقاله بعدی در مورد کلاس AppModule بیشتر خواهیم آموخت و این کلاس را بررسی خواهیم نمود.
 

 

نظرات

  • Hannah Martinez
    سید محمد رضا
    پنج شنبه 7 فروردین 1399 - 1:12

    با سلام و خدا قوت
    آموزش خوب هست

    البته تغییرات در ورژن های >net core 3 زیاد شده ولی در کل برای فهمیدن مفاهیم خوب هست

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

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