Angular v17が正式リリースされました！

情報 2023-12-25 17:05:40 訪問数: null

原文: Angular v17 の紹介

先月、Angular の赤い盾の 13 周年を迎えました。AngularJS (AngularJS は 1.x バージョンの Angular ではないことに注意してください) は、リッチな Web エクスペリエンスに対する需要の高まりをサポートするために設計された JavaScript フレームワークの新しい波の出発点です。本日、新しい外観と一連の将来を見据えた機能を備えた v17 で、パフォーマンスと開発エクスペリエンスの新しい基盤を築き、未来へお連れします。

v17 では、以下を導入できることをうれしく思います。

  • 遅延可能なビュー 遅延可能なビューは、パフォーマンスと開発エクスペリエンスを次のレベルに引き上げ、開発プレビューから正式に安定しています
  • 公開ベンチマークでは、制御フローにループを組み込むことで実行時間が 90% 改善されました
  • ビルドはハイブリッド レンダリングで 87% 高速になり、クライアント側レンダリングで 67% 高速になります。
  • 新しい外観は Angular の未来志向の機能を表しています
  • オンライン プレイグラウンドを含む、簡単なものから詳細なものまで、まったく新しいインタラクティブな学習チュートリアル
  • 他にも多くの機能と改良点があります。

将来性のあるアイデンティティ

Angular ルネッサンスは、ここ数回のリリースで本格化しています。私たちは、信号ベースの反応性、水和、独立したコンポーネント、組み合わせた命令、その他多くの機能などの改善により勢いを築いてきました。Angular は急速に成長しましたが、そのブランドはそれに追いついていません。それは AngularJS の初期の頃からほとんど変わっていません。


今日、何百万人もの開発者によって愛されテストされてきたフレームワークが、将来を見据えた開発経験とパフォーマンスを反映する新しい外観になりました。

将来のためのドキュメント

新しいブランドに加えて、Angular ドキュメントの新しいホームである angular.dev も開発しました。新しいドキュメント サイトでは、新しい構造、新しいガイダンス、改善されたコンテンツを採用し、ブラウザーで自分のペースで Angular と Angular CLI を学習できるインタラクティブな学習体験プラットフォームを構築しました。


新しいインタラクティブな学習エクスペリエンスはWebContainersによって強化されており、最新の Web ブラウザーで Angular CLI の機能を使用できるようになります。  

 

本日、angular.dev のベータ プレビューを開始し、v18 ではこれを Angular のデフォルト Web サイトにする予定です。Angular の新しい外観と angular.dev について詳しくは、Angular.dev It's Coming (原文Announcing angular.dev ) をご覧ください。 


それでは、v17 の機能について詳しく見ていきましょう。お見せするのが待ちきれません!

組み込みの制御フロー

開発エクスペリエンスを向上させるために、シンプルな宣言型 API を通じて強力な機能を提供する新しいブロック テンプレート構文をリリースしました。内部では、Angular コンパイラーが構文を、制御フローや遅延読み込みなどを実行できる効率的な JavaScript 命令に変換します。

新しいブロック構文を使用して、最適化された組み込み制御フローを実装します。ユーザー調査を実施した結果、多くの開発者が と の使用でいくつかの困難を経験していることがわかりました。2016 年から Angular を使用し、過去 5 年間 Angular チームの一員として活動してきましたが、個人的にはと を見つけるための構文が依然として必要です。コミュニティやパートナーからのフィードバックを収集し、ユーザー エクスペリエンス調査を実施した後、Angular 用の新しい組み込み制御フローを開発しました。 *ngIf  *ngSwitch  *ngFor  *ngFor  trackBy 

組み込みの制御フローでは次のことが可能です。

  • より快適な構文、JavaScript に近いため、より直感的で、ドキュメントの検索が少なくて済みます。
  • 最適化された型の絞り込みによる型チェックの向上
  • これは主にビルド​​時に存在する概念で、ランタイム フットプリントを削減 (「消滅」させる) できるため、バンドル サイズが最大 30 KB 削減され、Core Web Vital スコアがさらに向上します。
  • 追加のインポートを行わなくても、テンプレートで自動的に利用可能になります。これまでは、構造ディレクティブを使用するには、共通モジュールに NgIf、NgFor などをインポートする必要がありました。
  • 大幅なパフォーマンスの向上は後で導入されます

条件文

*ngIf以下との比較を見てみましょう。

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

