Ignite UI for Angular 시작하기

Ignite UI for Angular Infragistics의 Angular에 대한 머티리얼 기반 UI 위젯, 구성 요소 및 Sketch UI 키트와 지원 지시문의 완전한 세트입니다. 이를 통해 개발자는 Google의 Angular 프레임워크를 대상으로 하는 데스크톱 브라우저, 모바일 환경 및 프로그레시브 웹 앱(PWA)을 위한 최신 고성능 HTML5 및 JavaScript 앱을 구축할 수 있습니다.

Prerequisites

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

노드 다운로드

VS 코드 다운로드

Installing Ignite UI for Angular

Ignite UI for Angular Angular CLI 또는 Ignite UI CLI를 사용하여 설치할 수 있습니다.

Quick Start with the Angular CLI

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

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

ng new <project name> --style=scss

--style 옵션을 사용하여 애플리케이션의 스타일 파일에 사용할 파일 확장자 또는 전처리기를 지정할 수 있습니다. 구성 요소 스타일은 Ignite UI for Angular 기반으로 하므로 SCSS를 사용하는 것이 좋습니다. 나중에 Ignite UI for Angular 설치하면 애플리케이션은 전체 또는 특정 구성 요소 인스턴스에 대해 쉽게 사용자 정의할 수 있는 기본 스타일 테마를 사용하도록 구성됩니다.

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

ng add igniteui-angular

Note

패키지를 명시 적으로 설치할 igniteui-theming 필요가 없으며 Ignite UI for Angular 함께 제공됩니다. 위의 명령을 사용하면 평가판을 설치합니다 Ignite UI for Angular.

설치 과정에서 IE, Edge 및 Safari용 폴리필을 활성화할지 묻는 메시지가 표시됩니다. 이렇게 하면 프로젝트에 web-animations-js 패키지가 설치됩니다. 애플리케이션과 이러한 브라우저 중 하나에서 AnimationBuilder 사용하는 경우 필요합니다. 브라우저에서 HTML 요소 스타일을 재설정하기 위해 CSS 라이브러리를 추가하도록 선택할 수도 있으며 minireset.css 애플리케이션에 설치됩니다.

Ignite UI for Angular 사용을 시작하려면 Schematics 및 Ignite UI CLI가 포함된 패키지 업그레이드 가이드를 따르는 것이 좋습니다.

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

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

또는 igniteui-cli 사용하는 경우:

ig upgrade-packages

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

위에 설명된 접근 방식은 Ignite UI for Angular 패키지가 이미 설치된 시나리오에만 적용됩니다. 프로젝트의 새로운 설정을 수행하거나 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 사용하는 안내 경험은 구성된 애플리케이션을 부트스트랩하는 가장 쉬운 방법입니다.

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

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

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

ig

Note

단계 실행 중 어느 시점에서 아직 설정하지 않은 경우 npm 레지스트리에 로그인하라는 메시지가 표시됩니다. 이것은 평가판 계정 설정의 일부입니다.

첫 번째 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를 사용하여 생성되었거나 다음을 사용하여 Ignite UI for Angular 추가된 Angular CLI를 사용하여 생성된 경우 명령을 사용할 수 있습니다. igniteui-angular를 추가하세요 명령.

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

애플리케이션 실행

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

npm start

Add components manually

모듈 가져오기

먼저 app.module.ts 파일에서 사용하려는 구성 요소의 각 모듈을 가져와야 합니다. 계속해서 igxGrid에 대해 이 작업을 수행합니다! 일부 구성요소에는 BrowserAnimationsModule에 따라 애니메이션이 있으므로 해당 구성요소도 가져오겠습니다.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Here we import the IgxGridModule, so we can use the igxGrid!
import { IgxGridModule } from 'igniteui-angular';
// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxGridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

구성 요소 사용

이제 마크업에서 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에서 참조되는 그리드의 데이터와 애플리케이션의 제목을 정의합니다.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
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

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

API References

이 기사에서는 Ignite Ignite UI CLI에서 Ignite UI for Angular의 완전 자동화된 프로세스를 활용하여 처음부터 자체 Ignite UI for Angular를 만드는 방법을 배웠습니다. 또한 Angular CLI를 사용하여 기존 애플리케이션에 Ignite UI for Angular 추가하는 방법도 배웠습니다. 우리는 탐색 메뉴를 참조하여 살펴볼 수 있는 몇 가지 멋진 기능을 제공하는 IgxGridComponent 포함하여 자체 페이지를 디자인했습니다.

Additional Resources

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

Ignite UI for Angular 시작하기

Prerequisites

Installing Ignite UI for Angular

Quick Start with the Angular CLI

Note

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

Quick Start with Angular Schematics & Ignite UI CLI

Note

Using Ignite UI for Angular

Add components automatically

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

Note

애플리케이션 실행

Add components manually

모듈 가져오기

구성 요소 사용

애플리케이션 실행

API References

Additional Resources

테마