집 >웹 프론트엔드 >JS 튜토리얼 >Angular5.1의 새로운 기능에 대한 자세한 해석

Angular5.1의 새로운 기능에 대한 자세한 해석

亚连원래의: 2018-06-19 14:39:241639검색

이 글은 주로 Angular5.1의 새로운 기능과 관련 사용법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

이 기사에서는 Angular 5.1의 새로운 기능을 소개하여 Angular 5.1의 개선 사항과 추가 사항을 자세히 설명합니다. 전체 내용은 다음과 같습니다.

새로운 기능

Angular Material 및 CDK 안정 버전

지원 CLI Service Worker

CLI에서 Universal 및 AppShell에 대한 지원 개선

데코레이터에 대한 오류 메시지 개선

TypeScript 2.5 지원

전체 기능 목록 및 버그 수정은 Angular, Material을 참조하세요. 및 CLI 변경 로그.

Angular Material 및 CDK Stable

11개의 알파 버전, 12개의 베타 버전, 3개의 릴리스 후보를 출시한 후 이제 Angular Material 및 Angular CDK 5.0.0을 Stable로 표시하게 되어 기쁩니다. Google의 Material Design 시각적 디자인 언어를 기반으로 하는 Angular Material은 Angular 애플리케이션을 위한 30개의 UI 구성 요소를 제공합니다. Angular CDK와 결합된 Angular CDK(구성 요소 개발 키트)는 일반적인 문제를 다시 해결할 필요 없이 사용자 정의 구성 요소를 구축하는 데 도움이 되는 빌딩 블록 세트를 제공합니다. 이러한 구성요소는 이미 Google Analytics 제품군, Google Cloud Platform 개발자 콘솔, Google Shopping Express를 비롯한 많은 Google 애플리케이션의 프로덕션에서 사용되고 있습니다.

이 버전부터 Angular Material은 Angular와 동일한 의미 철학을 따르게 되며, Angular Material의 메인 버전과 Angular CDK가 다른 플랫폼의 메인 버전으로 동시에 출시됩니다. 버그 수정 릴리스는 매주 반복적으로 이루어지며, 기능이 완료되면 마이너 릴리스가 릴리스됩니다.

문서, 데모 및 시작 가이드를 보려면 matrial.angular.io를 방문하세요. 프레임워크에 더 많은 클래스를 계속 추가하는 동안 Github에서 진행 상황을 확인할 수도 있습니다. 앞으로 몇 달 동안 새로운 매트 트리, 가상 스크롤, 구성 요소 테스트 모음, 드래그 앤 드롭 기능 등을 주목하세요.

CLI1.6에 대한 Service Worker 지원

성능은 웹 개발자에게 항상 중요한 목표였으며, 오늘날의 LAN WIFI 및 모바일 네트워크 이벤트에서도 성능은 항상 중요한 목표였습니다. 최신 브라우저에는 안정적이고 빠르게 로드되는 사이트를 구축하기 위한 Service Worker API라는 새로운 API가 있습니다.

Angular 5.0.0에는 Angular 애플리케이션에 맞게 사용자 정의된 새로운 Service Worker 구현이 포함되어 있으며 Angular CLI 1.6에는 이 새로운 기능을 활용하는 애플리케이션 구축에 대한 지원이 포함되어 있습니다. @angular/service-worker를 사용하면 이 API를 지원하는 브라우저에서 애플리케이션의 로딩 성능을 향상시키고 애플리케이션의 로딩 경험을 네이티브 앱과 더욱 유사하게 만들 수 있습니다.

CLI1.6 향상된 Universal 및 App Shell 지원

또한 Angular CLI1.6 출시와 함께 Schematics를 통해 기존 프로젝트에 Universal을 추가하고 App Shell에 대한 지원을 제공하는 것이 더 좋습니다.

Angular Universal

