Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Механизм Provider можно определить как механизм, используемый в Angular для того, чтобы один экземпляр объекта мог получить другой экземпляр объекта. Provider состоит из директив, которые указывают компоненту приложения Angular, сервису или другим объектам, как получить доступ или создать эти объекты.

Провайдеры определяют экземпляр объекта, который будет использоваться, или способ его инстанцирования. В случае необходимости использования сервиса в компоненте, провайдер может быть определен в компоненте, чтобы указать метод, с помощью которого будет создан объект сервиса. Провайдер - это механизм, используемый в Angular для управления зависимостями объекта.

@Component({
  selector: 'app-root',
  template: `<h1>{{data}}</h1>`,
  providers: [MyService]
})

В этом компоненте объект MyService был определен с помощью свойства "providers", тем самым делая его пригодным для использования в данном компоненте.

В Angular существуют различные типы провайдеров:

Провайдер класса, который предоставляет экземпляр класса.

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getData() {
    return 'Data from MyService';
  }
}

Использование

import { Component } from '@angular/core';
import { MyClass } from './my.class';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyClassProvider]
})
export class AppComponent {
  constructor(private myClass: MyClass) {
    this.myClass.getData();
  }
}

Value Provider, который предоставляет значение и может быть использован для предоставления постоянного значения.

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

@Injectable({
  providedIn: 'root',
  useValue: 'Hello World'
})
export class MyValue {

}

Использование

import { Component } from '@angular/core';
import { MyValue } from './my.value';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyValueProvider]
})
export class AppComponent {
  constructor(private myValue: MyValue) {}
  get value() { return this.myValue.value; }
}

Factory Provider, который предоставляет функцию, возвращающую объект при вызове, и может быть использован для создания динамических объектов.

import { Injectable, FactoryProvider } from '@angular/core';

@Injectable()
export class MyValue {
  value = 'Hello World';
}

export function myFactory(myValue: MyValue) {
  return {
    getValue() {
      return myValue.value;
    }
  };
}

const MyFactoryProvider: FactoryProvider = {
  provide: 'MyFactory',
  useFactory: myFactory,
  deps: [MyValue]
};

Использование

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyFactoryProvider]
})
export class AppComponent {
  value: string;
  
  constructor(private myFactory: any) {}
  
  ngOnInit() {
    const myFactoryInstance = this.myFactory;
    this.value = myFactoryInstance.getValue();
  }
}

Существующий провайдер, который предоставляет экземпляр объекта, определенного в другом месте.

Aliased Provider, который позволяет определить объект под другим именем и может быть использован для обеспечения нескольких точек доступа к объекту.

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

@Injectable({
  providedIn: 'root',
  useValue: 'Hello World',
  multi: true
})
export class MyValue {

}

Использование

import { Component } from '@angular/core';
import { MyValue} from './my.value';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `
})
export class AppComponent {
  value: string;
  valueProvider: string;
  constructor(private myValue: MyValue) {
    this.value = myValue;
  }
}

Кроме того, стоит отметить, что сервисы предоставляются с использованием декоратора @Injectable() в связке с Angular.

Области использования провайдера

Управление службами и зависимостями: Его можно использовать для управления зависимостями компонента, сервиса или другого объекта. Например, если вы хотите использовать сервис внутри компонента, вы можете определить провайдера внутри компонента, чтобы указать, как должен быть создан объект сервиса.

Предоставление значений: Его можно использовать для предоставления постоянных или динамически генерируемых значений. Например, если вы хотите использовать постоянное значение внутри компонента, вы можете определить поставщика значений внутри компонента.

Тестируемость: Это упрощает управление и тестирование зависимостей между объектами. Например, если вы хотите протестировать объект сервиса, вы можете заменить экземпляр объекта сервиса, предоставляемый тестируемым компонентом, провайдером.

Создание динамических объектов: Его можно использовать для создания динамических объектов. Например, если вы хотите использовать другой экземпляр объекта внутри компонента, вы можете определить фабрику-провайдер внутри компонента, чтобы указать, как должен быть создан объект.

Доступ с разными именами: Его можно использовать для доступа к объектам с разными именами. Например, если вы хотите получить доступ к объекту службы с разными именами внутри компонента, вы можете определить псевдопровайдера внутри компонента.

ЗАКЛЮЧЕНИЕ

Провайдеры в Angular помогают нам управлять данными, сервисами и другими зависимостями в нашем приложении. Angular предоставляет нам различные типы провайдеров, каждый из которых предлагает подходящий подход для различных потребностей. К этим типам провайдеров относятся провайдеры значений, классов, фабрик, существующие и псевдопровайдеры.

Провайдеры значений используются, когда мы хотим поделиться только конкретным значением, а провайдеры классов используются для предоставления экземпляров классов. Фабричные провайдеры используются в ситуациях, когда требуется больший контроль, а существующие провайдеры могут использоваться для повторного использования уже созданного провайдера. Для упрощения доступа к существующему провайдеру можно использовать псевдопровайдеры.

Провайдеры упрощают управление зависимостями в приложениях Angular и помогают сделать код более читаемым и многократно используемым. Провайдеры являются одним из фундаментальных компонентов фреймворка Angular.