>웹 프론트엔드 >JS 튜토리얼 >Angular 독립형 구성 요소, 신호 등의 새로운 기능!

Angular 독립형 구성 요소, 신호 등의 새로운 기능!

Susan Sarandon
Susan Sarandon원래의
2024-12-01 08:49:10344검색

Angular 19의 새로운 기능은 무엇입니까?

Angular는 계속해서 빠른 발전을 이루고 있습니다(~6개월마다 새로운 주요 버전 출시). 이제 2024년 11월, 개발자 경험과 애플리케이션 성능을 향상시키는 강력한 기능이 포함된 Angular 19가 출시됩니다. 수분 공급 개선부터 신호 강화까지. Angular 19 출시 이벤트의 주요 내용을 살펴보겠습니다.

What

1. 이제 독립형 구성 요소가 기본값입니다

독립형 구성 요소를 처음 만난 것은 Angular 14였으며 이후 릴리스될 때마다 개선되었습니다. Angular 19를 사용하면 이제 모든 구성요소, 지시문 및 파이프가 기본적으로 독립형이므로 명시적으로 독립형: true를 설정할 필요가 없습니다.
또한 업데이트가 원활하게 이루어지며 ng update 명령은 기존 코드베이스를 자동으로 리팩터링하여 원활하고 번거로움 없는 전환을 보장합니다.

What

2. 신호: 향상된 반응성

Angular 16에서 우리는 Angular Signals와 첫 만남을 가졌으며 첫눈에 반했습니다. 그들은 계속해서 Angular의 반응성 시스템을 재구성해 왔습니다. Angular 19에서는 input(), output(), model(), viewChild(), viewChildren(), contentChild, contentChildren(), takeUntilDestroyed(), outputFromObservable()을 포함한 여러 신호 기반 API가 안정적인 상태로 승격되었습니다. 및 출력ToObservable().
또한 Jeremy Elbourne은 두 가지 새로운 실험적 Signal API를 도입했습니다.

A. 링크된 신호

  • 계산된 표현식에 연결된 로컬 상태를 활성화합니다.
  • 초기값을 제공합니다.
  • 수식이 변경되면 자동으로 계산된 값으로 되돌아갑니다.

B. 리소스 API

  • 서버 데이터와 같은 비동기 값 처리를 단순화합니다.
  • Angular의 반응성 시스템과 완벽하게 통합됩니다.
  • 요청 결과와 상태를 모두 신호로 제공합니다.

쉽게 전환하려면 ng g @angular/core:signal-input-migration, ng g @angular/core:signal-queries-migration 및 ng g @angular/core:output-migration과 같은 명령을 사용하여 코드를 자동화하세요. 쉽게 리팩토링. Angular Signals는 정말 개발자 천국에서 만들어진 것 같은 느낌을 줍니다.

What

3. Angular Material: 더 간단한 테마와 새로운 구성요소

Angular Material은 릴리스마다 계속해서 발전하고 있으며 Angular 19도 예외는 아닙니다. 이번 업데이트에서는 두 가지 주요 영역에 걸쳐 향상된 기능이 도입되었습니다.

새로운 테마 API

  • mat.theme API를 사용하여 더 적은 코드 줄로 맞춤 테마를 단순화하세요.
  • 이제 확장된 12색 팔레트를 지원하는 새로운 회로도 도구를 사용하여 사용자 정의 색상 팔레트를 생성하세요.

새로운 구성 요소 및 기능

  • 2D 드래그 앤 드롭: 이제 수평 재정렬을 지원하여 더욱 뛰어난 유연성을 제공합니다.
  • 시간 선택기 구성 요소: 오랫동안 기다려온 추가 기능입니다.
  • 향상된 테마 문서: 초보자에게 친숙한 가이드와 자세한 구성요소별 지침.

What

4. 점진적 수화: 판도를 바꾸는 성능 기능

수화는 전체 애플리케이션 수화, 보기 연기이벤트 재생과 같은 혁신을 통해 지난 몇 버전에 걸쳐 발전한 Angular의 최고의 기능 중 하나입니다. 이러한 기반을 바탕으로 Jessica Janiuk는 Angular 19 점증적 수분공급에서 가장 흥미로운 추가 기능 중 하나를 도입했으며 현재 개발자 미리보기에서 사용할 수 있습니다.

작동 방식

  • 서버는 자리 표시자 대신 실제 콘텐츠를 렌더링합니다.
  • 클라이언트에서 콘텐츠는 트리거될 때까지(예: 상호작용 또는 뷰포트 입력을 통해) 탈수된 상태로 유지됩니다.

혜택

  • 초기 로드 시간이 빨라졌습니다.
  • 더 작은 JavaScript 번들.
  • 보다 원활한 사용자 경험을 위해 레이아웃 변경 및 깜박임을 줄였습니다.

결론

지금은 이게 다입니다! 시간을 내어 내 기사를 읽어주셔서 감사하며, 여러분의 생각과 피드백을 듣고 싶습니다. 제가 계속해서 글을 향상시키는 동안 여러분의 통찰력은 매우 귀중합니다.

저와 연락하실 수 있는 곳은 다음과 같습니다:

  • Bluesky: mohamedlamine.bsky.social
  • X(트위터): @Mohamed_LamineF
  • LinkedIn: mohamedlaminef

위 내용은 Angular 독립형 구성 요소, 신호 등의 새로운 기능!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.