Ignite UI for Angular 시작하기

    Ignite UI for AngularInfragistics Angular을 위한 Material 기반 UI 위젯, 컴포넌트 및 Sketch UI 키트와 지원 지침의 완전한 세트입니다. 이 앱은 개발자들이 구글의 Angular 프레임워크를 타겟으로 데스크톱 브라우저, 모바일 경험, 프로그레시브 웹 앱(PWA)을 위한 현대적인 고성능 HTML5 및 자바스크립트 앱을 만들 수 있도록 지원합니다.

    Ignite UI for Angular 이중 라이선스 모델로 제공되며, 사용되는 컴포넌트, 모듈, 지침 및 서비스에 따라 상업적 및 허용된 오픈 소스 사용 모두를 허용합니다. 자세한 내용은 Ignite UI 라이선싱과 오픈 소스 대 프리미엄 주제를 참고하세요.

    Prerequisites

    1. NodeJS를 설치합니다.
    2. 비주얼 스튜디오 코드를 설치합니다.

    Installing Ignite UI for Angular

    Ignite UI for Angular Angular CLI 또는 Ignite UI CLI와 함께 설치할 수 있습니다.

    Quick Start with the Angular CLI

    Angular CLI는 명령어를 통해ng add 프로젝트의 외부 라이브러리를 지원합니다. 이 명령어는 라이브러리의 패키지를npm 작업 공간에 설치하고 현재 작업 디렉터리에서 해당 라이브러리를 사용하도록 프로젝트를 구성합니다.

    Angular CLI로 Angular 애플리케이션을 만들려면 원하는 터미널을 열고 다음 명령을 입력하세요.

    ng new <project name> --style=scss

    이 옵션을 통해--style 애플리케이션의 스타일 파일에 사용할 파일 확장자나 전처리자를 지정할 수 있습니다. 저희는 SCSS 사용을 권장합니다. 저희 컴포넌트 스타일은 Ignite UI for Angular 테마 라이브러리를 기반으로 하기 때문입니다. 나중에 Ignite UI for Angular 패키지를 설치할 때, 애플리케이션은 기본 스타일링 테마를 사용하도록 설정되며, 이 테마는 모든 또는 특정 구성 요소 인스턴스별로 쉽게 커스터마이즈할 수 있습니다.

    그런 다음 다음 명령을 실행하여 프로젝트에 대한 모든 종속성, 글꼴 가져오기 및 스타일 참조와 함께 Ignite UI for Angular 패키지를 설치할 수 있습니다.

    ng add igniteui-angular
    Note

    패키지를igniteui-theming 명시적으로 설치할 필요는 없고, Ignite UI for Angular 패키지가 함께 제공됩니다.

    Note

    위의 명령어를 사용하면 상업용 라이선스(예: Ignite UI for AngularigxGrid 구성 요소)의 체험판 버전을 설치한다는 점을 기억하세요.

    추가 패키지

    또한, 다음과 같은 여러 Ignite UI 요소를 프로젝트에 포함시키는 것이 좋습니다:

    • 그리드 라이트 - 오픈소스

    ​Grid Lite 컴포넌 트는 MIT 라이선스 하에서 최소한의 기능을 제공하도록 설계되었으며, 필수적인 데이터 표시 기능이 필요한 다양한 프로젝트에 최소한의 오버헤드와 사용자가 기대하는 성능을 충족할 수 있도록 설계되었습니다. 기업용 그리드의 복잡함 없이 빠르고 가벼운 데이터 표현이 필요한 개발자를 위해 설계되었습니다. API는 상업IgxGrid 용 API와 유사하여 간단하고 직관적인 업그레이드 경로를 제공합니다.

    ng add igniteui-grid-lite
    • 도크 매니저 - 프리미엄

    Ignite UI Dock Manager 구성 요소는 창을 통해 애플리케이션의 레이아웃을 관리하는 수단을 제공하며, 최종 사용자는 창을 고정, 크기 조정, 이동 및 숨기는 등 애플리케이션을 추가로 사용자 정의할 수 있습니다.

    ng add igniteui-dockmanager

    Upgrading from Trial to Licensed

    ​라이센스가 부여된 Ignite UI for Angular 패키지를 사용하려면 회로도 및 Ignite UI CLI와 함께 패키지 업그레이드 가이드를 따르는 것이 좋습니다.

    다음은 라이센스가 부여된 버전의 Ignite UI for Angular를 사용하기 위해 수행해야 하는 단계에 대한 간략한 개요입니다. 프로젝트 설정에 따라 프로젝트에서 다음 회로도를 실행합니다.

    ng g @igniteui/angular-schematics:upgrade-packages

    또는 다음을 사용할igniteui-cli 경우:

    ig upgrade-packages

    회로도는 프로젝트의 패키지 종속성 전환 및 소스 참조 업데이트를 처리합니다. 아직 설정하지 않은 경우 npm 레지스트리에 로그인하라는 메시지가 표시됩니다.

    새로운 설정으로 npm 레지스트리에 로그인하십시오.

    위에 설명된 접근 방식은 Ignite UI for Angular Trial 패키지가 이미 설치된 시나리오에만 적용됩니다. 프로젝트의 새 설정을 수행하거나 Ignite UI for Angular 사용하여 시작하는 경우 아래 지침을 따르세요.

    다음과 같이 개인 npm 피드 환경을 올바르게 설정하는 것이 매우 중요합니다.

    • 개인 레지스트리의 유효한 설정을 보장합니다.
    • 평가판이 아닌 사용자 계정과 암호를 지정하여 npm을 사용하여 비공개 피드에 로그인합니다.

    전체 프로세스에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

    Quick Start with Angular Schematics & Ignite UI CLI

    처음부터 애플리케이션을 만들고 Ignite UI for Angular 사용하도록 구성하려면 Ignite UI for Angular 또는 Ignite UI CLI를 사용할 수 있습니다. 첫 번째 단계는 다음과 같이 해당 패키지를 전역적으로 설치하는 것입니다.

    npm i -g @igniteui/angular-schematics

    or:

    npm install -g igniteui-cli

    Ignite UI CLI 또는 Ignite UI for Angular Schematics를 사용하는 가이드 경험은 구성된 애플리케이션을 부트스트랩하는 가장 쉬운 방법입니다.

    Ignite UI for Angular Schematics를 사용하여 가이드를 활성화하려면 다음을 실행합니다.

    ng new --collection="@igniteui/angular-schematics"

    또는 CLI 도구를 사용하는 경우 다음 명령을 실행하십시오.

    ig
    Note

    단계 실행 중 어느 시점에 아직 설정하지 않았다면 NPM 레지스트리에 로그인하라는 요청을 받게 됩니다. 이것은 Trial to License 계정 설정의 일부이며, 상업용 라이선스 하에 구성 요소를 사용할 계획이라면 적용됩니다.

    비디오 재생

    첫 번째 Ignite UI CLI 앱 빌드

    ​Angular Schematics 및 Ignite UI CLI에 대해 자세히 알아보세요.

    Using Ignite UI for Angular

    이제 Ignite UI for Angular 사용할 준비가 되었습니다!

    Add components automatically

    모듈 가져오기 및 구성 요소 사용

    이제 회로도나component 명령어를 사용하여add 애플리케이션에 새로운 컴포넌트를 추가할 수 있습니다:

    ng g @igniteui/angular-schematics:component

    ig add
    Note

    참고하세요,ig add 명령어는 애플리케이션이 Ignite UI CLI를 사용해 생성되었거나, Angular CLI에 Ignite UI for Angular를 추가하여 생성되었을 때 사용할 수 있습니다. NG 추가: 점화-각도 지휘부.

    메뉴 옵션을 살펴보고 응용 프로그램에 추가할 구성 요소를 선택하면 프로젝트에 페이지의 어느 곳에서나 사용할 수 있는 새로운 구성 요소가 있음을 알 수 있습니다!

    애플리케이션 실행

    이제 멋진 페이지를 보기 위해 애플리케이션을 실행해 봅시다!

    npm start

    Add components manually

    Angular 19년부터 독립 실행형 컴포넌트가 Angular 앱 구축의 기본 방식이 되어 컴포넌트 추가 과정을 크게 줄이고NgModules 간소화했습니다. 그래서 이 도구를 사용해 앱에 igxGrid 컴포넌트를 추가해 봅시다.

    하지만 시작하기 전에, 일부 컴포넌트에는 통화 시bootstrapApplication 제공자가 필요하다는 애니메이션이 있다는 점을 참고해 주세요.

    // main.ts

