Angular 18 を使用した航空券検索 Web アプリケーションの開発

人気の Angular フレームワークの第 18 バージョンが最近リリースされました。ダイナミックな開発とコミュニティの関心により、Angular はリーダーの 1 つとなりました。一連の記事では、航空券の検索と予約を行うアプリケーションを例に、最新バージョンについて説明します。

コースに含まれるもの:

• Nx モノリポジトリを使用せずに、Angular CLI を使用して新しいアプリケーションを作成する;
• コア実装 (Google Analytics、Yandex Metrika);
• プロジェクトのセットアップ (リンター、スタイラー、SSR);
• アプリケーションの基本構造の作成;
• UI KIT の実装;
• フレームワークの機能を使用して同様のページを作成する;
• サードパーティ API との統合。

すべての記事は、私が実施したペット プロジェクトである購入と飛行について説明しています。

私は、travel.alfabank.ru を例として使用しました。

なぜ https://tinkoff.ru/travel を利用しなかったのかという疑問が生じるかもしれません。旧ティンコフ銀行を見ると本当に心が痛みます。私が彼について愛したすべてのものは停滞し、色あせ始めます。

このプロジェクトの特別な点:

• シグナル - シグナルは入力および一般に変数に使用されます。これにより、changeDetectionRef.
を完全に取り除くことができます。
• @if、@for、@defer、@let - 新しい Angular テンプレート構文。
• NavigationPaths は、パスを統合するためのソリューションの 1 つです。
• MetricService は、さまざまなシステムに分析を送信するための共通サービスです。
• 可能な限りすべてを最大限に再利用します。
• 独自の UI KIT の開発。

一連の記事に含まれていないもの:

• SSR の最適化;
• 完全な SEO の設定 (存在しないページに対して 404 ステータスを返す);
• Ng最適化された画像。私は画像ディレクティブを使用していますが、すべての微妙な点を分析するには別の資料として価値があります。

サイクルの結果は、格安航空券を検索できる Web サイトになります。

モバイル版の場合:

ここでデモを見ることができます - buy-and-fly.fafn.ru.

アプリケーションは外部 API - travelpayouts.com を使用します。

• Aviasales - 格安チケットを見つけるための API;
• Hotellook - ホテルを検索するための API。

もちろん、Aviasales からの広告があるはずですが、私が頼んだわけではありませんが、彼らは私にお金を払ってくれませんでした。

チュートリアルの使用方法:

• 您可以按順序執行所有操作，並依序查看所有文章。
• 或使用 github，下載並部署應用程式（正確操作需要來自 Travelpayouts 的金鑰）。並且在分析的過程中，參考必要的部分。

如果您對 API 存取金鑰有疑問，請寫信給我，也許我可以提供協助，但一般來說，在 Travelpayouts.com 上註冊不會超過一分鐘。

在下一篇文章中，我們將研究建立一個新應用程式。

連結

所有來源都在 github 上的儲存庫 - github.com/Fafnur/buy-and-fly

您可以在這裡觀看示範 - buy-and-fly.fafn.ru/

我的群組：telegram、medium、vk、x.com、linkedin、site

以上がAngular 18 を使用した航空券検索 Web アプリケーションの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。