Server tərəfində göstərmə ilə bir açısal tətbiqetmə necə yaradılır

Bucaq tətbiqinizlə server tərəfində göstərməyi istifadə etmək istəyə biləcəyiniz bir neçə səbəb var.

  1. SSR axtarış motoru optimallaşdırmasına kömək edir. Axtarış motorları səhifəni serverdə göstərildiyi kimi analiz edə bilər.
  2. Facebook və Twitter kimi Socia media platformaları paylaşarkən veb saytını önizləyə bilər.
  3. Bir veb səhifə serverdə göstərildikdən sonra onu önbelleğe ala və daha sürətli xidmət edə bilərsiniz.

Açısal tətbiqetmənizdə server tərəfli göstərməni həyata keçirmək üçün Angular Universal paketindən istifadə edə bilərsiniz.

Açısal Universal

Yeni bir açısal layihə yaradın:

yeni layihə adı

Bu layihədə Angular Universal-ı yükləyin və aşağıdakı paketlərə əlavə edin:

cd layihə adı
npm install --saat @ angular / plattformserver @ nguniversal / module-map-ngfactory-loader [email protected] express
universal layihə adları yaratmaq

Bu, aşağıdakı faylları yaradacaq və yeniləyəcək:

Src / app / app.server.module.ts yaradın src / main.server.ts yaradın src / tsconfig.server.json Update pack.json Update .angular-cli.json Update src / main.ts Src / app / app.module.ts yeniləyin .gitignore

Modullar: İndi iki ayrı kök modulunuz var: app.server.module.ts və app.module.ts. Server modulu ServerModules-i @ angle / platform-server paketindən idxal edir. Brauzer modulu, BroularModule.withServerTransition () metodunu çağırır, bu da Angular-a server tərəfində göstərmə işlətdiyimizi və tam çərçivə yükləndikdən sonra görünüşün dəyişdirilməsini tələb etdiyini bildirir.

Giriş Noktası: Tətbiqiniz üçün iki giriş nöqtəniz var: src / main.ts və src / main.server.ts. İkincisi, server üçün giriş nöqtəsidir və sadəcə server modulumuzu ixrac edir.

Konfiqurasiya sənədləri: Angular kompilyatora iki giriş modulumuz olduğunu söyləmək üçün tsconfig.server.json faylı yaradılmışdır. Tsconfig.app.json faylı brauzer tətbiqini tərtib edir.

Angular CLI: server paketi üçün ikinci bir profil angular-cli.json faylına əlavə olunur.

Bootstrapping: main.ts dosyanız aşağıdakı funksiya ilə yenilənəcəkdir:

document.addEventListener ('DOMContentLoaded', () => {platformBrowserDynamic (). bootstrapModule (AppModule) .catch (err => console.log (err));});

Bu, DOM yükləndikdən sonra Açısal tətbiqetmənin açılışını təmin etmək üçündür. Tətbiqin açılış məntiqi DOMContentLoaded hadisəsidir.

Düyün server

Bundan sonra, tətbiqin kök qovluğunda bir server yaratmalısınız. Bu fayl .angular-cli.json faylında konfiqurasiya edilmiş server tətbiqetməsindən istifadə edərək npm run build: ssr işləyərkən yaradılan javascript sənədindən istifadə edir. Daha sonra index.html səhifəsinə tətbiq olunur. Layihənizin kökündə bir server.ts faylı yaradın və aşağıdakı kodu əlavə edin:

Server.ts faylı, Javascript sənədini serverdə icra etmək üçün bir Webpack konfiqurasiya tələb edir. Tətbiqinizin kökündə bir webpack.server.config.js faylı yaradın və aşağıdakı kodu əlavə edin:

Pack.json dosyanızda skript dizinizə aşağıdakı əmrləri əlavə edin:

"build: ssr": "npm run build: client-and-server-bundles && npm run webpack: server",
"serve: ssr": "node dist / server.js",
"build: client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing = false",
"webpack: server": "webpack --config webpack.server.config.js --progress --colors"

Əvvəlcə npm run build: ssr. Tamamlandıqda npm run service: ssr. Müraciətiniz localhost-a çatdırılmalıdır: 4201.

Şanzıman statusu

