Angular Client SDK

Background

Angular Client SDK повторно использует ряд концепций javaScript.

Angular Client включает в себя:

• параметры инициализации имеют тот же набор параметров, но специфичными для angular.
• services
• паттерн инъекция зависимостей

Инициализация SDK

Вы можете установить модуль Sigma через npm или yarn.

NPM

npm install expf-sigma.js

Yarn

yarn add expf-sigma.js

Пример

Для работы sdk можно настроить отдельный services, который будет содержать настройки sdk и данные экспериментов, фича флагов.

./src/app/services/sigma.services.js

import { Injectable } from '@angular/core';
import Sigma from 'expf-sigma.js';

@Injectable({
  providedIn: 'root'
})

export class SigmaService {
  sigmaData: {
    title: 'string';
    buttonText: 'string';
    buttonColor: 'string;'
  } = {
    title: '',
    buttonText: '',
    buttonColor: 'transparent'
  };

  async getSigma() {
    const sigma = new Sigma();
    const token = <TOKEN>;
    sigma.init({
      token,
      userData: {
        email: '1ex@mail.ru',
        custom: {
          cookieKey: '1',
        },
      },
    });

    const browserName = await sigma.checkFlag('browser_name');
    const buttonColor = await sigma.checkFlag('button_color');
    const pay = await sigma
      .getExperiment('exp_name_pay')
        .then((res: { getFeatureValue: (arg0: 'string') => any }) =>
          res.getFeatureValue('pay')
        );

    this.sigmaData.buttonColor = buttonColor || 'red';
    this.sigmaData.buttonText = pay || 'cache';
    this.sigmaData.title = browserName;
  }
}

Результат можно передать в любой конструктор компонента в виде инъекции

./src/app/button/button.component.js

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

import { SigmaService } from '../services/sigma.services';

@Component({
  selector: 'app-button',
  styleUrls: ['./button.component.css'],
  templateUrl: `
    <button
      class="button"
      *ngIf="service.sigmaData?.buttonText"
      [ngStyle]="{ 'background': service.sigmaData?.buttonColor }"
    >
      {{ service.sigmaData?.buttonText }}
    </button>
  `,
})

export class ButtonComponent implements OnInit {
  constructor(@Optional() public service: SigmaService) {}

  ngOnInit(): void {}
}