Angular 4-개요

Angular에는 세 가지 주요 릴리스가 있습니다. 출시 된 첫 번째 버전은 Angular1이며 AngularJS라고도합니다. Angular1에 이어 Angular2가 뒤따 랐는데, Angular1과 비교할 때 많은 변화가있었습니다.

Angular의 구조는 구성 요소 / 서비스 아키텍처를 기반으로합니다. AngularJS는 모델 뷰 컨트롤러를 기반으로했습니다.Angular 4 2017 년 3 월에 출시 된 것은 주요 돌파구이며 Angular2 이후 Angular 팀의 최신 릴리스입니다.

Angular 4는 Angular 2와 거의 동일합니다. Angular 2와 역 호환성이 있습니다. Angular 2에서 개발 된 프로젝트는 Angular 4에서 문제없이 작동합니다.

이제 Angular 4의 새로운 기능과 변경 사항을 살펴 보겠습니다.

Angular4가 아닌 Angular3이 필요한 이유

Angular 팀은 모듈 내부에서 몇 가지 버전 관리 문제에 직면했으며 충돌로 인해 Angular의 다음 버전 인 Angular4를 출시해야했습니다.

이제 Angular 4에 추가 된 새로운 기능을 살펴 보겠습니다.

ngIf

Angular2는 if질환. 그러나 Angular 4는if else조건도. ng-template을 사용하여 어떻게 작동하는지 살펴 보겠습니다.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

for 루프의 키워드로

의 도움으로 as 키워드는 아래와 같이 값을 저장할 수 있습니다-

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

총 변수는 다음을 사용하여 슬라이스의 출력을 저장합니다. as 예어.

애니메이션 패키지

Angular 4의 애니메이션은 별도의 패키지로 제공되며 @ angular / animations에서 가져와야합니다. Angular2에서는 @angular/core. 이전 버전과의 호환성 측면에서 여전히 동일하게 유지됩니다.

주형

Angular 4 용도 <ng-template> 대신 태그로 <template>;후자는 Angular2에서 사용되었습니다. Angular 4가 변경된 이유<template> ...에 <ng-template> 의 이름 충돌 때문입니다 <template> html 태그 <template>표준 태그. 앞으로 완전히 중단됩니다. 이것은 Angular 4의 주요 변경 사항 중 하나입니다.

TypeScript 2.2

Angular 4는 최신 버전의 TypeScript 인 2.2로 업데이트되었습니다. 이것은 속도를 향상시키고 프로젝트에서 더 나은 유형 검사를 제공합니다.

파이프 제목 케이스

Angular 4는 각 단어의 첫 글자를 대문자로 바꾸는 새로운 파이프 제목 케이스를 추가했습니다.

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

위의 코드 줄은 다음 출력을 생성합니다. Angular 4 Titlecase.

HTTP 검색 매개 변수

http get api에 대한 검색 매개 변수가 단순화되었습니다. 우리는 전화 할 필요가 없습니다URLSearchParams Angular2에서 수행 된 것과 동일합니다.

더 작고 빠른 앱

Angular 4 응용 프로그램은 Angular2와 비교할 때 더 작고 빠릅니다. 최종 컴파일 크기를 작게 만드는 최신 버전 인 TypeScript 버전 2.2를 사용합니다.