Angular 5.1.0 버전과 Angular CLI 1.6.0 정식 버전이 릴리즈 되었습니다. 그리고 Angular Material과 CDK 도 첫번째 정식버전이 릴리즈 되었습니다.(2017.12.7)

각 릴리즈 내용에 대해서 간단히 정리했습니다.

Image for post
Image for post
angular.io 공식 홈페이지

Angular 5.1.0

animation 과 service-worker 에 대한 버그픽스가 릴리즈 되었습니다.(CHANGELOG)

  • animations: ensure DOM is cleaned up after multiple @trigger leave animations finish
  • service-worker: initialize in browser only
  • service-worker: esm2015 points to wrong path

Angular CLI 1.6.0

Service Worker / Universal / App Shell 지원이 추가되었습니다.

Angular 5.0.0 에서 추가된 Service Worker 를 지원합니다.

ng new <project-name> --service-worker

Angular Sevice Worker의 자세한 내용은 공식문서를 참고하세요.

서버사이드 렌더링을 위한 Angular Universal 명령어가 추가되었습니다.

ng generate universal <name>ng build --app=<name>

generate 실행시 자동으로 package.json, .angular-cli.json, main.ts, app.module.ts 파일에 Universal 을 위한 코드가 업데이트 되며, app.server.module.ts, main.server.ts, tsconfig.server.json 파일이 생성됩니다. …


Image for post
Image for post

Angular 를 학습하면서 정리 목적의 포스팅으로 첫번째 내용은 Pipe 이다.

Pipe의 사용법, 내장 Pipe, 커스텀 Pipe 구현방법에 대해서 정리하였다.

작성 버전

  • Angular 4.0.0
  • Angular CLI 1.0.0

Pipe 란?

Pipe 는 템플릿에서 값의 표시되는 형태를 변환해서 보여주기 위해서 사용한다.

AngularJS 에서는 Filter 라는 이름으로 불렸고, 파이프( | ) 를 사용하는 방법은 동일하다.

예를들어 날짜 데이터(Sun Apr 16 2017 17:35:39 GMT+0900 (KST))를 원하는 포멧(2017.4.16)으로 보여줄 수 있다.

사용법

HTML 마크업 상에서 변환하고자 하는 데이터에 다음과 같은 형태로 사용한다. (다른 Pipe를 연결해서 사용가능하고, 옵션은 콜론(:)을 연결해서 사용)

{{ value | PipeName : customOption1 :  customOption2 }}
{{ value | Pipe1 | Pipe2 }}

예)

<p>오늘은 {{ today | date:“yyyy.MM.dd”}} 입니다.<p> 
// input) today = Sun Apr 16 2017 17:35:39 GMT+0900 (KST)
// output) 오늘은 2017.4.16 …


Image for post
Image for post
Angular.io

시멘틱 버저닝(Semantic Versioning)을 채택한 후 작년말에 v4.0.0-beta.0을 시작으로 beta.8 이후 rc.6까지 업데이트를 거쳐서 Angular v4.0.0 정식 버전이 2017.03.23일에 릴리즈 되었다. (CHANGELOG)

Angular Blog 에 올라온 “Angular 4.0.0 Now Available” 포스팅을 간단히 정리하였다.

참고로 route 버전 이슈로 Angular 3 은 건너 뛰게 되었다.

Smaller & Faster

Angular 4.0.0 은 2.x 버전과 대부분 호환되며 더 작고 빠르게 되었다. 각 컴포넌트의 코드가 약 60% 정도 줄었으며, 프로덕션 번들의 크기가 수백키로바이트 가량 줄었다.

*ngIf, *ngFor 향상

템플릿 바인딩 구문에서 if / else 구문을 사용할 수 있고, 로컬 변수를 할당 할 수 있다.

<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count"
[user]="user">
</user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template> …

About

스키머(schemr)

행복한 프론트엔드 개발자

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store