import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

    // app/app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';

const providers: Provider = [
  importProvidersFrom(BrowserModule),
  provideAnimations()
];

export const appConfig: ApplicationConfig = { providers };

    구성 요소 사용

    이제 마크업에서 igxGrid를 사용할 준비가 되었습니다! 계속해서 app.component.html 파일에서 정의해 보겠습니다.

    <!-- app.component.html -->

<div style="text-align:center; margin-bottom: 20px;">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>

<div style="text-align: center;">
  <igx-grid [data]="localData" width="600px" height="400px" style="margin: auto" [allowFiltering]="true">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
  </igx-grid>
</div>

    또한 app.component.ts에서 참조한 그리드 데이터와 애플리케이션 제목도 정의할 것입니다. 독립 실행형 컴포넌트를 사용하기 때문에, 템플릿에서 사용하는 다른 컴포넌트들과 함께 클래스를 앱의 가져오기에 추가IgxGridComponent 하기만 하면 됩니다. 예시에서 열을 정의할 때, 가져오기 배열에도 추가IgxColumnComponent 해야 합니다.

    // app.component.ts

import { Component } from '@angular/core';
import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/grid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [IgxGridComponent, IgxColumnComponent]
})
export class AppComponent {
  localData = [
    { Name:'John', Age: 29 },
    { Name:'Alice', Age: 27 },
    { Name:'Jessica', Age: 31 },
  ];

  title = 'My Ignite UI project';
}

    애플리케이션 실행

    마지막으로 다음 명령 중 하나를 사용하여 새 애플리케이션을 실행할 수 있습니다.

    • Ignite UI CLI를 사용하여 애플리케이션을 만든 경우:
    ig start
    • Angular CLI를 사용하여 애플리케이션이 생성된 경우:
    ng serve

    최종 결과는 다음과 같아야 합니다.

    Ignite UI 프로젝트

    API References

    이 글에서는 Ignite UI CLI에서 Ignite UI for Angular 프로젝트 생성의 완전 자동화 과정을 활용해 자신만의 Ignite UI for Angular 애플리케이션을 처음부터 만드는 방법을 배웠습니다. 또한 Angular CLI를 사용해 기존 애플리케이션에 Ignite UI for Angular을 추가하는 방법도 배웠습니다. 저희는 to it 자체를 포함IgxGridComponent 해 자체 페이지를 디자인했는데, 이 페이지 자체도 멋진 기능들을 제공하니 내비게이션 메뉴를 참고하면 확인할 수 있습니다.

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.