
Angular 7: 새로운 기능 업그레이드 및 요약
2022-06-01 last update
6 minutes reading AngularAngular 7이 방금 발표되었습니다. 비록 새로운 기능이 있는 것 같지만, 매우 재미있는 새로운 도구 변경과 성능을 개선하는 위대한 기능이 있습니다.또한 이전 버전의 최신 추세를 이어가며 업그레이드가 수월하다(실제로 그 어느 때보다 빠르다).
아래 목록은 이 버전의 새로운 기능에 대한 간략한 요약일 뿐이지만, 이 부분을 찾았는지 확인하고 이 버전이 제공하는 더 많은 기능을 확인하십시오!
Angular 팀은 개발자가 사용할 수 있는 도구를 개선하기 위해 노력해 왔으며, 새로운 CLI 알림도 예외가 아니다.일반적으로
새 CLI에는 적용되지 않습니다.이제 CLI 응답 프롬프트가 표시됩니다.해봐
많은 이동 프레임워크가 동적 데이터 (예를 들어 이미지나 긴 목록) 를 불러오는 방향으로 발전하기 시작하면서 Angular도 가상 스크롤을 허용하기 위해
이제 Angular Material 모듈에 완전히 유지되고 목록 재정렬과 목록 간 항목 전송을 포함한 드래그 앤 드롭 지원이 가능합니다.CDK는 자동 렌더링, 드래그 프로세서, 드래그 프로세서, 심지어 데이터를 전송하는 능력을 포함한다.표준 드래그 애니메이션을 좋아하지 않습니까?손을 들어 수고하다그것은 각도가 있다.이것은 너의 결정이다.
각 재료 자체에 대해서는 version 7 새로운 재료 설계 사양에 따라 업데이트된 어셈블리 스타일이 있습니다.
우선: Angular 7은 이전 버전보다 빠릅니다.업그레이드 속도가 더 빠릅니다(공식 공지에 따르면 많은 응용 프로그램의 업그레이드 시간이 10분도 안 됨). 프레임워크 속도가 더 빠릅니다. 위에서 설명한 가상 스크롤 CDK 모듈은 응용 프로그램을 더욱 좋은 성능으로 실행할 수 있도록 합니다.
이것이 바로 흥미로운 점입니다. Angular는 프레임워크를 최대한 작게 만드는 데 주력할 뿐만 아니라 응용 프로그램을 최대한 작게 만드는 데도 주력합니다!그들은 생산에 반사원 데이터polyfill이 포함된 흔한 생산 오류를 수정했다.V7은 자동으로 제거됩니다.
새 프로젝트도 기본적으로 예산 패키지를 사용합니다. 프로그램이 크기 제한에 도달하면 예산 패키지가 알려 줍니다.기본적으로 2MB에 도달하면 경고가 표시되고 5MB에 도달하면 오류가 발생합니다.더 많은 공간이 필요할 때, 당신의 각도에서 점프하기만 하면 된다.json은 필요에 따라 조정합니다.
Angular는 Typescript 3.1, RxJS는 6.3에 달했고 노드 10 지원도 추가되었습니다!의 릴리즈 노트 (의 다음 링크) 를 참조하십시오.
차세대 Ready when-ready 렌더... 아직 완전히 준비되지 않았습니다.Angular 팀은 최종 일정을 약속하지 않지만 개발은 진행 중입니다.이들은 향후 호환성 검증이 시작되고 있음을 알아차렸다. 비록 공식 팀원들이 논평을 하지 않았지만, 일부 충실한 추종자들은 V7의 생명주기 내에 완전한 테스트 버전을 내놓기를 희망하며, 버전 8과 동시에 정식 버전을 발표할 수도 있다.공식 차원에서 환매 협의를 통해 GitHubIvy Renderer의 발행 진도를 추적한다.가장 좋은 소식은 무엇입니까?그들은 Ivy가 충분한 테스트와 검증을 거치기만 하면 작은 버전에서 발표될 수 있기를 전적으로 바란다.그럼 누가 알아요?아마도 우리는 최종적으로 v7에서 그것을 볼 것이다.
대부분의 Angular 응용 프로그램의 경우 Angular 6 및 RxJS 6에서 이미 실행되었다고 가정하면 명령 하나만 실행하면 됩니다.
다음 Angular 7 리소스를 더 확인하십시오. 각도 7official announcement. Angular 7 CLIdocumentation. 소개Schematics. Virtual Scrolling과Drag and Drop에 대한 더 많은 정보를 읽으십시오. 각도 업데이트Guide. 유형 스크립트 3.1version notes. RxJS 6.3CHANGELOG. 노드 10support.
새로운 기능 (&N)
아래 목록은 이 버전의 새로운 기능에 대한 간략한 요약일 뿐이지만, 이 부분을 찾았는지 확인하고 이 버전이 제공하는 더 많은 기능을 확인하십시오!
CLI 팁
Angular 팀은 개발자가 사용할 수 있는 도구를 개선하기 위해 노력해 왔으며, 새로운 CLI 알림도 예외가 아니다.일반적으로
ng new
또는 ng add
같은 명령을 실행할 때 이것은 하나의 과정입니다.라우팅을 포함하지 않았습니까?아, 돌파하기 힘들어.설치를 건너뛰시겠습니까?응, 나는 네가 명령을 중지할 수 있다고 생각한다.새 CLI에는 적용되지 않습니다.이제 CLI 응답 프롬프트가 표시됩니다.해봐
ng new myangular7app
, 당신은 무엇을 얻을 수 있습니까?경로를 추가할지 묻는 새로운 알림입니다.다른 스타일시트 형식을 시도하시겠습니까?걱정 마.CLI를 사용하면 CSS
, SCSS
, SASS
및 그 이상(또는 실제로는 LESS
HA!) 중에서 선택할 수 있습니다.좋은 소식은 맞춤형 제작이 가능하다는 것이다!다이어그램을 추가합니다.json은 Schematic CLI를 사용합니다. Angular CLI에서 실행하라는 명령을 알려줄 수 있습니다!이 절에서 설명도에 대한 더 많은 정보를 알 수 있습니다.각재료 CDK
스크롤 모듈
많은 이동 프레임워크가 동적 데이터 (예를 들어 이미지나 긴 목록) 를 불러오는 방향으로 발전하기 시작하면서 Angular도 가상 스크롤을 허용하기 위해
ScrollingModule
를 추가했다.요소가 표시되거나 보이지 않을 때 DOM에서 로드되고 제거됩니다.사용자가 보기에 성능이 크게 향상되었다.다음에 사용자가 스크롤할 수 있는 잠재적인 큰 항목 목록이 있을 때 cdk-virtual-scroll-viewport
구성 요소에 붙여넣고 성능을 향상시키십시오!Dragdrop 모듈
이제 Angular Material 모듈에 완전히 유지되고 목록 재정렬과 목록 간 항목 전송을 포함한 드래그 앤 드롭 지원이 가능합니다.CDK는 자동 렌더링, 드래그 프로세서, 드래그 프로세서, 심지어 데이터를 전송하는 능력을 포함한다.표준 드래그 애니메이션을 좋아하지 않습니까?손을 들어 수고하다그것은 각도가 있다.이것은 너의 결정이다.
각 재료 자체에 대해서는 version 7 새로운 재료 설계 사양에 따라 업데이트된 어셈블리 스타일이 있습니다.
애플리케이션 성능
우선: Angular 7은 이전 버전보다 빠릅니다.업그레이드 속도가 더 빠릅니다(공식 공지에 따르면 많은 응용 프로그램의 업그레이드 시간이 10분도 안 됨). 프레임워크 속도가 더 빠릅니다. 위에서 설명한 가상 스크롤 CDK 모듈은 응용 프로그램을 더욱 좋은 성능으로 실행할 수 있도록 합니다.
이것이 바로 흥미로운 점입니다. Angular는 프레임워크를 최대한 작게 만드는 데 주력할 뿐만 아니라 응용 프로그램을 최대한 작게 만드는 데도 주력합니다!그들은 생산에 반사원 데이터polyfill이 포함된 흔한 생산 오류를 수정했다.V7은 자동으로 제거됩니다.
새 프로젝트도 기본적으로 예산 패키지를 사용합니다. 프로그램이 크기 제한에 도달하면 예산 패키지가 알려 줍니다.기본적으로 2MB에 도달하면 경고가 표시되고 5MB에 도달하면 오류가 발생합니다.더 많은 공간이 필요할 때, 당신의 각도에서 점프하기만 하면 된다.json은 필요에 따라 조정합니다.
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
업데이트된 의존 항목
Angular는 Typescript 3.1, RxJS는 6.3에 달했고 노드 10 지원도 추가되었습니다!의 릴리즈 노트 (의 다음 링크) 를 참조하십시오.
아이비리그 렌더링
차세대 Ready when-ready 렌더... 아직 완전히 준비되지 않았습니다.Angular 팀은 최종 일정을 약속하지 않지만 개발은 진행 중입니다.이들은 향후 호환성 검증이 시작되고 있음을 알아차렸다. 비록 공식 팀원들이 논평을 하지 않았지만, 일부 충실한 추종자들은 V7의 생명주기 내에 완전한 테스트 버전을 내놓기를 희망하며, 버전 8과 동시에 정식 버전을 발표할 수도 있다.공식 차원에서 환매 협의를 통해 GitHubIvy Renderer의 발행 진도를 추적한다.가장 좋은 소식은 무엇입니까?그들은 Ivy가 충분한 테스트와 검증을 거치기만 하면 작은 버전에서 발표될 수 있기를 전적으로 바란다.그럼 누가 알아요?아마도 우리는 최종적으로 v7에서 그것을 볼 것이다.
업그레이드 중
이게 더 쉬울 수 있을까요?
대부분의 Angular 응용 프로그램의 경우 Angular 6 및 RxJS 6에서 이미 실행되었다고 가정하면 명령 하나만 실행하면 됩니다.
$ ng update @angular/cli @angular/core
사용 중인 경우Angular Material 다음 명령만 수행하십시오.$ ng update @angular/material
문제가 발생하면 액세스 Update Guide 를 확인하여 특수 명령이 필요한지 확인하십시오.한층 더 읽다
다음 Angular 7 리소스를 더 확인하십시오.