Angular 4の新機能 - hatekatsの日記

メジャーリリースの理由は、新機能と以前のバージョンとの互換性のない変更のためです。

ルータParamMap

バージョン4からは、ルータのParamMapと呼ばれるクエリを実行することができます。これは、ルートに割り当てられたルートパラメータとクエリパラメータのリクエストを意味します。

アニメーション

今までのアニメーションに必要な機能は、@angular/コアモジュールの一部として提供され、アニメーションのないアプリで使用されていなくても、常にアプリケーションに含まれていました。不必要な大きなサイズのバンドルを作成しないように、この関数は独自のパッケージに入れられています。（これは単なる新機能ではなく、アニメーションが含まれている場合に必要な既存のアプリケーションに変更を加える変更です）。

アニメーションは、@ angular / platform-browser / animationsからBrowserAnimationsModuleモジュールで提供されます。

ngIf： "else"と一緒に使うこともできます

テンプレートで「条件付きレンダリング」を使用して、状況に応じて情報を表示することは、かなり頻繁に行われます。これは* ngIfを使用して行います。条件が満たされない場合、対応する要素とすべての子要素はDOMツリーに追加されません。何度も反対のケースが必要であり、同じ条件を別の方法で作成し、別の* ngIfを追加する必要がありました。Angular 4では、このユースケースは、新たに追加されたelseで解決できます。

非同期パイプとやり取りするときに、リアクティブプログラミングの分野の* ngIfの機能が向上しました。新しい* ngIf-Syntaxは、if-clauseの結果にローカルテンプレート変数を追加することを可能にしました。

NgComponentOutletを使用した動的コンポーネント

新しい* ngComponentOutlet-Directiveは、宣言的な方法で動的コンポーネントを構築することを可能にします。

TypeScript 2.1 / 2.2

Angularアプリケーションのタイプセキュリティとngc-Compilerのスピードが向上しました。最新のTypeScriptバージョンの公式サポートのおかげです。

StrictNullChecks

タイプチェックの部分についてはV4では含まれておりません。V4.1で計画されています。

Angularユニバーサル

Angular Universalを使用すると、Angularアプリケーションをブラウザ外にレンダリングすることができます（Webサーバー上など）。これにより、ページコンテンツを最初にレンダリングするためのJavaScriptが不要になり、検索エンジンの最適化が可能になります。

もう1つは、WebWorkerスレッドを使用してコンテンツをGUIスレッド外にレンダリングすることです。このレンダリングされたコンテンツは、後で表示のためにDOMツリーに単純に追加することができます。

新しいパイプ：タイトルケース

新しいタイトルケース - パイプは、各単語の最初の文字を大文字に変更し、他のすべての文字は小文字のままにします。

フォームには自動的に "novalidate"が割り当てられます

今までは、ブラウザによるHTML5検証は抑制され、検証がAngularアプリケーションに与えられた場合、フォームには「novalidate」というマークを付ける必要がありました。開発者は、すべてのフォームを定期的に「novalidate」としてマークしてました。Angular4はこの属性を自動的に設定します。

テンプレートのソースマップ

デバッグやエラーの発見に関しては、ソースマップが非常に重要です。ソースコードと結果の関係を示し、エラーを絞り込むのに役立ちます。新しいTemplate Compilerはテンプレートのためのソースマップを作成します。ブラウザデバッガを使用している場合と、クラッシュレポートとログメッセージの両方で、より多くのコンテキスト情報が利用できます。

フラットESモジュール（フラットESM / FESM）

モジュールに属する多くの小さなファイルの代わりに、モジュールの「フラット」バージョンも提供されます。この場合、フラットとはモジュールごとに1つのファイルのみで、そのモジュールに属するすべてが含まれます。これらのフラットモジュールは、コンパイル時やブラウザでの実行時のパフォーマンス向上に役立ちます。さらに、これはTree Shaking and Buildを改善するので、アプリケーションは小さくなります。

驚異的なスピードを実現する新しいView Engine

テンプレートと@Component Elementsから、AngularはView-Layerを生成します。その際、Just-In-Timeコンパイラ（JIT）とAhead-of-Time Compiler（AoT）があります。JITは主に開発に使用され、本質的にインタプリタです。AoTコンパイラは、テンプレートやコンポーネントからHTMLフラグメントが埋め込まれた実行可能ファイル（JavaScript-）を生成します。Codegenと呼ばれることが多いこのステップでは、イベント処理、変更検出、データバインディング、動的コンポーネント動作の処理が結果に組み込まれます。

この方法で生成されたアプリケーションは非常に高速ですが、最初の起動を遅くするコードがたくさんあります。とにかくそのコードをすべてダウンロードしなければなりません！

Angular-Teamは、パフォーマンスと設計の基準として、他のフレームワーク、たとえばInferno.jsフレームワークを使用して、非常にオープンなアプローチを採用しています。テンプレートレイヤのさまざまな要件、目標、アプローチは、View Engineの広範な設計ドキュメントでも説明しています。

