Angular 15 学習ガイド

Dec 01 2022

新しいバージョンの Angular を使いこなすために知っておくべきすべてのこと

Angular の最新バージョンは 11 月にリリースされました。Minko Gechev は、彼のリリース発表で最も重要な新機能を要約しています。

この記事では、これらの新しい Angular 機能がどのように機能するかを説明するリソースを共有します。

スタンドアロン API

Angular チームは、開発者プレビュー機能として Angular v14 にスタンドアロン API を導入しました。Angular v15 では、これらは開発者プレビューではなくなり、安定した API サーフェスの一部になりました。

コンポーネント、ディレクティブ、およびパイプをスタンドアロンとしてマークできるようになりました: true。スタンドアロンとしてマークされた Angular クラスは、NgModule で宣言する必要はありません。

Angular ドキュメントの「スタンドアロンコンポーネントの概要」ガイドでは、スタンドアロンコンポーネントの作成方法と使用方法について説明しています。

Andrew Scott は、を使用せずにルーターを作成する方法RouterModuleと、機能的なルーターガードの使用方法について説明しています。

スタンドアロンルーターとコンポーネントを使用してバンドルサイズを縮小する方法の詳細については、Kevin Kreuzerの記事を参照してください。

これで、.xml なしで HTTP クライアント API を使用できるようになりましたHttpClientModule。Netanel Basalは、この新しい機能を適用する方法を示し、遅延ロードされたモジュールでインターセプターを定義する方法を示しています。

公式ドキュメントから：

Angular ディレクティブは、再利用可能な動作をカプセル化する優れた方法を提供します。ディレクティブは、属性、CSS クラス、およびイベントリスナーを要素に適用できます。

ディレクティブ構成 API を使用すると、コンポーネント内からコンポーネントのホスト要素にディレクティブを適用できます。

Cédric Exbrayat は、この新しい API が必要な理由を次のように説明しています。

Henrique Custódia が、ディレクティブコンポジション API がどのように機能するかを示す素晴らしい例を示しています。

Angular ドキュメントの「NgOptimizedImage の開始」ガイドでは、新しいNgOptimizedImageスタンドアロンディレクティブが、イメージをロードするためのパフォーマンス最適化のベストプラクティスの採用にどのように役立つかを説明しています。

Fábio Englert Moutinho は、NgOptimizedImage e コマースアプリケーションの例でディレクティブをテストし、Lighthouse スコアを最大 50% 向上させました。

➕ この Angular 15 スタディガイドに追加すべき他のリソースを見たことがありますか? 記事で紹介できるように、私に送ってください！

私の名前はGergely Szerovayです。フロントエンド開発のチャプターリーダーとして働いています。Angular を教える (そして学ぶ) ことは、私の情熱の 1 つです。Angular に関連するコンテンツ (記事、ポッドキャスト、カンファレンストークなど) を毎日利用しています。

すばらしい Angular リソースの月刊コレクションに興味がある場合は、Angular Addicts という私の出版物を購読してください。以前の問題はこちらで読むことができます。

また、最近 Angular 関連の優れた記事、ツイート、またはその他のリソースを見た場合は、こちらのコメント欄でお知らせいただくか、Twitterで DM を送ってください。Angular Addicts の次号で特集するかもしれません!

また、あなたが興味を持っている他の Angular のトピックを教えてください。公開を待っている記事の草稿がここ Medium にたくさんあります。