Ignite UI for Angular 사용하는 단계별 가이드

사용 가능한 옵션을 통해 안내된 경험을 얻으려면 새 애플리케이션을 생성 및 설정하고 이전에 Ignite UI Angular Schematics로 생성된 프로젝트를 업데이트하는 데 도움이 되는 단계별 모드를 초기화할 수 있습니다.

Schematics 컬렉션 실행을 사용하여 가이드를 활성화하려면 다음을 수행하십시오.

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

이렇게 하면 단계별 모드가 활성화되고 새 프로젝트를 만드는 데 도움이 되는 일련의 질문을 받게 됩니다.

Note

단계별 모드는 Inquirer.js에 의존합니다. 지원되는 터미널을 참조하세요.

Create new project

먼저 모듈 또는 독립 실행형 구성 요소를 사용하여 응용 프로그램을 부트스트랩하는 방법을 선택하라는 메시지가 표시됩니다.

그런 다음 응용 프로그램의 이름을 입력할 수 있습니다.

그런 다음 사용 가능한 프로젝트 템플릿 중 하나를 선택하라는 안내가 표시됩니다. 빈 프로젝트, 측면 탐색이 있는 프로젝트 또는 기본 인증 모듈이 있는 인증 프로젝트를 만들 수 있습니다. 화살표 키를 사용하여 사용 가능한 옵션을 탐색하고 ENTER를 눌러 선택을 확인합니다.

다음 단계는 애플리케이션의 테마를 선택하는 것입니다. 기본 옵션을 선택하면 미리 컴파일된 CSS 파일(igniteui-angular.css) Ignite UI for Angular 프로젝트의 angular.json. 사용자 정의 옵션은 색상 팔레트 및 테마에 대한 코드를 생성합니다. 테마 API에서 app/styles.scss.

위의 단계를 완료하면 애플리케이션 구조가 생성되고 git 저장소가 초기화되며 프로젝트가 커밋됩니다. 그런 다음 프로세스를 완료할지 아니면 애플리케이션에 새 보기를 추가할지 묻는 메시지가 표시됩니다.

Add view

Ignite UI CLI는 프로젝트에 추가할 수 있는 여러 구성 요소 템플릿은 물론 좀 더 정교한 시나리오 템플릿을 지원합니다. 이 모드는 프로젝트 생성을 완료한 후 또는 아래 명령을 사용하여 기존 프로젝트 내에서 활성화할 수 있습니다.

Schematics 컬렉션을 사용하여 단계별 모드를 활성화하려면 component (별칭: c) 회로도를 실행합니다.

ng g @igniteui/angular-schematics:component

새 컨트롤을 추가하도록 선택한 경우 범주별로 그룹화 된 사용 가능한 템플릿 목록이 제공됩니다.

화살표 키를 사용하여 옵션을 탐색하고 ENTER를 눌러 선택한 항목을 선택합니다.

예를 들어 Custom Grid와 같은 일부 템플릿의 경우 활성화할 수 있는 옵션 목록이 제공됩니다. 옵션은 SPACE 키로 전환할 수 있습니다.

애플리케이션에 시나리오를 추가하도록 선택하면 사용 가능한 시나리오 템플릿 목록도 얻게 됩니다.

응용 프로그램에 템플릿을 추가한 후 프로세스를 완료할지 아니면 더 많은 컨트롤을 추가할지 묻는 메시지가 표시됩니다. 프로세스를 완료하도록 선택하면 필요한 패키지가 설치되고(프로젝트 생성 시) 애플리케이션이 제공되고 기본 브라우저에서 열립니다.

나중에 ng g @igniteui/angular-schematics:c [template] [name] 명령을 사용하여 언제든지 애플리케이션에 Ignite UI for Angular 더 추가할 수 있습니다.