Angular 구성 요소를 사용하여 현대적인 웹 경험을 더 빠르게 구축하세요

Material은 웹, Android, iOS 또는 Flutter를 대상으로 하는 앱을 위해 설계된 Google에서 만든 오픈 소스 디자인 시스템입니다. 디자인 시스템을 백업하는 구성 요소를 기반으로 개발자는 앱의 사용자 인터페이스를 구축하기 위한 출발점을 갖게 됩니다. Infragistics Ignite UI for Angular 머티리얼 디자인 시스템을 기반으로 구축되었습니다. Angular Material에는 다음에 대한 가이드, 사양 및 예시가 포함되어 있습니다.

• 공들여 나열한 것
• 항해
• 색상
• 타이포그래피
• 소리
• 도상학
• 모양
• 운동
• 상호 작용

다른 좋은 디자인 시스템과 마찬가지로 Angular Material도 적응성이 뛰어납니다. 이는 사용자 인터페이스 디자인의 모범 사례를 지원하는 지침, 구성 요소 및 도구의 시스템입니다.

Angular 지시문의 하위 집합인 Angular 구성 요소는 Angular 앱을 구성하는 사용자 인터페이스(UI)의 기본 구성 요소입니다. Angular 앱에서 Angular 구성 요소의 계층적 트리는 사용자 인터페이스를 설명하고 사용자가 브라우저에서 보고 상호 작용하는 애플리케이션의 모든 측면을 캡슐화합니다. Angular 구성 요소에는 템플릿, 스타일, 애니메이션, 변경 감지, 공급자, 주입 가능한 뷰 등이 포함됩니다.

Angular 구성 요소를 만들면 다음 세 가지 파일이 있습니다.

1. 구성 요소 클래스라고 하는 TypeScript 클래스
2. 구성 요소의 템플릿이라고 하는 HTML 파일
3. 구성 요소 스타일 지정을 위한 선택적 CSS 파일

Angular 앱이 브라우저에 로드되면 Angular의 "보기"가 표시됩니다. 해당 "뷰"는 하나 이상의 Angular 구성 요소(일반적으로 하나 이상)로 구성됩니다. Angular 애플리케이션에서 사용자가 페이지를 탐색하거나 뷰의 다양한 구성 요소와 상호 작용할 때 Angular 프레임워크는 구성 요소 생성, 업데이트 또는 삭제를 처리합니다. 구성 요소 자체는 애플리케이션 수명 주기에서 발생하는 이벤트에 응답할 수 있으므로 개발자는 구성 요소 수명 주기의 이벤트에 반응하는 코드를 작성할 수 있습니다.

https://angular.io/api/core/Component에서 Angular 구성 요소에 대해 자세히 알아보세요.

Angular CLI 명령을 사용하면 다음 명령을 사용하여 구성 요소를 생성할 수 있습니다.

ng 생성 구성 요소 제품

이 명령은 아래와 같이 ProductComponent를 생성합니다.

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'] }) 내보내기 클래스 ProductComponent 구현 OnInit { constructor() { } ngOnInit() { }

구성 요소는 @Component 데코레이터로 장식된 클래스입니다.

구성 요소를 만드는 네 단계는 다음과 같습니다.

1. 클래스를 만들고 내보냅니다. 이 클래스에는 데이터와 논리가 포함됩니다.
2. @component 메타데이터로 클래스를 장식합니다. 메타데이터는 구성 요소를 설명하고 다양한 속성의 값을 설정합니다.
3. 필요한 라이브러리와 모듈을 가져와 구성 요소를 만듭니다.
4. 구성 요소의 템플릿을 만들고 선택적으로 구성 요소의 스타일을 만듭니다.

보시다시피 생성된 ProductComponent는 다음으로 구성됩니다.

• 데이터와 로직을 담는 클래스.
• 앱에 데이터를 표시하는 HTML 템플릿 및 스타일. 보기라고도 하며 화면에서 사용자가 상호 작용하는 것을 볼 수 있습니다.
• 구성 요소의 동작을 정의하는 메타데이터입니다.

컴포넌트 메타데이터는 @Component 데코레이터를 사용하여 클래스에 적용됩니다. @Component 데코레이터의 입력 매개변수인 객체의 속성으로 구성 요소의 다양한 동작을 전달할 수 있습니다.

Angular의 명령줄 인터페이스는 명령 창(Mac의 터미널, Windows의 명령 프롬프트/PowerShell 또는 Visual Studio Code의 터미널 창)에서 실행되는 도구입니다.

Angular CLI를 설치하려면 https://nodejs.org/en/download/에서 NodeJS가 설치되어 있는지 확인하세요. 설치가 완료되면 명령 창을 열고 다음을 입력하십시오.

npm 설치 -g @angular/cli

​Angular CLI(명령줄 인터페이스)를 사용하면 애플리케이션의 전부 또는 일부를 생성하는 다양한 명령에서 Angular Schematics를 사용하는 템플릿을 사용할 수 있습니다. Google 팀의 Angular CLI는 Angular 애플리케이션의 구조와 종속성을 생성하는 가장 빠른 방법입니다. 회로도는 코드 생성 프로세스에서 코드를 추가하거나 수정하기 위한 지침과 논리를 포함하는 템플릿 기반 코드 생성기입니다.