結果として、Angular 4のAoTコンパイルされたテンプレートは大幅に小さくなり、ローディング時間が短縮され、同時にコードサイズの縮小によって全体のページ速度が向上します。平均して60％の削減が見込まれており、特にモバイルアプリケーションでは大幅な改善が見られます。

さらに、ガベージコレクタによって実行される作業量が減少し、パフォーマンスが大幅に向上しました。生成されたコードはgzipのような古典的なツールで詰め込まれるだけではありません。また、Google Closure Compilerを使用してサイズを縮小し、サイズをさらに縮小することもできます。

Angular4の必要な調整

Angular 4で動作させるために既存のプロジェクトに必要な変更を見てみましょう。将来の開発者の移行を容易にするため、Angularチームはhttps://angular-update-guide.firebaseapp.com/というインタラクティブなガイドを提供しています。しかし、このプロジェクトはまだ始まっていないので、使用すべきではありません。

依存関係の更新

Angular-Modulesのバージョンはnpmで更新できます：

npm install @ angle / {共通、コンパイラ、コンパイラ、コア、フォーム、http、プラットフォームブラウザ、プラットフォームブラウザ動的、プラットフォームサーバ、ルータ、アニメーション} @next-save

変更されたライフサイクルイベント

クラスは継承を介してLifecycle Eventsを実装することはできません。代わりにInterfacesを使用する必要があります：

Foo extends OnInitは、

Foo implements OnInitに変更する必要があります。

この変更の影響を受ける開発者は多くはないでしょう。実装するのは簡単です。

テンプレートタグの名前を変更する

これまで、<template>はテンプレートのタグまたは属性として使用されていました。これは廃止されます。それは、<ng-template>に置き換わります。

レンダラーへのアクセス

RendererとRootRendererは今まで使用できましたが、それはもはやできません。RendererFactory2によってアクセスが提供されます。

アニメーションの使用

アニメーションはこれまでAngular Coreの一部でした。Angular 4で分離されているため、アニメーションを使用しているときにインポートを調整する必要があります。

import {Component, OnInit} from '@angular/core';
import {
  animate,
  state,
  style,
  transition,
  trigger } from '@angular/animations'

この例では、Angularアニメーションから「アニメート」、「ステート」、「スタイル」、「トランジション」、「トリガ」をインポートしている間も、Angular Coreは「コンポーネント」と「OnInit」を提供します。

Angular CLIのニュース

Angular CLIは、開発者がAngularプロジェクトを快適に開発、構築、テストするのに役立つコマンドラインツールです。Angular 4と組み合わせて、Angular CLIバージョン1.0.0がリリースされました。これは現在、Angular Projectの中核要素です。

言及するべき機能は、npm以外の代替パッケージマネージャのサポートの追加です。例えば、Facebook Yarnとcnpmをサポートしています。

Yarnの使用は次のように有効にすることができます：

ng set -global packageManager =yarn

AngularCLI

バージョン1.0.0以降のAngular CLIによるAngular 4プロジェクトの標準化された作成と、テンプレートのAoTコンパイル中のエラーメッセージの改善が含まれます。

見通し：Angular 5 and beyond

現在進行中の作業には、ServiceWorkerがAngularでプッシュ通知のようなものを実現するモジュールが含まれます。

現在のスケジュールは、6か月ごとに新しいメジャーリリースにが設定されています。したがってAngular 5は今年10月ごろに準備され、Angular 6は2018年3月にリリースされるはず予定です。必要に応じて、マイナーリリースとバグ修正が行われます。さらにAngularチームは特定の時間間隔でリリースを行うことにしました。

毎週：パッチ/バグ修正リリース
毎月：マイナーリリース
6か月ごと：以前のバージョンからの簡単な移行を重視したメジャーリリース

「非推奨」とマークされた機能は、次のリリースでは削除される予定であることを知っておくことが重要です。ただし、マイグレーションのボトルネックは、古いバージョンでは問題が発生するため、すぐに問題が発生する可能性があります。また、多くの異なるバージョンに移行する際の労力が大幅に増加する結果になります。

Angularチームは、コミュニティから得たフィードバックから、特にエンタープライズ環境で開発ペースが「非常に速い」と考えられていることを学びました。大規模な組織の特別なニーズを満たすために、AngularのLong-Term-Support（LTS）を提供することが検討されており、長期にわたるバグ修正から利益を得ています。

これは、いくつかのプロジェクト管理者の心を安心させるかもしれない。しかし、あるLTSバージョンから次のLTSバージョンへのアップグレードがどのように容易になるかという質問に関しては、まだ興味深いかもしれません。経験から言えば、現状の進歩からの進歩と利益に追いついていくことは、むしろ有益です。さらに、AngularとAngularJSのLTS-Support Periodの正確な長さについてはまだ議論されています。

引用元：

jaxenter.com

MacBook Pro Retinaディスプレイ 2700/13.3 MF839J/A(mf839ja)＜送料無料（北海道沖縄・離島を除く＞

ジャンル: ノートPC
ショップ: AARON　SHOP　楽天市場店
価格: 129,000円