組み込みの if ステートメントを使用すると、この条件は次のようになります。

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

テンプレートのコンテンツを直接入力できるため、古い代替手段の else 句と比較して大幅に簡素化されています。現在の制御フローでは、過去の構造命令では不可能であったことも可能になります。 *ngIf @else @else if 

*ngSwitch 改善効果はより明らかです。

<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

組み込みの制御フローでは、次のようになります。

@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

新しい制御フローにより、個々のブランチでの型の絞り込みが可能になります。これは、構造命令では不可能です。 @switch  *ngSwitch 

組み込みの for ループ

私のお気に入りのアップデートの 1 つは、導入した組み込みの for ループです。これにより、開発エクスペリエンスが向上するだけでなく、Angular のレンダリング速度が別のレベルに押し上げられます。

その基本的な構文は次のとおりです。

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

*ngFor機能の不足によるアプリケーションのパフォーマンスの問題がよく見られますtrackBy。いくつかの違いは、パフォーマンスを迅速に比較するためにトラックが必須であることです。さらに、コンポーネント クラスのメソッドではなく単なる式であるため、使いやすくなります。組み込みループには、オプションのブロックを介したゼロ項目コレクションのショートカットもあります。 @for@for @empty 

@for ステートメントは新しい比較アルゴリズムを使用し、 と比較してより最適化された実装を備えているため、コミュニティ フレームワーク ベンチマークでの実行時間が 90% 向上しました。 *ngFor 

試してみる！

組み込みの制御フローが v17 開発者プレビューで利用できるようになりました。

組み込み制御フローの設計目標の 1 つは、完全に自動化された移行を可能にすることです。既存のプロジェクトで試してみるには、次の Schematics ワンクリック移行を使用します。

ng generate @angular/core:control-flow

次は何ですか？

最新の言語サービスで組み込みの制御フローをすでに使用できます。当社は JetBrains と緊密に連携して、製品のサポートを強化しています。また、Angular テンプレートが正しくフォーマットされていることを確認するために、Prettier の鈴木宗介氏にも連絡しました。  

*ngIf組み込みの制御フローがコンテンツ プロジェクションを処理する方法には、まだいくつかの違いがあり、今後数か月かけてこれらを解決するために懸命に取り組んでいきます*ngFor。*ngSwitchさらに、組み込み制御フローの実装と安定性にも自信を持っているので、今すぐお試しいただけます。開発エクスペリエンスをさらに強化する機会が見つかった場合に備えて、潜在的な下位非互換性の修正に取り組むことができるように、次のメジャー リリースまでこれを開発者プレビューのままにしておきたいと考えています。

遅延可能なビュー

それでは、遅延読み込みの将来について話しましょう。新しいブロック構文を使用して、アプリケーションを高速化するために使用できる新しい強力なメカニズムを開発しました。ブログ記事の冒頭で、遅延ビューは、前例のない快適さで宣言的で強力な遅延読み込みを可能にするため、パフォーマンスと開発エクスペリエンスを次のレベルに引き上げると述べました。

ブログがあり、ユーザーのコメントのリストを遅延読み込みしたいとします。現在、クリーンアップの使用と管理、読み込みエラーの管理、プレースホルダーの表示、および多くの複雑な問題に対処する必要があります。さまざまなエッジケースを処理すると、テストとデバッグが困難な複雑なコードが生成される可能性があります。 ViewContainerRef 

新しい遅延可能なビューを使用すると、1 行の宣言コードでコメントのリストとそのすべての依存関係を遅延ロードできます。

@defer {
  <comment-list />
}

最も驚くべき点は、これがすべてコンパイル時の変換によって行われることです。Angular は、ブロック内で使用されるコンポーネント、ディレクティブ、パイプを見つけ、動的インポートを生成し、読み込みプロセスを管理することによって、すべての複雑さと状態間の遷移を抽象化します。スイッチ。 @defer 

IntersectionObserver DOM 要素がビューポートに入ったときに遅延ロードされたコンポーネントを開始するには、さらに重要なロジックとAPI が関係します。Angular を使用すると、遅延可能なビュー トリガーを追加するだけで簡単に使用できます。 IntersectionObservers

@defer (on viewport) {
  <comment-list />
} @placeholder {
  <!-- A placeholder content to show until the comments load -->
  <img src="comments-placeholder.png">
}

