使用 Angular 18 開發用於搜尋機票的 Web 應用程式

流行的 Angular 框架的第 18 版最近發布了。動態的發展以及社群的興趣幫助 Angular 成為領導者之一。在一系列文章中，我將使用搜尋和預訂機票的應用程式範例來討論最新版本。

課程內容：

• 使用 Angular CLI 建立新應用程序，而不使用 Nx 單一儲存庫；
• 核心實作（Google Analytics、Yandex Metrika）；
• 項目設定（linter、stylers、ssr）；
• 創建應用程式的基本結構；
• UI KIT 的實作；
• 使用框架的功能建立類似的頁面；
• 與第三方API整合。

所有文章都描述了我實施的寵物項目 - 購買和飛行。

我使用travel.alfabank.ru作為範例。

問題可能會出現，為什麼我沒有選擇 https://tinkoff.ru/travel。看著以前的廷科夫銀行，我真的很痛苦。我所愛的關於他的一切都開始停滯和褪色。

此專案的特別之處：

• 訊號 - 訊號將用於輸入，並且通常用於變量，這使您可以完全擺脫changeDetectionRef。
• @if、@for、@defer、@let - 新的 Angular 模板語法。
• NavigationPaths 是統一路徑的解決方案之一。
• MetricService 是一項用於將分析資料傳送到各種系統的通用服務。
• 盡量重複使用所有可能的東西。
• 開發您自己的 UI 套件。

系列文章中未包含的內容：

• SSR最佳化；
• 設定完整的 SEO（針對不存在的頁面返回 404 狀態）；
• NgOptimizedImage。雖然我使用圖像指令，但它們值得作為單獨的材料來分析所有微妙之處。

循環的結果將是一個搜尋廉價機票的網站。

行動版：

您可以在這裡觀看示範 - 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中文網其他相關文章！