Angular5.1の新機能の詳細な解釈

この記事では主に Angular5.1 の新機能と関連する使用方法を紹介します。必要な方は参考にしてください。

この記事では、Angular 5.1 の新機能を紹介することで、Angular 5.1 の改善点と追加点について詳しく説明します。内容は次のとおりです:

新機能

Angular マテリアルと CDK 安定版

サポートされています。 CLI Service Worker でのサポート

CLI での Universal および AppShell のサポートの改善

デコレーターのエラー メッセージの改善

TypeScript 2.5 のサポート

機能とバグ修正の完全なリストについては、「Angular」、「マテリアル」を参照してください。および CLI 変更ログ。

Angular マテリアルと CDK の安定版

11 のアルファ バージョン、12 のベータ バージョン、および 3 つのリリース候補をリリースした後、Angular マテリアルと Angular CDK の 5.0.0 を安定版としてマークできることを嬉しく思います。 Google のマテリアル デザイン ビジュアル デザイン言語に基づいて、Angular マテリアルは Angular アプリケーションに 30 の UI コンポーネントを提供します。 Angular CDK (コンポーネント開発キット) を Angular CDK と組み合わせると、一般的な問題を再度解決することなく独自のカスタム コンポーネントを構築できる一連の構成要素が提供されます。これらのコンポーネントは、Google Analytics スイート、Google Cloud Platform Developer Console、Google Shopping Express など、多くの Google アプリケーションによって実稼働環境ですでに使用されています。

このバージョンから、Angular Material は Angular と同じセマンティック哲学に従い、Angular Material のメイン バージョンと Angular CDK は他のプラットフォームのメイン バージョンとして同時にリリースされます。バグ修正リリースは毎週反復して行われ、マイナー リリースは機能が完成したときにリリースされます。

ドキュメント、デモ、入門ガイドについては、matrial.angular.io にアクセスしてください。フレームワークにさらに多くのクラスを追加し続けるため、Github で進捗状況を確認することもできます。今後数か月間、新しいマット ツリー、仮想スクロール、コンポーネント テスト スイート、ドラッグ アンド ドロップ機能などに注目してください。

CLI1.6 の Service Worker サポート

パフォーマンスは Web 開発者にとって常に重要な目標であり、今日の LAN WIFI とモバイル ネットワークのイベントにおいても、パフォーマンスは常に重要な目標です。最新のブラウザには、Service Worker API と呼ばれる、信頼性が高く読み込みの速いサイトを構築するための新しい API が備わっています。

Angular 5.0.0 には、Angular アプリケーション用にカスタマイズされた新しい Service Worker 実装が付属しており、Angular CLI 1.6 には、この新しい機能を利用するアプリケーションの構築のサポートが含まれています。 @angular/service-worker を使用すると、この API をサポートするブラウザーでのアプリケーションの読み込みパフォーマンスが向上し、アプリケーションの読み込みエクスペリエンスがネイティブ アプリに似たものになります。

CLI1.6 Universal および App Shell サポートの改善

さらに、Angular CLI1.6 のリリースにより、Schematics を通じて既存のプロジェクトに Universal を追加し、App Shell のサポートを提供することをお勧めします。

Angular Universal

現在の CLI プロジェクトに Universal を追加するには、プロジェクト ディレクトリで次のコマンドを使用できます:

npm generate universal <name>

8a11bc632ea32a57b3e3693c7987c420 をアプリケーションに付ける名前に置き換えます。これにより、採用したアプリケーションが取得され、共通モジュールが作成され、angular-cli.json ファイルが自動的に構成されます。その後、Universal の使用ガイドのステップ 4 に進んでください。

ユニバーサル アプリを構築するには、次のコマンドを実行するだけです:

ng build --app=<name>

App Shell

さらに追加された機能は、App Shell のサポートです。これで、ユニバーサルを使用して、index.html ページでアプリケーションの静的な最初のレンダリングを構築するアプリケーション シェルを生成および構築できるようになりました。これにより、アプリケーションの起動時のユーザー エクスペリエンスが向上します。

まず、アプリケーションの NgModule に RouterModule モジュールがインポートされていること、およびアプリケーション コンポーネントのモジュールに b06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2 があることを確認してください。 App Shell はルーティングを使用してアプリをレンダリングします。

次のコマンドを実行します:

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

app-shell パラメーターを渡すことで、メイン アプリケーションのすべてのシェルのサポートを angular-cli.json ファイルに追加します。ユニバーサル アプリケーションが合格しない場合は、ユニバーサル スケマティックの初回実行時にユニバーサル アプリケーションが作成されます。ルーティング パラメーターは、アプリケーションのビルド中に生成されるルーティング構成を指定します。 (App Shell にはルーティング サポートが必要です)。デフォルトは /shell です。

この手順を完了したら、ng build を使用して通常どおりアプリケーションをビルドするだけです。index.html ファイルには、自動的にレンダリングされたルートが含まれます。

デコレータのエラー メッセージの改善

特にデコレータにサポートされていない式や不正な式が含まれている場合、コンパイラによって生成される診断が大幅に改善されました。

例: テンプレートを処理する関数の呼び出しはサポートされていません。

@Component({
 template: genTemplate()
})

これは以前に発生するエラーです:

Error encountered resolving symbol values statically. Calling function ‘genTemplate', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts

このバグは改善され、問題の原因と性質が明確になりました。

component.ts(9,16): Error during template compile of 'MyComponent'.
 Function calls are not supported in decorators but 'genTemplate' was called.

TypeScript 2.5 のサポート

すべての開発者によって推奨されている TypeScript 2.5 のサポートが追加されました。このバージョンの TypeScript には、いくつかの便利な高度な機能が含まれています。

yarn add typescript@'~2.5.3' または npm install typescript@'~2.5.3' によって Typescript をアップグレードできます。

このアップデートはオプションです。TypeScript 2.4 は引き続き Angular 5.X をサポートします。TypeScript 2.6 はまだサポートしていません。私たちの計画は、将来のマイナー リリースでサポートを追加することです。

a7d71c5568cd0c774b4c2d188d23325c重要な注意事項:a76bcb5cf2f22c4f8daeb0ab5ac42844コードで injector.get(Token) が使用され、Token に静的メンバーがある場合、TypeScript の問題が発生し、返される型は Token ではなく {} になります。 Injector.get42e4dd2825ec91a3f52b146cc8a24e44(Token) を使用して、必要な戻り値を取得できます。

上記は私があなたのためにまとめたものです。

関連記事:

js配列reduceの関連使い方

JavaScriptでreplace関数を使う方法

JavaScriptを使ってオーディオ再生機能を実装する方法

jsコードを使ってコピー機能を実装する

Tangram.jsライブラリを使用してJSクラスを実装する方法

JSで非ファーストスクリーン画像の遅延読み込みを実装する方法

Reactを使用して繰り返しレンダリングを防ぐ方法

vueでディレクティブ関数を実装する方法

以上がAngular5.1の新機能の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。