올 뉴 앵귤러 14는 코딩을 더 쉽고 재미있게 만들기 위해 개발자를 위한 새롭고 향상된 기능을 번들링합니다. 아래의 자세한 내용을 알아보십시오.
Angular는 구글의 오픈 소스, 무료 타입스크립트 자바스크립트 프레임워크입니다. Angular 스택의 주요 목적은 단일 페이지 응용 프로그램(SPA)의 개발입니다. 유지 관리하기 쉬운 대형 응용 프로그램을 만드는 데도 가치가 있습니다. 개발자들은 Angular의 표준 구조를 좋아하고, 구글은 원래 프레임워크에 대한 업데이트를 출시하고 있습니다.
최신 릴리스는 Angular 14로, Angular 구성 요소가 작성되는 방식을 변경한 많은 새로운 기능과 업데이트가 있습니다. 2022년 6월 2일에 출시되었습니다. 최신 버전은 모든 소프트웨어 개발 회사가 더 가볍고 빠른 애플리케이션을 구축할 수 있도록 합니다. 이 기사는 애플리케이션 개발 서비스를 제공하는 데 크게 도움이 되는 새로운 기능과 업데이트를 심화시킵니다.
Angular 14의 업데이트된 기능
라우터에 Route.title을 추가해야 하기 때문에 많은 개발자들이 Angular 13에 불만족했습니다. Angular 14는 Typescript 프레임워크가 이제 각 페이지에서 모든 중요한 제목을 자동으로 지정하므로 이러한 필요성을 제거합니다. 새로운 API는 주입 가능한 서비스로 서비스 생성을 단순화합니다.
독립 실행형 구성 요소
NgModules에 종지부를 찍기 위해 독립형 구성 요소가 도입되었습니다. 그러나 모듈은 아직 구식이 아닙니다. 호환성을 보장하기 위해 임시적입니다.
이제 Angular 개발자는 개발 및 테스트를 간소화할 수 있으며 독립형 구성 요소는 개발자 미리보기에서 사용할 수 있습니다. 게시 후 개발자는 개발 및 연구 단계 전반에 걸쳐 사용할 수 있습니다.
독립형 구성 요소는 사용자 지정 가능하며 다양한 앱 기능과 함께 작동할 수 있습니다. 각도 14 이전에는 모든 구성 요소가 모듈과 연결되어 있어야 합니다. 또한 어떤 부모 모듈의 선언이 모든 구성 요소와 적절하게 연결되지 않으면 전체 애플리케이션이 실패합니다.
독립 실행형 구성 요소를 생성하려면 다음 코드를 사용합니다:
import {Component} from ‘@angular/core’;
import {AppComponent} from ‘./app.component’;
@Component({ selector: ‘my-app’, template: <h1>Hello World!</h1>, }) export class AppComponent {}
개발자는 여러 @Component를 생성하여 동일한 파일에 추가할 수도 있습니다.
엄격하게 입력된 양식
엄격하게 입력된 양식 기능을 사용하면 프론트 엔드 응용프로그램을 조금 더 쉽게 만들 수 있습니다. 이 새로운 기능을 통해 개발자는 유형 스크립트를 사용하여 엄격한 형식의 유형을 적용할 수 있습니다. 각 필드는 제출 및 검증하기 전에 해당 유형과 비교하여 엄격하게 검사됩니다. 추가적인 개선 사항은 다음과 같습니다:
반응하는 모습과 느낌
사용자가 양식을 쉽게 작성할 수 있습니다
양식 필드는 제출하기 전에 확인됩니다
폼 유효성 검사 오류가 팝업 없이 화면에 표시됨
이 새 기능을 통합하기 위해 개발자는 기존 응용 프로그램에 대해 자동 마이그레이션 옵션을 사용할 수 있습니다. 새 업데이트는 템플릿 기반 양식에 영향을 미치지 않습니다.
Angular CLL 자동 완성
이 기능은 CLI(Angular Command Line Interface) 명령에 대한 자동 완성을 용이하게 합니다. Intelli J IDEA 플러그인과 TypeScript 정의 파일을 사용합니다. 개발자는 선호도에 따라 TypeScript 또는 ECMAscript를 선택할 수 있습니다.
모든 명령을 입력하는 데 소요되는 시간을 단축하여 생산성을 획기적으로 향상시킵니다. 자동 완성 기능은 처음으로 Angular를 사용하는 새로운 개발자를 도와줍니다. 편집기 창에서 자동 탭 완성은 기본적으로 활성화됩니다.
먼저 개발자들은 ng complete 명령을 실행해야 합니다. 그런 다음 ng를 입력하고 탭을 눌러 모든 옵션을 볼 수 있습니다. 그런 다음 Enter 키를 눌러 옵션 중 하나를 선택합니다.
향상된 개발자 템플릿 진단
이전 버전에 더 익숙한 ng 템플릿 데뷔는 제거됩니다. Angular 14에는 ng-template-error로 알려진 새로운 진단 방법이 있습니다. 런타임 동안 앱이 보내는 오류 메시지와 함께 잘못된 코드를 인쇄합니다.
이 새 진단을 사용하려면 구성 요소에 다음 @Output decorator를 포함하십시오:
import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform browser;
import { MyApp } from ./app; import { AppComponent } from ./app.component;
@NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {}
새로운 진단 기능은 개발자가 컴파일 중 오류를 발견하는 데 도움이 됩니다. 팀은 이미 개발자를 위한 템플릿 디버깅을 지원하기 위해 간결하고 유용한 오류 메시지를 만드는 작업을 진행하고 있습니다.
페이지 제목에 대한 간소화된 액세스
Angular 14는 스타일시트의 <head> 태그 내에서 웹 페이지의 제목 태그를 사용자 지정할 수 있습니다. HTML을 사용하여 추가 컨텍스트를 만들 수 있습니다. <div> 태그의 제목 속성에 액세스할 수 있다고 가정할 필요가 없습니다. <div> 요소에 대한 예외가 적을 것입니다.
Angular 14에서는 간단한 API를 사용하여 페이지 제목에 액세스합니다.
Angular CDK의 최신 프리미티브
Angular CDK에는 빌드 서비스, 구성 요소 및 애플리케이션을 위한 기본 프리미티브가 있습니다. Angular 14에는 다음과 같은 새로운 기능이 있습니다:
Angular Elements – 새로운 HTML 요소는 구성 요소 내부 또는 독립형 <div> 요소로 사용할 수 있습니다. 이러한 요소는 V8의 ShadowDOM API를 기반으로 합니다.
New FormBuilder – 최신 Form Builder를 사용하면 별도의 컨트롤러 없이 간단한 선언 속성과 식을 사용하여 양식을 작성할 수 있습니다.
새 업데이트에는 다음과 같은 새 프리미티브도 포함됩니다:
@Output() decorator
@Injectable() decorator
@Link() decorator
Angular Devtools Firefox 추가 기능
이제 Angular DevTools 디버깅 확장을 Mozilla Firefox 사용자를 위한 추가 기능으로 사용할 수 있습니다. 오프라인 모드를 사용할 수 있습니다.
선택적 인젝터
옵션 인젝터는 임베디드 뷰를 개발하는 데 유용합니다. TemplateRef.createEmbedView 및 ViewContainerRef.createEmbedView를 사용하여 포함할 수 있습니다.
내장 기능 향상
Angular 14 업데이트는 재사용 가능한 구성 요소에 대한 추가적인 제어를 제공합니다. 이를 위해 공개 API 표면이 사용됩니다. 내장된 향상 기능은 템플릿에서 보호되는 구성 요소에 직접 연결됩니다. 개발자가 CLI를 사용하여 작은 코드를 사용하여 가치를 감소시키지 않고 배포할 수 있습니다.
트리 흔들기 오류 메시지
강력한 오류 코드가 Angular 14에 도입되어 고장을 식별하고 수정합니다. 트리를 흔드는 프로덕션 번들은 최신 버전이 처음입니다. 개발자는 실시간 디버깅을 하는 동안 설명서를 참조해야 합니다. 향후 버전에서는 이 새로운 스타일을 사용할 수 있습니다.
강세 연합
Angular 템플릿 진단은 nullish 결합 연산자에 대한 오류를 발생시킬 수 있습니다. 이는 잘못된 또는 nullable 유형을 입력할 수 없을 때 발생할 수 있습니다. 확장된 진단은 ng 빌드 중에 경고를 제공하고 프로세스를 제공합니다. 이 경고 빈도는 tsconfig.json의 오류, 억제 또는 공지 설정을 변경하여 사용자 지정할 수 있습니다.
새 Angular 14 설치 방법
Angular 14를 설치하려면 npm을 다음 플래그와 함께 사용한 다음 새 CLI를 엽니다. Angular 업데이트를 설치하려면 npm install – global @angular/[email protected] 명령을 사용합니다. 이 명령은 개발 기계에 Angular CLI를 글로벌하게 설치하는 데 도움이 됩니다. 여전히 과정에서 어려움을 겪고 있다면 언제든지 친절한 이웃 개발자의 도움을 받을 수 있습니다.
'SW > JavaScript' 카테고리의 다른 글
| 자바스크립트 : URL을 구문 분석하는 방법 (0) | 2023.09.20 |
|---|---|
| React Native : 애플리케이션에 대한 테스트 자동화 (0) | 2023.09.09 |
| Angular Resolver : 개요 (0) | 2023.08.20 |
| 효율적이고 안정적인 웹 애플리케이션 개발을 위한 Angular Best Practice (0) | 2023.07.27 |
| Angular : 워크플로 프로세스에 대한 각도 (0) | 2023.07.10 |