上記の例では、Angular は最初にプレースホルダー ブロックのコンテンツをレンダリングします。コンポーネントは、ビューポートに表示されるとロードを開始します。ロードされると、Angular はプレースホルダーを削除し、コンポーネントをレンダリングします。 <comment-list/> 

ロードおよびエラーステータス用のブロックもあります。

@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}

それでおしまい！Angular は、多くの複雑なロジックを管理します。

遅延可能なビューは追加のトリガーを提供します。

  • on idle - ブラウザが重い作業を行っていないときにブロックの読み込みを遅らせる
  • on immediate — ブラウザをブロックせずに遅延読み込みを自動的に開始します
  • on timer(<time>) — タイマーを使用した遅延読み込み
  • on viewport および- ビューポートでは、アンカー要素への参照を指定することもできます。Angular はコンポーネントを遅延ロードし、アンカー要素が表示されているときにレンダリングします。 on viewport(<ref>) 
  • on interaction そして- ユーザーが特定の要素を操作するときに遅延読み込みを開始できるようにします on interaction(<ref>) 
  • on hover そして- ユーザーが要素の上にマウスを置いたときに遅延読み込みをトリガーします on hover(<ref>) 
  • when <expr> — Promise を返す式を介して独自の条件を指定できます。

遅延可能なビューでは、依存関係をレンダリングする前にプリフェッチする機能も提供されます。プリフェッチの追加は、defer ブロックにステートメントを追加するのと同じくらい簡単で、すべて同じトリガーがサポートされています。 prefetch 

@defer (on viewport; prefetch on idle) {
  <comment-list />
}

本日、v17 の開発者プレビューで遅延ビューが利用可能になりました。この機能の詳細については、このガイドを参照してください。

次は何ですか？

Deferrable View はすぐに使用できるので、ぜひ試してみることを強くお勧めします。これらを開発者プレビューのままにする理由は、フレームワークの他の部分と同様に、セマンティック バージョニングに従ってそれらをロックするまで、より多くのフィードバックを収集し、API に変更を導入できるようにするためです。

現在、サーバー側レンダリングでは、指定されたプレースホルダーがレンダリングされます。フレームワークがアプリケーションをロードしてハイドレートすると、遅延可能なビューは上で説明したように機能します。

次に、サーバー上の遅延ブロック内のコンテンツをレンダリングし、クライアントで部分的なハイドレーションを有効にする方法を検討します。この場合、クライアントは、トリガーが要求するまで据え置きビューのコードをダウンロードしません。この時点で、Angular は関連する JavaScript をダウンロードし、ビューのこの部分のみをハイドレートします。

また、多くのエキサイティングな信号の相互運用性も予定されていますので、ご期待ください。

ハイブリッド レンダリング エクスペリエンスの向上

本日、次のng newヒントを提供することで、サーバーサイド レンダリング (SSR) と静的サイト生成 (SSG またはプリレンダリング) を開発者に近づけます。

これは私たちが長い間望んでいた変更ですが、まずは Angular SSR の開発エクスペリエンスに自信を持ってもらいたかったのです。

それ以外の場合は、次の方法で新しいプロジェクトで SSR を有効にすることができます。

ng new my-app --ssr

ハイドレーションは開発者プレビューから正式に安定しました

過去 6 か月間、私たちはハイドレーションを使用する何千ものアプリケーションを見てきました。本日、ハイドレーションが開発者プレビューではなくなり、サーバーサイド レンダリングを使用するすべての新しいアプリでデフォルトで有効になったことを発表できることを嬉しく思います。

新しい @angular/ssr パッケージ

私たちは Angular Universal リポジトリを Angular CLI リポジトリに移動し、サーバー側のレンダリングをツールのさらに重要な部分にします。

今日から、既存のアプリケーションにハイブリッド レンダリング サポートを追加するには、次のコマンドを実行するだけです。

ng add @angular/ssr

このコマンドはサービス エントリ ポイントを生成し、SSR および SSG ビルド機能を追加し、デフォルトでハイドレーションを有効にします。現在メンテナンス モードにあるものと同等の機能を提供します。Express-engine を使用している場合、Angular CLI はコードを自動的に に更新します。 @angular/ssr  @nguniversal/express-engine @angular/ssr 

Virgin Media O2 の売上は、古いプラットフォームから最新の Angular ハイブリッド レンダリング ソリューションに移行した後、112% 増加しました。DOM Hydration を備えた Angular SSR と組み合わせて使用​​することで、累積レイアウト オフセットが平均 99.4% 削減されました。 NgOptimizedImage 

