Inilah Window Angular Yang Lebih Baik

Sebagai developer Angular, kami menghadapi banyak rintangan dalam kegiatan rutin pengembangan harian kami. Satu diantaranya adalah saat kita perlu berinteraksi dengan object JavaScript asli dalam aplikasi Angular, seperti object window global.

Bila Anda sudah membaca buku saya Learning Angular — Edisi ketiga, Anda mungkin tahu jika Angular benar-benar didasari pada injeksi ketergantungan (DI). Dan itu dianggap praktek yang bagus untuk mengonversi object non-Angular, seperti window, jadi injeksi dibanding menggunakannya langsung. Kenapa?

Framework Angular bersifat lintas platform, maknanya bisa berjalan pada environment yang berbeda, seperti seluler dan server. Aplikasi Angular bisa berjalan pada server memakai tehnik Server Side Rendering (SSR).

Saat kami menggunakan SSR di Angular, tidak ada object window. Ini cuma ada di environment browser. Untuk menangani permasalahan ini dan membuat platform aplikasi kita tidak sadar, kita perlu menyediakan window lewat mekanisme Angular DI. Dengan ini, kita bisa menggunakan window secara kondisional sesuai environment yang kita lakukan dan membuat program kita berperan dengan baik di server.

Argumen lainnya ialah object window mungkin tidak ada saat menjalankan pengetesan unit di environment Continuous Integration (CI). Dalam scenario ini, kita bisa mengambil manfaat dari Angular DI dan menyediakan implementasi alternatif untuk object window saat menjalankan pengetesan unit.

Tetapi bagaimana kita bisa membuat windownya dapat diinjeksi?

Kita dapat menggunakan kelas InjectionToken dari kerangka Angular sebagai berikut:

import { InjectionToken } from '@angular/core';

export const WINDOW = new InjectionToken<Window>('Global window object', {
  factory: () => window
});

Dalam code sebelumnya, kami membuat InjectionToken baru dengan melalui dua parameter:

1. Deskripsi sederhana mengenai token

2. Object pilihan yang mengonfigurasikan perilaku token

Object pilihan menggunakan property pabrik untuk memperlihatkan bahwa token akan mengembalikan object global window saat diinjeksi ke artefak Angular. Untuk menggunakan Injection Token yang baru dibuat, kami memakai dekorator Inject dalam komponen Angular seperti berikut:

import { Component, Inject } from '@angular/core';
import { WINDOW } from './window';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(WINDOW) private window: Window) {}
}

Hingga kini, kami sudah menulis banyak code boilerplate hanya untuk menggunakan API JavaScript asli yang telah disediakan untuk kami di luar kotak. Sebagai alternative, kita bisa menggunakan fitur framework Angular yang telah ada untuk menuntaskan tugas yang serupa. Angular memberikan kita DOKUMEN, another Injection Token ditempatkan ke rangka kerja yang memberikan kita akses ke object document window saat ini:

Object Document JavaScript asli berisi property yang disebut defaultView yang mengembalikan window yang berkaitan dengan document sekarang ini. Kami sekarang bisa menulis ulang komponen Angular kami seperti berikut:

import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {
    console.log(document.defaultView);
  }
}

Di kutipan sebelumnya, kami mengimpor token DOKUMEN dan memakainya dengan cara yang sama seperti yang kami lakukan dengan token window custom kami. Kerugian dari pendekatan ini ialah property defaultView mungkin memusingkan karena tidak mengatakan secara eksplisit jika kita mengarah ke object window. Tetapi, saat ini code kami lebih bersih, dan kami sudah hilangkan code boilerplate karena kami tidak perlu membuat token window sendiri.

Inilah Window Angular Yang Lebih Baik

Artikel Terkait Lainnya :