Перейти к основному содержимому

Angular Client SDK

Background

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

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

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

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

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

npm install 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 {}
}