Angular Universal istifadə etdikdə, məzmunu təmin edən API iki dəfə çağırılır. Birincisi, server səhifəni göstərdikdə, ikincisi, tətbiq açıldıqda. Bu, ekran gecikdiyindən gecikmə problemlərinə və zəif bir istifadəçi təcrübəsinə səbəb olur. Aşağıdakı şəkil necə işlədiyini göstərir:

Upstate Interactive, LLC tərəfindən dizayn edilmişdir

Serverdən müştəriyə məlumat göndərmək üçün TransferState xidmətindən istifadə edə bilərik, API zənglərinin təkrarlanması. Aşağıda bunun necə işlədiyini görün:

Upstate Interactive, LLC tərəfindən dizayn edilmişdir

Tətbiqimizdə TransferState xidmətindən istifadə edin. BrowserTransferStateModule-nı app.module.ts saytına daxil edin:

{BrowserModule, BrowserTransferStateModule} '@ angle / platform-browser' dən idxal;
İdxal: [BrowserModule.withServerTransition ({appId: 'my-app'}), BrowserTransferStateModule, ...]

ServerTransferStateModule-nu app.server.module.ts saytına daxil edin:

'@ Angle / platform-server' dən {ServerModule, ServerTransferStateModule} idxal edin;
İdxal: [AppModule, ServerModule, ServerTransferStateModule, ...]

MakeStateKey funksiyasından istifadə edərək məlumatları dövlətdə saxlamaq üçün bir açar yaratmaq üçün istifadə edə bilərsiniz (brauzerə ötürülür). Statusdan məlumat almaq üçün this.state.get və vəziyyəti vəziyyətə gətirmək üçün this.state.set istifadə edəcəksiniz. Bir API çağırışı edildikdə, qaytarılmış məlumatları makeStateKey ilə yaradılan açardan istifadə etdiyiniz vəziyyətdə saxlayın.

API üçün istifadə etdiyiniz sənəddə TransferState və makeStateKey modullarını idxal edin.

{TransferState, makeStateKey} '@ angle / platform-browser' dən idxal;

TransferState xidmətini qurucu funksiyanıza daxil edin:

İnşaatçı (xüsusi dövlət: TransferState, ...) {}

Verilərinizi saxlamaq üçün açarlar yaradın:

const KEY_NAME = makeStateKey ('değişken_adı');

API çağırdığınız funksiyanızda, məlumatlarınızı statusdan almaq üçün this.state.get istifadə edin. Giriş tapılmadıqda, http-yə keçin. Məlumatlarınızı http zəngindən geri aldığınız zaman, this.state.set ilə statusda saxlayın.

Funksiya adı () {let variable_name = this.state.get (KEY_NAME, digərləri kimi boş); if (dəyişən ad) {return Observable.of (dəyişən ad); } return this.http.get ('url') ... this.state.set (KEY_NAME, digərləri kimi dəyişən adı); return variable_name; }

Artıq müştəri məlumat göstərmə serverindən statusda saxlanıldığı üçün geri qayıtdıqda HTTP zəngi etmir.

Bu addımlardan sonra tətbiqinizi işlədirsinizsə, tətbiqetməniz müştəridən heç bir HTTP çağırışı etməyəcəkdir. Brauzerinizin inkişaf etdirmə vasitələrindəki Şəbəkə nişanına keçərək bunu təsdiqləyə bilərsiniz. Tələb serverdə edildiyi və brauzerə HTML olaraq göndərildiyi üçün heç bir XHR istəyi görməməlisiniz.

Axı hər tətbiq server tərəfdən göstərilməsinə zəmanət vermir. Özüm izah etmək əvəzinə SSR-nin layihənizə nə vaxt uyğun gəldiyini hərtərəfli nəzərdən keçirmək üçün bu məqaləni oxumağınızı məsləhət görürəm. Bu mövzuda anlayışımın çoxu aşağıdakı təlimdən yarandı: http://www.dotnetcurry.com/angularjs/1388/server-side-rendering-angular-nodejs. Tətbiqi yalnız özünüz qurmağı tövsiyə edə bilərəm.

II hissəni oxuyun: ngrx ilə Angular Universal qurma.

Ümid edirəm faydalı oldu!

☞ B2B təşkilatlarına möhtəşəm fikirləri proqrama çevirməyə kömək edirik. Daha çox öyrənmək istərdinizmi?

☞ Aşağıdakı məqalələri də bəyənə bilərsiniz.