एक बेहतर एंगुलर विंडो

कोणीय डेवलपर्स के रूप में, हम अपने दैनिक विकास की दिनचर्या में कई चुनौतियों का सामना करते हैं। windowइनमें से एक है जब हमें वैश्विक वस्तु की तरह एक कोणीय अनुप्रयोग में एक मूल जावास्क्रिप्ट वस्तु के साथ बातचीत करने की आवश्यकता होती है।

यदि आपने मेरी पुस्तक लर्निंग एंगुलर - तीसरा संस्करण पढ़ा है , तो आप जान सकते हैं कि एंगुलर निर्भरता इंजेक्शन (डीआई) पर आधारित है । और यह गैर-कोणीय वस्तुओं, जैसे कि खिड़की, को सीधे उपयोग करने के बजाय इंजेक्टेबल में परिवर्तित करने के लिए एक अच्छा अभ्यास माना जाता है। क्यों?

कोणीय ढांचा क्रॉस-प्लेटफ़ॉर्म है, जिसका अर्थ है कि यह मोबाइल और सर्वर जैसे विभिन्न वातावरणों पर चल सकता है। सर्वर साइड रेंडरिंग (SSR) तकनीक का उपयोग करके एक कोणीय एप्लिकेशन सर्वर पर चल सकता है ।

एंगुलर की क्रॉस-प्लेटफ़ॉर्म प्रकृति के बारे में अधिक जानकारी के लिए, मेरा लेख देखें कि एंगुलर फ्रेमवर्क क्यों चुनें ।

जब हम कोणीय में SSR का उपयोग करते हैं, तो कोई windowवस्तु नहीं होती है। यह केवल ब्राउज़र वातावरण में उपलब्ध है। इस समस्या को दूर करने और हमारे एप्लिकेशन प्लेटफॉर्म को अनजान बनाने के लिए, हमें एंगुलर डीआई तंत्र के माध्यम से विंडो प्रदान करने की आवश्यकता है। इस तरह, हम अपने द्वारा चलाए जा रहे वातावरण के अनुसार सशर्त रूप से विंडो का उपयोग कर सकते हैं और अपने एप्लिकेशन को सर्वर पर ठीक से काम कर सकते हैं।

दूसरा कारण यह है कि सतत एकीकरण (CI) वातावरण windowमें इकाई परीक्षण चलाते समय वस्तु अनुपलब्ध हो सकती है । इस परिदृश्य में, हम Angular DI से लाभान्वित हो सकते हैं और इकाई परीक्षण निष्पादित करते समय वस्तु के लिए एक वैकल्पिक कार्यान्वयन प्रदान कर सकते हैं।window

लेकिन हम विंडो को इंजेक्टेबल कैसे बना सकते हैं?

हम Angular फ्रेमवर्क के InjectionToken वर्ग का उपयोग इस प्रकार कर सकते हैं:

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

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

1. टोकन का एक सरल विवरण
2. एक विकल्प ऑब्जेक्ट जो टोकन के व्यवहार को कॉन्फ़िगर करता है

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

मूल जावास्क्रिप्ट Documentऑब्जेक्ट में एक संपत्ति होती है जिसे कहा जाता है defaultViewजो वर्तमान दस्तावेज़ से जुड़ी विंडो लौटाती है। अब हम अपने कोणीय घटक को निम्नानुसार फिर से लिख सकते हैं:

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

क्या आपको यह तरीका उपयोगी लगा? आप अपने कोणीय अनुप्रयोगों में गैर-कोणीय वस्तुओं का उपयोग कैसे करते हैं? मुझे नीचे टिप्पणी में बताएं

यदि आप एंगुलर डीआई और सर्वोत्तम प्रथाओं के बारे में अधिक जानना चाहते हैं, तो अब आप मेरी नई किताब लर्निंग एंगुलर - चौथा संस्करण को प्री-ऑर्डर कर सकते हैं