Ignite UI for Angular 시작하기
Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.
Ignite UI for Angular is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used. For more details, refer to the Ignite UI Licensing and Open Source vs Premium topics.
Prerequisites
- NodeJS를 설치합니다.
- 비주얼 스튜디오 코드를 설치합니다.
Installing Ignite UI for Angular
Ignite UI for Angular can be installed either with the Angular CLI or with the Ignite UI CLI.
Quick Start with the Angular CLI
The Angular CLI provides support for external libraries to your project through the ng add command, which installs a library's npm packages to your workspace and configures the project in the current working directory to use that library.
Angular CLI로 Angular 애플리케이션을 만들려면 원하는 터미널을 열고 다음 명령을 입력하세요.
ng new <project name> --style=scss
You can specify the file extension or preprocessor to use for your application's style files with the --style option. We recommend using SCSS since our components' styles are based on the Ignite UI for Angular theming library. Later on, when you install the Ignite UI for Angular package, your application will be configured to use the default styling theme which can be then easily customized either for all or for specific component instances.
그런 다음 다음 명령을 실행하여 프로젝트에 대한 모든 종속성, 글꼴 가져오기 및 스타일 참조와 함께 Ignite UI for Angular 패키지를 설치할 수 있습니다.
ng add igniteui-angular
Note
You don't need to install the igniteui-theming package explicitly, it comes with Ignite UI for Angular.
Note
Keep in mind that with the command above you will install the Trial version of any Ignite UI for Angular component under commercial license (such as igxGrid).
Additional packages
In addition, you may want to include a number of Ignite UI components to your project, such as:
- Grid Lite - Open-Source
The Grid Lite component is designed to provide a minimal set of features under MIT license that should serve a wide range of projects that need essential data-display functionality with minimal overhead, and the performance users expect. It is designed for developers who need fast, lightweight data presentation without the complexity of an enterprise grid. Its API resembles that of the commercial IgxGrid ensuring a simple and straightforward upgrade path.
ng add igniteui-grid-lite
- Dock Manager - Premium
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
or if using 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
At some point during the steps execution you'll be asked to login to our npm registry if not already setup. This is part of the Trial to License account setup and is applicable if you plan to use any of the components under commercial license.
첫 번째 Ignite UI CLI 앱 빌드
Angular Schematics 및 Ignite UI CLI에 대해 자세히 알아보세요.
Using Ignite UI for Angular
이제 Ignite UI for Angular 사용할 준비가 되었습니다!
Add components automatically
모듈 가져오기 및 구성 요소 사용
Now we can add new components to our application using either the component schematic or the add command:
ng g @igniteui/angular-schematics:component
ig add
Note
Please note that the ig add command can be used if the application was created by using the Ignite UI CLI or
if it was created by using the Angular CLI with Ignite UI for Angular added to it by using the ng add igniteui-angular command.
메뉴 옵션을 살펴보고 응용 프로그램에 추가할 구성 요소를 선택하면 프로젝트에 페이지의 어느 곳에서나 사용할 수 있는 새로운 구성 요소가 있음을 알 수 있습니다!
애플리케이션 실행
이제 멋진 페이지를 보기 위해 애플리케이션을 실행해 봅시다!
npm start
Add components manually
As of Angular 19, standalone components are the default way to build Angular apps, removing the need for NgModules and simplifying the process of adding components significantly. So let's use this to add an igxGrid component to our app.
Before we start though, please note that some components have animations that require a provider as part of the bootstrapApplication call.
// 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>
We will also define the data of the grid and the title of our application that are referenced from the app.component.ts. As we are using standalone components we simply have to add the IgxGridComponent class to our app's imports, alongside any other components used in the template. In our example, as we are defining columns, we also have to add the IgxColumnComponent to the import array.
// 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
최종 결과는 다음과 같아야 합니다.
API References
In this article we learned how to create our own Ignite UI for Angular application from scratch by taking advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI. We also learned how to add Ignite UI for Angular to an existing application by using the Angular CLI. We designed our own page by including the IgxGridComponent to it, which itself offers some awesome features, which you can take a look at by referring to the navigation menu.
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub