# Angular 團隊正式推出 Angular.dev 全新官方網站 Angular 官方正式推出 [angular.dev](https://angular.dev/) 全新官網，未來將取代 [angular.io](https://angular.io/) 成為主要的 Angular 官方網站。這篇文章我將翻譯官方部落格釋出的 [Announcing Angular.dev](https://blog.angular.io/announcing-angular-dev-1e1205fa3039) 文章並翻譯成中文，跟大家分享這個 Angular 的文藝復興時刻！ ![Angular.dev](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/8f335925c70169c9aefa-AnnouncingAngular.dev.webp) ### 全文開始 Angular 於 2016 年首次推出，旨在協助開發人員建立現代的 Web 應用程式。在其歷史上，Angular 幫助了數百萬名開發人員取得成功。 在過去的幾個版本中，我們專注於提升現代 Web 的性能和開發人員體驗。我們的努力包括對 Angular 的反應系統、伺服器端渲染 (SSR) 和[數十個其他功能](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d)的改進。 本週稍晚，我們將發布 Angular v17，其中包括延遲檢視 (deferred views)、內建控制流 (control flow)、檢視轉換 (view transitions) API 支援、SSR 增強功能等等。這個文藝復興的時刻，Angular 值得擁有一個現代的身份，代表我們團隊致力於的速度和穩定性。 > 今天，我們非常興奮地宣布 [Angular.dev](https://angular.dev/) 正式發佈 — Angular 開發者未來的家！ ![Angular.dev 首頁動畫的螢幕錄影，展示一個新的多彩徽標，其中有一個漸變的粉紅色、紫色和紅色字母 A](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4ac5d395f24012932ba9-1_FvYPZlcWOvJH3Pwz-2P4tA.gif) ### Angular.dev — Angular 開發者未來的家 *全新文件... 這是誰？* [Angular.dev](https://angular.dev/) 將成為 Angular 開發的新網站、域名和家園。今天的推出包括全新的課程、更新的文件和指南，將幫助開發人員使用 Angular 的最新功能進行開發。 在未來幾個月中，我們將繼續[收集意見反饋](https://github.com/angular/angular/issues/new/choose)並改進這個網站，並計劃[大量增強功能](https://angular.dev/roadmap)。 一直到 Angular v17 我們都會繼續支援舊版的 [Angular.io](https://angular.io/) 網站，以確保所有舊連結保持有效。在 v18 中，經過回饋收集和網站穩定後，我們計劃將 Angular.dev 打造成所有 Angular 開發的官方家園。 ### 全新的內嵌課程 新文件的一個重要特點是我們的[內嵌課程](https://angular.dev/tutorials/learn-angular)，這是一種在瀏覽器中直接學習 Angular 的全新方式。我們的課程現在使用 [WebContainers](https://webcontainers.io/) 編寫，提供了簡潔的步驟，並提供並行運行的程式碼範例，以學習 (或回頭參考) Angular 的核心概念。 > 介紹 [Angular.dev/tutorials](https://angular.dev/tutorials/learn-angular) — 一種在瀏覽器中直接學習 Angular 概念的新方式。 ![新的 Angular 課程的螢幕截圖：Angular.dev/tutorials/learn-angular](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/792576d849fc6c7496f9-1_5W5I_8cToJY5_-ahC2IKYQ.png) 今天，我們的新課程包括兩種開始使用 Angular 的方式： - [Angular.dev/tutorials/learn-angular](https://angular.dev/tutorials/learn-angular) 是一種在瀏覽器中快速學習 Angular 核心概念的方法，不論是一個還是全部。 - [Angular.dev/tutorials/first-app](https://angular.dev/tutorials/first-app) 教您如何從 `Hello World!` 開始，一直到使用 CLI 建立您的第一個完整 Angular 應用程式，包括[我們的 Angular YouTube 頻道上的完整教學影片](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=9ttPFjG95GYTrZd5)。 您可能已經注意到，我們的努力不僅止於課程... > 推出 [Angular.dev/playground](https://angular.dev/playground) — 一個在瀏覽器中直接探索最新 Angular 概念的遊樂場。 ![在 Angular Playground 中編寫的 Angular 遊戲的螢幕截圖：angular.dev/playground](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/658cd45c2b18765da5fc-1_Yf1OwZzqxJU8dkqIjRYLOA.png) 從 "Hello World" 開始，或選擇我們的範本之一，探索我們最新的功能，包括控制流 (Control Flow)、訊號 (Signals) 等。我們甚至包括了一個受 v17 發布啟發的小遊戲。 ### 給各階開發人員全新文件與和更好的用戶體驗 Angular.dev 從一開始就教授現代的 Angular 開發。 一些亮點包括： - 📕 全新的內容結構，專注於為初學者教授[核心 Angular 概念](https://angular.dev/essentials)，並深入挖掘進階開發人員的深入指南。 - 🧱 所有文件和範例都使用獨立 API 建構，簡化開發，包括[全新撰寫的元件指南](https://angular.dev/guide/components)。 - ⚡️ 核心 Web Vitals 指南，與 Chrome 的 Aurora 團隊合作編寫，包括[圖像優化](https://angular.dev/guide/image-optimization)和[效能調校最佳實踐指南](https://angular.dev/best-practices/runtime-performance)。 - 🌊 [SSR](https://angular.dev/guide/ssr) 和 [Hydration](https://angular.dev/guide/hydration) 的新指南，預設提供更佳的應用程式性能。 - 🔭 更多有用的 [API 參考](https://angular.dev/api)和 [CLI 參考](https://angular.dev/cli) (開發中)。 - ⚒️ 在我們的課程中使用 [Vite 開發伺服器](https://angular.dev/tools/cli/esbuild#vite-as-a-development-server)進行快速編輯 / 重新整理。 - 🚗 更新的公開[發展計畫](https://angular.dev/roadmap)。 - 🔍 更好的搜尋。 - ... 還有更多！ 我們的團隊仍然堅守**穩定性**和**向後相容性**的原則，這是框架可靠性的基石。我們已經更新了[保持最新](https://angular.dev/update)和 [NgModules](https://angular.dev/guide/ngmodules) 的指南，以確保 Angular.dev 對所有團隊都有幫助。未來，我們計劃將 [update.angular.io](https://update.angular.io/) 整合到 Angular.dev 中，並繼續完善文件以體現最新的最佳實踐和建議。 ### 開源文件 Angular.dev 是一個正式的應用程式，採用其指南所推薦的相同 v17 技術 — 獨立 API、Angular Signals、預渲染 (prerendering)、水合 (hydration)、SSR/SSG、路由器中的檢視轉換 (View Transitions)、控制流 (control flow)、延遲檢視 (deferred views)，以及具備 ESBuild 和 Vite 的全新應用程式建置工具。我們也一直使用此應用程式測試未來的 Angular 解決方案，例如**無區域水合** (zoneless hydration)。我們的團隊深信於開源的力量。 > 今天，[我們開源了這個網站](https://github.com/angular/angular/pull/52534)，以供開發人員學習和貢獻。 ### 我可以參與貢獻嗎？ ✨ 當然可以！✨ 我們非常歡迎您協助改進我們的新網站。 隨著這個規模的全新網站的推出，我們的團隊預期會有許多錯誤和改進的機會，特別是在網站及其文件方面。如果您對開源有興趣，這是一個絕佳的開始項目。 如果您有建議、錯誤報告或文件 / 功能請求，請[在 GitHub 上提出問題](https://github.com/angular/angular/issues/new/choose)。 已準備好參與了嗎？請查看我們的[貢獻指南](https://github.com/angular/angular/blob/main/CONTRIBUTING.md)，了解如何入門，或直接點擊文件頁面上的鉛筆圖示，以在 GitHub 中提出編輯建議。*請注意，只有當我們的開源網站 PR 合併後，此功能才會生效。* ### 下一步 我們的團隊將持續在開源領域努力，以改進 v18 的網站。我們的主要關注點是提升內嵌遊樂場的穩定性，以及我們全新的參考基礎架構。 未來，我們還將建立更多指南和強大的課程手冊，充分利用我們的新內嵌遊樂場。我們也看到機會來建立幫助將其他 Web 框架的概念映射到 Angular 概念的課程。😉 更多關於我們當前優先事項的信息，請閱讀[我們的發展計畫](https://angular.dev/roadmap)。我們迫不及待地繼續前進！ ### 全新外觀，不變的框架 這個域名並不是 Angular.dev 唯一的新變化... > 今天，我們還發佈了全新的 Angular 標誌和品牌。 | ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5fb475dd78da66eb362e-1_jlg3PXZ6PYdUGy40tXybKw.gif) | ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ef739c9ad3ef85dddbbd-1_uUKym6BwzQbXCL7St2lPWQ.png) | | --- | --- | 許多開發者可能記得第一個 AngularJS 盾牌，它是對當時原始的 HTML5、CSS3 和 JavaScript 盾牌標誌的參考。自 HTML5 標準首次發布以來，包括我們自己在內，這些年發生了很多變化。 新的 Angular 標誌代表我們框架的未來，旨在標誌 Angular 進化為現代框架。[Angular 發展計畫](https://angular.dev/roadmap)詳細說明了我們對穩定性和速度的承諾，以及我們致力於改進開發者體驗和性能的工作，這是基於一個廣泛接受的大型框架的力量。隨著 Angular 持續在 Web 平台上探索和創新，這個新標誌將更好地代表我們當前的努力和未來的優先事項。 ### 加入 Angular 的成功洪流 Angular 的成功與我們的社群緊密相關。我們知道許多社群、聚會、會議、部落格、網站、YouTube 頻道和開發者已在我們的基礎上建立了自己的品牌。這個標誌是為我們和我們的社群設計的，非常重要的是，您也可以參與我們，更新您的品牌。 > 今天，我們正在[開源我們的品牌指南](https://angular.dev/press-kit)，這樣您也可以加入我們的成功洪流。 請訪問我們的新[媒體工具箱](https://angular.dev/press-kit)，並遵循我們的指南，了解如何將新標誌適應成您自己的標誌。如果您對適應新標誌或更新您自己的標誌有任何疑問，請發送電子郵件至 [devrel@angular.io](mailto:devrel@angular.io) 以獲得額外的幫助 — 我們迫不及待地想看看您將建立什麼！ 歡迎加入 Angular 的蓬勃發展！✨ | | | | | --- | --- | --- | | [![圖片1](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a9e8c863d15e076d1b43-13139352f312a57563971316b6268754f5f44675969353754623167512e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a9e8c863d15e076d1b43-13139352f312a57563971316b6268754f5f44675969353754623167512e706e67.png) | [![圖片2](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4ab2d460d7d2cfc5e50d-733302f312a4e4334626541593771786d72724d6132416f6f524c512e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4ab2d460d7d2cfc5e50d-733302f312a4e4334626541593771786d72724d6132416f6f524c512e706e67.png) | [![圖片3](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/beadba42dba82907239a-733302f312a4a6a4c4b717253697261645265494d35434e6d6773672e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/beadba42dba82907239a-733302f312a4a6a4c4b717253697261645265494d35434e6d6773672e706e67.png) | | [![圖片4](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/8cdc56df73294ab04773-931312f312a64375f3658656b4472376d4a6d5467384b57687077672e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/8cdc56df73294ab04773-931312f312a64375f3658656b4472376d4a6d5467384b57687077672e706e67.png) | [![圖片5](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b518d6ee2e74558802c0-13035362f312a644c566b6e6d574f7071336f334d676a524932335f412e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b518d6ee2e74558802c0-13035362f312a644c566b6e6d574f7071336f334d676a524932335f412e706e67.png) | [![圖片6](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/00163b8b732a7ba02c00-13030302f312a5270554275704d6538426b695a687a3759506e3439772e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/00163b8b732a7ba02c00-13030302f312a5270554275704d6538426b695a687a3759506e3439772e706e67.png) | | [![圖片7](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/936253f875a640806297-13033342f312a66496f48533064673446483936687338524b4c4469412e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/936253f875a640806297-13033342f312a66496f48533064673446483936687338524b4c4469412e706e67.png) | [![圖片8](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f8b7bcc1a859ee48d2ee-935322f312a695a527547796c5642496c336e496961366c67304c672e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f8b7bcc1a859ee48d2ee-935322f312a695a527547796c5642496c336e496961366c67304c672e706e67.png) | [![圖片9](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/99e73e5c29db74699c26-13033372f312a49694e42565f65314a30766947507165594c6a4e32412e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/99e73e5c29db74699c26-13033372f312a49694e42565f65314a30766947507165594c6a4e32412e706e67.png) | | [![圖片10](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/49d9ba909b157265eeb3-33337322f312a79444c3632304b6c4f4f386e49784e595241495736672e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/49d9ba909b157265eeb3-33337322f312a79444c3632304b6c4f4f386e49784e595241495736672e706e67.png) | [![圖片11](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5cc110166a382fab955a-43237372f312a7453556e4b78734e5666687874752d6a546c314442672e706e67.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5cc110166a382fab955a-43237372f312a7453556e4b78734e5666687874752d6a546c314442672e706e67.png) | | 感謝所有協助啟動 Angular.dev 的令人驚嘆的開發者社群。特別感謝 [Monogram](https://monogram.io/) (Claudio、DJ、Jordan、Leo、Oli、Patrick、Pawel、Sami、TJ) 投身 Angular，感謝 Google Design (Jeremy、Roman、Przemek 和 GDS 的所有成員) 為建立美麗的新品牌和識別，感謝 Angular 核心團隊 (Andrew K.、Alan、Amy、Andrew J.、Alex R.、Alex B.、Andrew S.、Ben、Christina、Charles、Doug、Dylan、Emma、Jens、Jeremy、Jessica、Joey、Joost、Kevin、Kristiyan、Madleina、Mark、Minko、Miles、Paul、Pawel、Simona、Wagner、Zach) 為建立下一代文件而付出努力，感謝我們的早期貢獻者 ([Matthieu](https://github.com/JeanMeche)) 超越預期，[IfThenCreate](https://linktr.ee/ifthencreate) (Reagan) 為我們的新遊樂場小遊戲，**感謝我們不可思議的開源貢獻者社群，以及其他 Google 員工和 Angular Google 開發專家** (Amanda、Cassandra、Christian、Dima、Enea、Fatima、Jess、Jana、Jordan、Iulian、Mariia、Marissa、Mikhail、Olga、Raúl、Richie、Simon) 為提前反饋、測試、功能和錯誤修復所作出的努力！✨ ### 相關連結 - [Angular.dev](https://angular.dev/) - [Special Angular Event - YouTube](https://www.youtube.com/live/Wq6GpTZ7AX0) - [Announcing Angular.dev. Today, we are excited to launch… | by Emma Twersky | Nov, 2023 | Angular Blog](https://blog.angular.io/announcing-angular-dev-1e1205fa3039) - [Angular (@angular) / X](https://twitter.com/angular) - GitHub: [https://github.com/angular/angular](https://github.com/angular/angular) - GitHub: [https://github.com/angular/angular-cli](https://github.com/angular/angular-cli)