Angular 4-概要

Angularには3つのメジャーリリースがあります。リリースされた最初のバージョンはAngular1で、AngularJSとも呼ばれます。 Angular1に続いてAngular2があり、Angular1と比較すると多くの変更が加えられています。

Angularの構造は、コンポーネント/サービスアーキテクチャに基づいています。 AngularJSは、モデルビューコントローラーに基づいていました。 2017年3月にリリースされた Angular 4 は大きなブレークスルーとなり、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>

変数totalは、 as キーワードを使用してスライスの出力を保存します。

アニメーションパッケージ

Angular 4のアニメーションは個別のパッケージとして利用でき、@ angular/animationsからインポートする必要があります。 Angular2では、@ angular/core で使用できました。下位互換性の面では、同じままです。

テンプレート

*Angular 4* は、タグとして *<template>;* の代わりに *<ng-template>* を使用します。後者はAngular2で使用されました。 Angular 4が *<template>* を *<ng-template>* に変更した理由は、 *<template>* タグとhtml *<template>* 標準タグの名前の競合のためです。 これは完全に廃止される予定です。 これはAngular 4の主要な変更点の1つです。

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の検索パラメーターが簡素化されました。 Angular2で行われていたのと同じために URLSearchParams を呼び出す必要はありません。

小さくて速いアプリ

Angular 4アプリケーションは、Angular2に比べて小さくて高速です。 TypeScriptバージョン2.2を使用します。これは、最終コンパイルのサイズを小さくする最新バージョンです。

Angular4-overview

目次