SSR を使用してアプリケーションをデプロイする

開発エクスペリエンスをさらに向上させるために、私たちはクラウド プロバイダーと緊密に連携して、プラットフォームへのスムーズな導入を可能にします。

Firebase は、ほぼゼロの構成で Angular アプリを自動的に認識してデプロイし、新しいフレームワーク対応 CLI の早期プレビューを提供するようになりました。

firebase experiments:enable webframeworks
firebase init hosting
firebase deploy

フレームワーク対応の CLI は、SSR、i18n、イメージ最適化などの使用を認識し、コスト効率の高いサーバーレス インフラストラクチャ上で高性能の Web アプリケーションを配信できるようにします。

複雑な Angular モノリポジトリを使用している場合、または単にネイティブ ツールを好む場合、AngularFire では以下を使用して Firebase にデプロイできます。 ng deploy 

ng add @angular/fire
ng deploy

一般の開発者によるデプロイメントを可能にするために、Angular のサーバー側レンダリングで ECMAScript モジュールのサポートを有効にし、フェッチ バックエンドを導入し、CloudFlare と連携してプロセスを簡素化しました。 HttpClient 

新しいライフサイクルフック

Angular の SSR と SSG のパフォーマンスを向上させるために、長期的には DOM シミュレーションから離れ、DOM を直接操作するようにしたいと考えています。同時に、ほとんどのアプリケーションのライフサイクル中に、サードパーティのライブラリをインスタンス化したり、要素のサイズを測定したりするために要素と対話する必要があります。

これを実現するために、新しいライフサイクル フックのセットを開発しました。

  • afterRender — アプリケーションがレンダリングを完了するたびに呼び出されるコールバック関数を登録します。
  • afterNextRender — 次回アプリケーションがレンダリングを完了するときに呼び出されるコールバック関数を登録します。Next という単語は次回を意味し、一度だけ実行されることを意味します。

ブラウザ関連のロジックのみがこれらのフックを呼び出すため、カスタム DOM ロジックをコンポーネントに直接安全に挿入できます。たとえば、グラフ作成ライブラリをインスタンス化する場合は、次を使用できます。 afterNextRender 

