Angular4-概要

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

Angularの構造は、コンポーネント/サービスアーキテクチャに基づいています。AngularJSは、モデルビューコントローラーに基づいていました。Angular 4 2017年3月にリリースされたのは大きな進歩であり、Angular2に続くAngularチームからの最新リリースです。

Angular4はAngular2とほぼ同じです。Angular2との下位互換性があります。Angular2で開発されたプロジェクトは、Angular4で問題なく動作します。

ここで、Angular4で行われた新機能と変更点を見てみましょう。

なぜAngular4でAngular3ではないのですか？

Angularチームは、モジュールの内部でいくつかのバージョン管理の問題に直面しました。競合のため、Angularの次のバージョンであるAngular4をリリースする必要がありました。

Angular4に追加された新機能を見てみましょう-

ngIf

Angular2は if状態。ただし、Angular4は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 使用 <ng-template> 代わりにタグとして <template>;後者はAngular2で使用されました。Angular4が変更された理由<template> に <ng-template> の名前の競合のためです <template> HTMLでタグ付け <template>標準タグ。今後は完全に非推奨になります。これは、Angular4の主要な変更の1つです。

TypeScript 2.2

Angular 4は、TypeScriptの最新バージョンである2.2に更新されています。これにより、速度が向上し、プロジェクトでの型チェックが向上します。

パイプタイトルケース

Angular 4は、各単語の最初の文字を大文字に変更する新しいパイプタイトルケースを追加しました。

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

上記のコード行は、次の出力を生成します– Angular 4 Titlecase。

Http検索パラメータ

http getapiへの検索パラメーターが簡略化されています。電話する必要はありませんURLSearchParams Angular2で行われていたのと同じです。

小さくて速いアプリ

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