Angular 응용 프로그램에 기능 전환 추가(최종 가이드 2020)

Angular 응용 프로그램에서 피쳐 플래그 기능을 구현하는 최종 가이드

Angular 응용 프로그램에 간단하고 강력한 기능을 추가하여 전환할 수 있는 세 가지 방법을 탐색해 보겠습니다.

입문

각도 응용 프로그램에 피쳐 플래그 기능을 추가하려면 어떻게 해야 합니까?이 안내서에서 우리는 세 가지 다른 방법을 연구하고 그 장단점을 검사할 것이다.
준비했어우리 잠수하자.👉🏻

1. 기능 전환을 Angular 응용 프로그램에 추가하는 가장 간단한 방법

이런 방법은 매우 간단하다.
그것은 ABC처럼 간단하다.
그리고 쉬워요.다음은 그것의 작업 원리다.
환경 파일을 사용하여 Angular 응용 프로그램에 기능 플래그 기능을 추가할 수 있습니다.
일부 전문가들은 이것이 기능 표시를 늘리는 신축 방식이 아니라고 말할 수 있다. 비록 그들이 옳을 수도 있지만, 이것은 여전히 좋은 입문 방식이기 때문에 응용 프로그램이 초기화 서비스로 인해 팽창하지 못하게 할 것이다.이것은 완전히 당신의 장면에 달려 있다는 것을 명심하세요.열거나 닫을 수 있는 기능 표시가 하나 또는 두 개만 있다면, 이것은 좋은 선택입니다.확장할 수 있습니까?아니.하나도 안 그래.
그래서 우리는 이렇게 할 수 있다.src/app/environments/environment.ts를 열고 로고 이름을 추가합니다. 그 값은true 또는false로 설정됩니다.
여기에 간단한 예가 하나 있다.

export const environment = {
  production: false,
  feature: false
};

그러면 피쳐 어셈블리가 생성됩니다.ng g c feature
다음은 환경 설정을 app.component.ts 파일에 가져오고 부분적인 변수를 설정하여 기능의 표지 상태를 저장합니다.이렇게

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature = environment.feature;
}

마지막으로 app.component.html 파일에서 ngIf 를 사용하여 피쳐 어셈블리를 표시할지 여부를 결정합니다.

<div>
  Angular Feature Flags Application
</div>
<app-feature *ngIf="feature"></app-feature>

그것은 몇 가지 기본 절차로 귀결된다.

환경 파일에 부울 플래그를 추가합니다.

이 블라인드를 응용 프로그램에 가져오면 어디에서나 그것을 사용하거나 열 수 있습니다.

이 방법은 매우 간단하지만, 하나의 기능을 전환하려고 할 때마다 environment.ts 파일을 변경하고 재배치해야 하기 때문에 많은 기능이 부족하다.어떤 환경과 장면에 대해서는 아무런 문제도 가져오지 않기 때문에 이것은 좋은 방법이다.그러나 원격 방식으로 스위치를 돌려 어떤 기능을 사용하거나 사용하지 않으려면 더 좋은 선택을 찾아보자.

2. 특별한 HTTP 호출 없이 Angular 응용 프로그램에 기능 전환을 추가하는 방법

그렇다면 프로그램의 나머지 부분을 유도하기 전에 우리는 어떻게 특수한 HTTP 호출을 피하여 기능 전환을 검사합니까?
기능 전환으로 feature-flags.json 파일을 src/app/assets/ 폴더에 추가할 수 있습니다.이 파일은 실시간 서버에서 언제든지 변경할 수 있습니다.
그럼 저희는 어떻게 해야 될까요?
우선 JSON 모듈(파일)을 분석하기 위해 Typescript 컴파일러를 구성합니다.그러면 JSON 설정을 임의의 파일*.ts로 가져올 수 있습니다.tsconfig.json를 열고 resolveJsonModule 를true로 설정합니다.이렇게

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
      ...
  }
}

그러면 새 JSON 파일에서 특성 플래그를 가져오려면 app.component.ts 을 편집합니다.

import { Component } from '@angular/core';
import * as FeatureFlags from '../assets/feature-flags.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature = FeatureFlags.feature;
}

마지막으로, 우리app.component.html 파일에서, 우리는ngIf를 사용하여 특징 표지의 설정에 따라 특징 구성 요소를 숨기거나 표시합니다.json 파일.

<div>
  Angular Feature Flags Application
</div>
<app-feature *ngIf="feature"></app-feature>

3. 그러나 원격 기능 전환은 어떻게 설정합니까?🤷

상술한 두 가지 방법은 당신의 프로젝트에 있어서 선진적이지 못할 수도 있습니다.그렇다면 우리는 어떻게 원격 설정 기능이 전환되는 곳에 원격 기능 전환을 설정합니까?예를 들어, 응용 프로그램을 표시하기 전에 Angular 응용 프로그램에서 API를 호출합니다.
우리는 우선 기능 표지 서비스를 만들어서 불러오는 기능 전환 설정의 논리를 관리할 것이다.ng g s feature-flags
다음은 서비스에 두 개의 함수를 추가합니다.하나는 원격 서버에서 기능 로고를 불러오는 데 사용되고, 다른 하나는 불러오는 설정에서 기능 로고를 가져옵니다.우리의 서비스 파일은 지금 이렇게 보인다.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';

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

  featureFlags: JSON;

  constructor(public httpClient: HttpClient) { }

  loadFeatureFlags(): Promise<any> {
    return this.httpClient.get("https://gist.githubusercontent.com/dkreider/dbef4a890bdc143b86d0b9330dbf2381/raw/22c03d8ed2d964a4c72fc1d35ea27dcb2adc9fd8/feature-flags.json")
      .pipe(tap((response) => this.featureFlags = response as any))
      .toPromise();
  }

  getFeatureFlag(key: string): boolean {
    return this.featureFlags[key];
  }
}

다음 단계는 Angular 응용 프로그램을 초기화할 때 이 서비스를 사용하도록 구성하는 것입니다.app.module.ts 파일에서, 우리는 제공 프로그램 부분에서 새로운 제공 프로그램을 설명하고, APP_INITIALIZER 을 사용하여 시작할 때loadFeatureFlags () 함수를 호출할 수 있도록 합니다.

providers: [
    FeatureFlagsService,
    {
      provide: APP_INITIALIZER,
      useFactory: (featureFlagsService: FeatureFlagsService) => () => featureFlagsService.loadFeatureFlags(),
      deps: [FeatureFlagsService],
      multi: true
    }
]

app.component.ts 파일에서 FeatureFlags Service를 주입하고 FeatureFlag 설정을 로드합니다.

import { Component } from '@angular/core';
import { FeatureFlagsService } from './feature-flags.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature: boolean;

  constructor(public featureFlagService: FeatureFlagsService) {
    this.feature = featureFlagService.getFeatureFlag("feature");
  }

}

결론

여기 있습니다.3가지 다른 방법으로 피쳐 플래그 기능을 Angular 응용 프로그램에 추가합니다.
질문이나 댓글?언제든지 연락 주세요!🧑🏼‍💻

한층 더 읽다

https://martinfowler.com/articles/feature-toggles.html
https://blog.theodo.com/2016/08/feature-toggling-in-angular-with-20-lines-of-code/
https://christianlydemann.com/how-to-use-feature-toggle-in-angular-apps/
https://netbasal.com/the-ultimate-guide-to-implementing-feature-flags-in-angular-applications-d4ae1fd33684