​Infragistics의 Ignite UI CLI는 Angular CLI보다 한 단계 더 발전했습니다. Ignite UI CLI는 여전히 Angular Schematics를 사용하는 템플릿을 기반으로 하면서 차트, 데이터 그리드, 심지어 전체 애플리케이션 시나리오와 같은 사용자 인터페이스 구성 요소를 신규 또는 기존 Angular 애플리케이션에 추가할 수 있습니다. 팀이나 비즈니스 요구 사항에 따라 고유한 사용자 정의 템플릿을 만들어 앱 개발을 가속화하고 몇 초 만에 코드를 생성할 수도 있습니다.

To get started with step-by-step instructions using the Angular CLI and the Ignite UI CLI, click here: https://ko.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Angular 지시문은 DOM 요소를 생성하고 Angular 애플리케이션에서 해당 구조나 동작을 변경합니다. Angular 에는 세 가지 유형의 지시문이 있습니다.

1. 구성 요소: 템플릿이 있는 지시문.
2. 속성 지시어: 요소, 구성 요소 또는 기타 지시어의 모양과 동작을 변경합니다.
3. Structural Directives: 요소를 추가하거나 제거하여 DOM 레이아웃을 변경합니다.

Angular 구성 요소와 Angular 지시문의 기본적인 차이점은 구성 요소에는 템플릿이 있는 반면 속성이나 구조적 지시문에는 템플릿이 없다는 것입니다. Angular 우리에게 많은 내장된 구조 및 속성 지시문을 제공했습니다.

• 내장 구조 지시어는 *ngFor 및 *ngIf입니다.
• 속성 지시문은 NgStyle 및 NgModel입니다.

Angular 애플리케이션의 아키텍처에는 Angular 앱을 브라우저에 제공하기 위해 함께 작동하는 많은 부분이 있습니다. 다음은 관련된 아키텍처와 Angular 애플리케이션의 구성 요소에 대한 간략한 개요입니다.

• NgModules: 애플리케이션 도메인, 워크플로 또는 관련 기능 집합 전용 구성 요소 집합에 대한 컴파일 컨텍스트를 선언합니다.
• 구성 요소: 애플리케이션 데이터 및 논리를 포함하고 보기를 정의하는 HTML 템플릿과 함께 작동하는 클래스를 정의합니다.
• 템플릿: HTML 요소가 표시되기 전에 수정할 수 있는 Angular 마크업과 HTML을 결합합니다.
• 지시문: DOM의 요소에 사용자 지정 동작을 연결합니다.
• 양방향 데이터 바인딩: 템플릿의 일부를 구성 요소의 일부와 조정합니다.
• 서비스: 일반적으로 좁고 잘 정의된 목적으로 모듈성과 재사용성을 높이는 데 사용되는 클래스입니다.
• 종속성 주입: 구성 요소에 필요한 서비스를 제공하고 서비스 클래스에 대한 액세스를 제공합니다.
• 라우팅: 다양한 애플리케이션 상태 간의 탐색 경로를 정의하여 애플리케이션 계층을 볼 수 있습니다.

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

Ignite UI for Angular 100개 이상의 데이터 차트, 그리드 및 구성 요소를 포함하여 Angular에서 데이터가 풍부하고 반응성이 뛰어난 웹 앱을 구축하기 위한 UI(사용자 인터페이스) 구성 요소의 완전한 라이브러리입니다.

Infragistics Angular UI 구성 요소 라이브러리에 대한 지속적인 테스트 및 개선을 수행하고 새로운 Angular 구성 요소, 제품 기능 및 향상된 기능을 소개하는 1년에 두 번의 대규모 릴리스를 통해 매달 작은 업데이트를 릴리스합니다. 전 세계 수천 개의 기업에서 사용하는 풍부한 기능의 Angular 구성 요소 라이브러리를 통해 개발자는 그 어느 때보다 빠르게 엔터프라이즈 수준 품질의 Angular 앱을 구축할 수 있습니다.

Angular 구성 요소는 Ignite UI 번들의 일부로 포함되어 있습니다. 단일 개발자 라이선스는 1년 표준 지원 및 업데이트를 포함하여 1년 구독의 경우 미화 1,295달러부터 시작됩니다. 또한 다년 라이센스에 대한 할인도 제공합니다. 가격에 대한 자세한 내용은 가격 페이지를 참조하세요.

시작하는 가장 빠르고 쉬운 방법은 Ignite UI for Angular 설명서 페이지를 방문하여 포괄적인 시작 자료를 따르는 것입니다. 도움말 문서는 개발자가 Angular Schematics 및 Ignite UI CLI를 사용하여 몇 단계만으로 Angular 애플리케이션을 신속하게 부트스트랩하는 데 도움이 되는 단계별 설명을 제공합니다. 데모, 코드 조각 및 기타 유용한 앱 개발 리소스가 추가되었습니다.

예, Ignite UI for Angular 또는 Angular 컨트롤을 사용하는 애플리케이션을 클라이언트에 무제한으로 배포할 수 있습니다. 계획의 유연성을 통해 개발자별로 라이선스를 부여하고 런타임, 로열티 또는 배포 비용을 청구하지 않습니다.

Infragistics 팀은 여기에서 액세스하여 Angular Grid와 같은 간단한 새 Angular 프로젝트가 어떻게 보이는지 확인할 수 있는 포괄적인 Angular 코드 샘플 라이브러리를 유지 관리합니다. 또한 팀 공동 작업 앱, 전자 상거래, 여행 등을 포함한 샘플 애플리케이션 라이브러리가 있습니다. 여기에서 Angular 샘플 앱을 탐색할 수 있습니다.