@Component({
  selector: 'my-chart-cmp',
  template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
  @ViewChild('chart') chartRef: ElementRef;
  chart: MyChart|null;

  constructor() {
    afterNextRender(() => {
      this.chart = new MyChart(this.chartRef.nativeElement);
    }, {phase: AfterRenderPhase.Write});
  }
}

各フックは、レイアウトのスラッシングを軽減し、パフォーマンスを向上させるために、Angular がコールバックをスケジュールするために使用するフェーズ値 (読み取り、書き込みなど) をサポートします。

新しいプロジェクトはデフォルトで Vite と esbuild を使用します

Angular CLI ビルド パイプラインに根本的な変更を加えなければ、そもそも Angular で SSR を有効にすることはできません。

v16 では、esbuild ビルドと Vite ビルドの開発者プレビューを導入しました。それ以来、多くの開発者と一部の企業パートナーがこれを実験し、一部のアプリケーションのビルド時間を 67% 短縮しました。本日、新しい App Builder が開発者プレビューから正式に安定し、すべての新しいアプリに対してデフォルトで有効になったことを発表できることを嬉しく思います。

さらに、ハイブリッド レンダリングを使用する場合のビルド パイプラインを更新しました。SSR と SSG を使用すると、速度が 87% 向上し、編集更新ループ速度が 80% 向上することがわかります。 ng build  ng serve 

元の画像はbinファイルのアニメーションです 現在のプラットフォームではサポートされていません 原文を表示したい場合

将来のマイナー リリースでは、ハイブリッド レンダリング (SSG または SSR を使用したクライアント側レンダリング) を使用して既存のプロジェクトを自動的に移行する回路図を提供する予定です。新しいアプリ ビルダーを今すぐテストしたい場合は、ドキュメントのこのガイドを確認してください。

DevTools での依存関係注入のデバッグ

昨年、私たちは Angular DevTools の依存関係注入デバッグ機能のプレビューを示しました。過去数か月にわたって、私たちはフレームワークのランタイムにプラグインしてインジェクター ツリーを検査できるようにする新しいデバッグ API を実装してきました。

これらの API に基づいて、以下を
プレビューできる検査ユーザー インターフェイスを構築しました。

  • コンポーネントインスペクターでのコンポーネントの
    依存関係
  • インジェクター ツリーと依存関係解決パス
    インジェクター ツリーと依存関係解決パス
  • 個々の
    インジェクター内で宣言されたプロバイダー

以下のアニメーションで機能の簡単なプレビューを確認できます。Angular DevToolsの詳細については、angular.io をご覧ください。Angular DevToolsの詳細については、 http://angular.ioをご覧ください。 
    

 


次に、UI を改良し、インジェクター階層、プロバイダー、およびそれらの解決策をより適切に視覚化することに取り組みます。

最初から独立したAPIを提供

過去 1 年半を費やして独立したコンポーネント、ディレクティブ、パイプラインに関するフィードバックを収集し、それらの開発エクスペリエンスを改良した結果、すべての新しいアプリケーションでそれらを初日から有効にできると確信しています。すべてのng generateコマンドは、独立したコンポーネント、ディレクティブ、パイプラインを構築するようになります。

同時に、一貫した学習体験、開発実践、推奨事項を確保するために、Angular.ioと Angular.dev のドキュメント全体を再検討しました。  

当面は NgModules を保持しますが、新しい独立した API の利点を考慮して、プロジェクトを段階的に NgModules に移行することを強くお勧めします。作業の多くを自動化する回路図も提供します。

ng generate @angular/core:standalone

詳細については、移行ガイドをご覧ください。

リアクティビティの次のステップ

Angular の新しいシグナルベースのリアクティブ システムは、私たちがフレームワークに加えた最大の変化の 1 つです。Zone.js ベースの変更検出との下位互換性と相互運用性を確保するために、私たちはプロトタイピングと今後の道筋の設計に熱心に取り組んできました。

本日、Angular Signals が開発者プレビューから正式に安定したことを発表できることを嬉しく思います。現時点では、関数を開発者プレビューのままにして、そのセマンティクスをさらに反復できるようにします。 effect 

今後数か月かけて、シグナルベースの入力、ビュークエリなどの機能の展開を開始する予定です。来年 5 月までに、Angular v18 では、Signals の開発者エクスペリエンスをさらに向上させるために多くの機能が利用できるようになります。

テストの次のステップ

私たちは Jest の実験を続け、開発者が必要とするパフォーマンス、柔軟性、直感的なソリューションを確実に構築します。また、Web テスト ランナーの実験を開始し、初期実装のPRを送信しました。近い将来、カルマからの脱却を目指すプロジェクトのロックを解除するために、まず Web テスト ランナーに注目するかもしれません。 

資料 3 の次の内容

私たちは Google のマテリアル デザイン チームと協力して、Angular マテリアルの内部をリファクタリングして、コンポーネントにさらに多くのカスタマイズ オプションを提供し、マテリアル 3 のサポートを有効にするシステムであるデザイン トークンを組み込むことに熱心に取り組んできました。v17 に対してデザイン トークンと M3 サポートを提供する準備はまだ整っていませんが、これらの機能は v17 マイナー バージョンで間もなく提供される予定です。   

2022 年第 4 四半期に、MDC に基づく新しい Angular マテリアル コンポーネントのリリースを発表し、機能は同じだが DOM 構造とスタイルが異なる古いコンポーネントを非推奨にしました。古いコンポーネントは v15 で非推奨となり、v17 で削除される予定です。これらは Angular Material v17 パッケージの一部ではありませんが、アプリケーションを Angular v17 に更新して v16 Angular Materials パッケージを使用することができます。これは v18 までのオプションであり、それ以降は Angular マテリアル v16 は新しいバージョンの Angular と互換性がなくなります。また、一時的に移行を実行できない場合に備えて、無期限の有償サポートを提供するHeroDevsのパートナーと連携しています。  

生活の質の向上

これらの将来性のある機能すべてに加えて、バックログから開発者エクスペリエンスに関する小規模な拡張機能も多数用意されています。

実験的なビュー遷移のサポート

View Transitions API を使用すると、  DOM を変更するときにスムーズな移行が可能になります。Angular Router では、関数を通じてこの API を直接サポートするようになりました。この機能では、ブラウザのネイティブ機能を使用してルート間のアニメーション遷移を作成することはできません。 withViewTransitions 

アプリケーションの起動時にルーターのプロバイダー宣言を通じてこの機能を構成することで、この機能をアプリケーションに追加できるようになりました。

bootstrapApplication(App, {
  providers: [
    provideRouter(routes, withViewTransitions()),
  ]
});

withViewTransitions プロパティを含むオプションの構成オブジェクト、追加の制御を提供するコールバックを受け入れます。 onViewTransitionCreated 

  • 特定のアニメーションをスキップするかどうかを決定します
  • ドキュメントにクラスを追加してアニメーションをカスタマイズし、アニメーションが完了したらこれらのクラスを削除します
  • 等

画像ディレクティブでの自動事前接続

Angular イメージ ディレクティブは、イメージ ローダーへの引数として指定したドメインの事前接続リンクを自動的に生成するようになりました。イメージ ディレクティブは、ソースを自動的に識別できず、LCP イメージへの事前接続されたリンクを検出できない場合、開発中に警告を発行します。

この機能の詳細については、「イメージ ディレクティブ ガイド」を参照してください。

遅延読み込みアニメーション モジュール

この機能により、最初のバンドル (gzip 圧縮された 16 KB) が 60 KB 削減されます。コミュニティ寄稿者のMatthieu Riegler は、非同期プロバイダー関数を介してアニメーション モジュールを遅延ロードできる機能を提案し、実装しました。  

import { provideAnimationsAsync } from '@angular/platform-browser/animations-async';

bootstrapApplication(RootCmp, {
  providers: [provideAnimationsAsync()]
});

入力値の変換

一般的なパターンは、ブール入力を受け取るコンポーネントを使用することです。ただし、これにより、そのようなコンポーネントに値を渡す方法に制限が生じます。たとえば、Expander コンポーネントに次の定義があるとします。

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input() expanded: boolean = false;
}