현재 CLI 프로젝트에 Universal을 추가하려면 프로젝트 디렉터리에서 다음 명령을 사용할 수 있습니다.

npm generate universal <name>

8a11bc632ea32a57b3e3693c7987c420을 애플리케이션에 지정하려는 이름으로 바꿉니다. 그러면 채택된 애플리케이션을 가져와서 공통 모듈을 생성하고 자동으로 angle-cli.json 파일을 구성합니다. 그런 다음 Universal 사용 가이드의 4단계로 건너뛸 수 있습니다.

범용 앱을 구축하려면 다음 명령을 실행하세요.

ng build --app=<name>

App Shell

추가로 추가된 기능은 App Shell 지원입니다. 이제 Universal을 사용하여 index.html 페이지에서 애플리케이션에 대한 정적 첫 번째 렌더링을 빌드하는 애플리케이션 셸을 생성하고 빌드할 수 있습니다. 이는 애플리케이션이 시작될 때 사용자에게 더 나은 경험을 제공합니다.

먼저 애플리케이션의 NgModule에 가져온 RouterModule 모듈이 있고 애플리케이션 구성 요소의 모듈에 b06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2이 있는지 확인하세요. App Shell은 라우팅을 사용하여 앱을 렌더링합니다.

다음 명령을 실행하세요.

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

app-shell 매개변수를 전달하여 각도-cli.json 파일에 기본 애플리케이션의 모든 셸에 대한 지원을 추가하세요. Universal 응용 프로그램이 통과하지 못한 경우 Universal Schematic을 처음 실행할 때 Universal 응용 프로그램이 생성됩니다. 라우팅 매개변수는 애플리케이션 빌드 중에 생성된 라우팅 구성을 지정합니다. (앱 셸에는 라우팅 지원이 필요합니다). 기본값은 /shell입니다.

이 단계를 완료한 후 ng build를 사용하여 애플리케이션을 정상적으로 빌드하면 index.html 파일에 자동으로 렌더링된 경로가 포함됩니다.

데코레이터 오류 메시지 개선

컴파일러에서 생성된 진단이 크게 개선되었습니다. 특히 데코레이터에 지원되지 않거나 잘못된 표현식이 포함된 경우 더욱 그렇습니다.

예: 템플릿을 처리하기 위한 함수 호출은 지원되지 않습니다.

@Component({
 template: genTemplate()
})

이전에 발생했던 오류는 다음과 같습니다.

Error encountered resolving symbol values statically. Calling function ‘genTemplate&#39;, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts

이 버그는 개선되었으며 문제의 원인과 성격이 명확해졌습니다.

component.ts(9,16): Error during template compile of &#39;MyComponent&#39;.
 Function calls are not supported in decorators but &#39;genTemplate&#39; was called.

TypeScript 2.5 지원

모든 개발자가 권장하는 TypeScript 2.5에 대한 지원을 추가했습니다. 이 버전의 TypeScript에는 몇 가지 유용한 고급 기능이 포함되어 있습니다.

yarn add typescript@'~2.5.3' 또는 npm install typescript@'~2.5.3'을 통해 Typescript를 업그레이드할 수 있습니다.

이 업데이트는 선택 사항입니다. TypeScript 2.4는 Angular 5.X를 계속 지원합니다. 아직 TypeScript 2.6을 지원하지 않습니다. 우리의 계획은 향후 마이너 릴리스에 지원을 추가하는 것입니다.

a7d71c5568cd0c774b4c2d188d23325c중요 사항:a76bcb5cf2f22c4f8daeb0ab5ac42844코드가 injector.get(Token)을 사용하고 Token에 정적 멤버가 있는 경우 TypeScript 문제가 발생하고 반환된 유형은 Token 대신 {}입니다. Injector.get42e4dd2825ec91a3f52b146cc8a24e44(Token)을 사용하여 원하는 반환 값을 얻을 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Angular5.1의 새로운 기능에 대한 자세한 해석

관련 기사