Uma janela Angular melhor

Como desenvolvedores Angular, enfrentamos muitos desafios em nossa rotina diária de desenvolvimento. Uma delas é quando precisamos interagir com um objeto JavaScript nativo em um aplicativo Angular, como o windowobjeto global.

Se você leu meu livro Learning Angular — 3rd Edition , deve saber que o Angular é fortemente baseado em injeção de dependência (DI) . E que é considerada uma boa prática converter objetos não Angular, como a janela, em injetáveis ​​ao invés de usá-los diretamente. Por que?

A estrutura Angular é multiplataforma, o que significa que pode ser executada em diferentes ambientes, como móvel e servidor. Um aplicativo Angular pode ser executado no servidor usando a técnica Server Side Rendering (SSR) .

Para obter mais informações sobre a natureza multiplataforma do Angular, confira meu artigo Por que escolher a estrutura Angular .

Quando usamos SSR em Angular, não há nenhum windowobjeto. Está disponível apenas no ambiente do navegador. Para superar esse problema e tornar nossa plataforma de aplicativos inconsciente, precisamos fornecer a janela por meio do mecanismo Angular DI . Desta forma, podemos usar a janela condicionalmente de acordo com o ambiente que rodamos e fazer com que nossa aplicação funcione corretamente no servidor.

Outro motivo é que o windowobjeto pode estar indisponível ao executar testes de unidade em um ambiente de Integração Contínua (CI) . Nesse cenário, poderíamos nos beneficiar da Angular DI e fornecer uma implementação alternativa para o windowobjeto ao executar testes de unidade.

Mas como podemos tornar a janela injetável?

Podemos utilizar a classe InjectionToken do framework Angular da seguinte forma:

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

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

1. Uma descrição simples do token
2. Um objeto de opções que configura o comportamento do 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) {}
}

O objeto JavaScript nativo Documentcontém uma propriedade chamada defaultViewque retorna a janela associada ao documento atual. Agora podemos reescrever nosso componente Angular da seguinte maneira:

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

Você achou essa abordagem útil? Como você acessa objetos não Angular em seus aplicativos Angular? Deixe-me saber nos comentários abaixo

Se você quiser aprender mais sobre Angular DI e melhores práticas, agora você pode encomendar meu novo livro Learning Angular — 4th edition