...次のように使用してみました。

<my-expander expanded/>

「文字列をブール値に割り当てることはできません」というエラーが表示されます。入力値の変換により、入力デコレーターを構成することでこの問題を解決できます。

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input({ transform: booleanAttribute }) expanded: boolean = false;
}

元の機能リクエストは、GitHub - HTML バイナリ プロパティとしてのブール プロパティおよびHTML バイナリ プロパティとしてのブール プロパティにあります。 

文字列としてのスタイルと styleUrls

Angular コンポーネントは、コンポーネントごとに複数のスタイルシートをサポートします。ただし、ほとんどの場合、コンポーネントのスタイルを設定する場合は、インライン スタイルを指すか、外部スタイルシートを参照する 1 つの要素を含む配列を作成します。新機能により切り替え可能

@Component({
  styles: [`
    ...
  `]
})
...@Component({
  styleUrls: ['styles.css']
})...

よりシンプルで論理的なものに:

@Component({
  styles: `
    ...
  `
})
...@Component({
  styleUrl: 'styles.css'
})
...

配列を使用する場合でも、複数のスタイルシートがサポートされます。これはよりシンプルで直観的であり、自動書式設定ツールと併用するとより適切に機能します。

コミュニティの概略図

コミュニティのスケマティック開発をサポートするために、 の一部としていくつかの実用的な方法を提供します。式を Angular アプリケーションのルートに直接インポートし、プロバイダーを Angular アプリケーションのルートに追加したり、既存の関数に依存関係を追加したりできるようになりました。 @schematics/angular/utility  package.json 

詳細については、ドキュメントの回路図ガイドを参照してください。

Angular 開発者トレーニング

私たちは、インタラクティブな EdTech プラットフォームである SoloLearn と提携して、最近開発した「 Angular 入門」コースに基づいた新しい Angular トレーニングを開発しました。彼らは、過去 2 か月で 70,000 人以上の人々にリーチしたインタラクティブな学習ジャーニーを作成しました。

詳細については、最近の発表をご覧ください。

コミュニティのハイライト

Angular v17 を特別なものにしてくれた 346 人の貢献者に感謝します。いくつかのハイライトを列挙します。

Angular で未来を築く

過去 6 か月間、私たちは Angular ルネッサンスを継続し、より良い開発エクスペリエンスとパフォーマンスを提供する機能をリリースしてきました。本日、私たちはその勢いをAngular の新しいブランドとangular.dev の学習体験に反映できることに興奮しています。 

次のリリース サイクルでは、Angular のシグナルベースのリアクティブなハイブリッド レンダリングと学習の過程で多くの進化が期待されます。

Angular で未来を築くあなたの旅に参加できることを光栄に思います。ありがとう！

おすすめ

転載: www.oschina.net/news/272640/angular-17-released
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com