Jendela Angular yang lebih baik

Sebagai pengembang Angular, kami menghadapi banyak tantangan dalam rutinitas pengembangan harian kami. Salah satunya adalah saat kita perlu berinteraksi dengan objek JavaScript asli dalam aplikasi Angular, seperti windowobjek global.

Jika Anda telah membaca buku saya Learning Angular — 3rd Edition , Anda mungkin tahu bahwa Angular sangat didasarkan pada injeksi ketergantungan (DI) . Dan itu dianggap praktik yang baik untuk mengonversi objek non-Angular, seperti jendela, menjadi injeksi daripada menggunakannya secara langsung. Mengapa?

Framework Angular bersifat lintas platform, artinya dapat berjalan di lingkungan yang berbeda, seperti seluler dan server. Aplikasi Angular dapat berjalan di server menggunakan teknik Server Side Rendering (SSR) .

Untuk informasi lebih lanjut tentang sifat lintas platform Angular, lihat artikel saya Mengapa memilih kerangka Angular .

Saat kami menggunakan SSR di Angular, tidak ada windowobjek. Ini hanya tersedia di lingkungan browser. Untuk mengatasi masalah ini dan membuat platform aplikasi kita tidak sadar, kita perlu menyediakan jendela melalui mekanisme Angular DI . Dengan cara ini, kita dapat menggunakan jendela secara kondisional sesuai dengan lingkungan yang kita jalankan dan membuat aplikasi kita berfungsi dengan baik di server.

Alasan lainnya adalah windowobjek mungkin tidak tersedia saat menjalankan pengujian unit di lingkungan Continuous Integration (CI) . Dalam skenario ini, kita dapat memanfaatkan Angular DI dan menyediakan implementasi alternatif untuk windowobjek saat menjalankan pengujian unit.

Tapi bagaimana kita bisa membuat jendelanya bisa disuntikkan?

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
});

1. Deskripsi sederhana tentang token
2. Objek opsi yang mengonfigurasi perilaku token

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) {}
}

Objek JavaScript asli Documentberisi properti yang disebut defaultViewyang mengembalikan jendela yang terkait dengan dokumen saat ini. Kami sekarang dapat menulis ulang komponen Angular kami sebagai 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);
  }
}

Apakah menurut Anda pendekatan ini berguna? Bagaimana Anda mengakses objek non-Angular di aplikasi Angular Anda? Beri tahu saya di komentar di bawah

Jika Anda ingin mempelajari lebih lanjut tentang Angular DI dan praktik terbaik, Anda sekarang dapat melakukan praorder buku baru saya Learning Angular — edisi ke-4