Angular 17의 제어 흐름: 개발 경험 향상

최적화된 기본 제공 제어 흐름을 위해 새로운 블록 템플릿 구문을 수용하여 Ignite UI for Angular 구성 요소 내에서 Angular 개발 경험을 향상시킬 수 있다는 소식을 전하게 되어 기쁩니다. 이 강력한 기능은 코드를 단순화하고, 형식 검사를 개선하고, 번들 크기를 줄이고, 성능을 향상시킵니다. 이제 몇 가지 코드 샘플로 이동하여 구문이 실제로 작동하는지 살펴보겠습니다!

Try Ignite UI for Angular

Angular의 내장 제어 흐름이란 무엇입니까?

Angular에서 "제어 흐름"이라는 용어는 Angular 응용 프로그램 내에서 명령문과 지시문이 실행되는 순서를 나타냅니다. Angular 17에는 제어 흐름(@if, @switch @for)을 관리하기 위한 최적화된 새로운 내장 구문이 있어 개발자가 실행 흐름을 보다 세밀하게 제어할 수 있습니다. 이를 통해 개발자는 대부분의 프로그래밍 언어에서 익숙한 패턴에 더 가깝게 사용할 수 있으므로 애플리케이션 뷰를 구성할 때 발생하는 오류를 최소화할 수 있습니다. 직접 사용할 수 있으며 추가 가져오기 없이 템플릿에서 사용할 수 있습니다.

Angular 17에서 제어 흐름은 구체화된 변경 감지 시스템에 의해 관리되어 애플리케이션 상태 변경 사항을 뷰에 효율적으로 적용합니다. 이는 현대적인 대화형 웹 애플리케이션을 구축하기 위한 견고한 기반 제공업체로서의 Angular의 역할을 강조합니다.

조건문으로 시작하기

당신이해야 할 일은 보다 직관적이고 깔끔한 코드를 위해 *ngIf 및 *ngSwitch를 새 구문으로 업그레이드하는 것입니다.

@if

조건부 렌더링을 위해 IgxGrid의 IgxColumn 템플릿 내에서 @if 활용합니다.

<igx-column field="Discontinued" header="Discontinued" [sortable]="true" [dataType]="'boolean'"> 
    <ng-template igxCell let-cell="cell" let-val> 
        @if (val) { 
            <img src="assets/active.png" title="Continued" alt="Continued" />
        } @else { 
            <img src="assets/expired.png" title="Discontinued" alt="Discontinued" /> 
        } 
    </ng-template> 
</igx-column> 

IgxColumn의 데모 @if

@switch 

동적 아이콘 선택을 위해 IgxSelect 구성 요소의 IgxSelectItem 내에서 @switch 지시문을 적용합니다.

<igx-select-item [value]="fruit.type" class="select__entry" [text]="fruit.type">
    {{fruit.type}}
    @switch (fruit.delivery) {
    @case ('flight') { <igx-icon>flight</igx-icon> }
    @case ('train') { <igx-icon>train</igx-icon> }
    @case ('boat') { <igx-icon>directions_boat</igx-icon> }
    }
</igx-select-item>

IgxSelect의 데모 @switch

다음으로 내장 for 루프에 대해 이야기해 보겠습니다.

새로운 내장 for 루프로 더 빠른 렌더링 속도를 경험하십시오.

@for

이를 통해 많은 사용 사례를 파악할 수 있습니다. 다음 예에서는 IgxDropDown을 사용합니다.

@for (town of towns | startsWith:townSelected; track town.name) {
    <igx-drop-down-item [value]="town">
        {{town}}
    </igx-drop-down-item>
}

Demo For Loop in IgxDropDown 

또는 그리드의 열을 반복하십시오.

@for(c of columns; track c.field) {
    <igx-column
    [field]="c.field"
    [header]="c.field"
    [cellStyles]="c.cellStyles">
    </igx-column>
}

IgxGrid의 루프 데모 

지연 로딩을 위한 지연 가능한 뷰(Deferrable Views for Lazy Loading)

새로운 지연 가능한 보기를 활용하여 선언적이고 강력한 접근 방식으로 지연 로드를 개선합니다. 이 새로운 기능을 사용하면 IgxList 구성 요소의 목록 항목에 대한 지연된 로드를 생성할 수 있습니다. 버튼을 클릭한 후 나타납니다.

<igx-list #fruitList>
    @defer (on interaction(b1)) {
        @for(fruit of fruitsData; track fruit) {
            <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content">
                {{ fruit }}
            </igx-list-item>
        }
    } @placeholder {
        <button #b1 type="button" igxButton="raised">Click here to trigger interaction</button>
    }
</igx-list>

IgxList를 사용한 데모 지연 보기 

결합 된 샘플

원하는 경우 언급된 모든 기능을 통합한 보다 포괄적인 예제를 탐색할 수 있습니다. 여기에서 탐색 서랍의 주요 내용을 연기할 수 있습니다. nav에서 항목을 선택한 직후에 로드됩니다.

@defer(on interaction(drawer)) {
  <span igxButton="icon" igxToggleAction="navigation">
    <igx-icon family="material">menu</igx-icon>
  </span>
  <h5>{{selected}}</h5>
  @switch(selected) {
    @case('Grid') {
      <app-grid-adf-style-sample></app-grid-adf-style-sample>
    }
    @case('Autocomplete') {
      <app-autocomplete></app-autocomplete>
    }
    @default {
      <app-reactive-form-validation></app-reactive-form-validation>
    }
  }
} @placeholder {
  <span>Pick a component from nav drawer to load...</span>
}

네트워크 탭을 확인하여 응용 프로그램의 초기 로드 시간과 리소스를 확인할 수 있습니다. nav drawer의 주요 내용을 연기하고 있기 때문에 다음과 같이 로드됩니다.

사용자가 항목을 선택하면 뷰의 콘텐츠와 리소스가 로드됩니다.

지연된 보기의 크기에 따라 로드 시간을 크게 늘릴 수 있습니다. 지연된 보기에 대한 자세한 내용은 여기에서 확인할 수 있습니다.  또한 nav 항목의 목록은 새 구문을 사용하여 수행할 수 있습니다.

@for(item of navItems; track item.name) {
  <span igxDrawerItem igxRipple (click)="navigate(item)">
    <igx-icon family="material">{{ item.name }}</igx-icon>
    <span>{{ item.text }}</span>
  </span>
}

또한 샘플의 보기 중 하나에는 유효성 검사, 아이콘 및 힌트를 표시하기 위해 이 기능을 사용하는 반응형 양식 입력이 있습니다.

<igx-input-group>
    <label igxLabel for="password">Password</label>
    <input igxInput name="password" [type]="showPassword ? 'text' : 'password'" formControlName="password" />
    @if (password.errors?.minlength) {
        <igx-hint >Password should be at least 8 characters</igx-hint>
    }
    @if (password.value) {
        <igx-icon igxSuffix (click)="showPassword = !showPassword">
            {{ togglePasswordVisibility }}
        </igx-icon>
    }
</igx-input-group>

시작하기

지금 바로 Angular 프로젝트를 버전 17로 업그레이드하고 내장된 제어 흐름을 사용해 보세요. 기존 프로젝트에서 사용합니다. 향상된 개발자 환경을 살펴보고 Angular 애플리케이션의 성능을 향상시키세요.

향상된 Angular 제어 흐름으로 즐거운 코딩을 즐겨보세요!