填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

後續步驟:工具與技巧

Next steps: tools and techniques

在瞭解了基本的 Angular 建構塊之後,你可以進一步瞭解可以幫助你開發和交付 Angular 應用的特性和工具。

After you understand the basic Angular building blocks, you can learn more about the features and tools that can help you develop and deliver Angular applications.

  • 參考“英雄之旅”課程,瞭解如何將這些基本建構塊放在一起,來建立設計精良的應用。

    Work through the Tour of Heroes tutorial to get a feel for how to fit the basic building blocks together to create a well-designed application.

  • 檢視詞彙表,瞭解 Angular 特有的術語和用法。

    Check out the Glossary to understand Angular-specific terms and usage.

  • 根據你的開發階段和感興趣的領域,使用該文件更深入地學習某些關鍵特性。

    Use the documentation to learn about key features in more depth, according to your stage of development and areas of interest.

應用架構

Application architecture

  • 目錄中的主要概念部分包含一系列主題,用於解釋如何把元件中的應用資料與頁面顯示範本聯絡起來,以建立一個完整的互動式應用。

    The Main Concepts section located in the table of contents contains several topics that explain how to connect the application data in your components to your page-display templates, to create a complete interactive application.

  • NgModules一章中提供了關於 Angular 應用模組化結構的深度資訊。

    The NgModules guide provides in-depth information on the modular structure of an Angular application.

  • 路由與導航一章中提供了一些深度資訊,教你如何構造出一個允許使用者導航到單頁面應用中不同檢視 的應用。

    The Routing and navigation guide provides in-depth information on how to construct applications that allow a user to navigate to different views within your single-page app.

  • 依賴注入一章提供了一些深度資訊,教你如何讓每個元件類別都可以獲取實現其功能所需的服務和物件。

    The Dependency injection guide provides in-depth information on how to construct an application such that each component class can acquire the services and objects it needs to perform its function.

響應式程式設計

Responsive programming

“元件和範本”一章提供了範本語法的指南和詳細資訊,用於在檢視中隨時隨地顯示元件資料,並從使用者那裡收集輸入,以便做出響應。

The template syntax and related topics contain details about how to display your component data when and where you want it within a view, and how to collect input from users that you can respond to.

其它頁面和章節則描述了 Angular 應用的一些基本程式設計技巧。

Additional pages and sections describe some basic programming techniques for Angular apps.

  • 生命週期鉤子:透過實現生命週期鉤子介面,可以竊聽元件生命週期中的一些關鍵時刻 —— 從建立到銷燬。

    Lifecycle hooks: Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.

  • 可觀察物件(Observable)和事件處理:如何在元件和服務中使用可觀察物件來發布和訂閱任意型別的訊息,比如使用者互動事件和非同步操作結果。

    Observables and event processing: How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.

  • Angular 自訂元素:如何使用 Web Components 把元件打包成自訂元素,Web Components 是一種以框架無關的方式定義新 HTML 元素的 Web 標準。

    Angular elements: How to package components as custom elements using Web Components, a web standard for defining new HTML elements in a framework-agnostic way.

  • 表單:透過基於 HTML 的輸入驗證,來支援複雜的資料輸入場景。

    Forms: Support complex data entry scenarios with HTML-based input validation.

  • 動畫:使用 Angular 的動畫函式庫,你可以讓元件支援動畫行為,而不用深入瞭解動畫技術或 CSS。

    Animations: Use Angular's animation library to animate component behavior without deep knowledge of animation techniques or CSS.

“客戶端-伺服器”互動

Client-server interaction

Angular 為單頁面應用提供了一個框架,其中的大多數邏輯和資料都留在客戶端。大多數應用仍然需要使用 HttpClient 來訪問伺服器,以訪問和儲存資料。對於某些平臺和應用,你可能還希望使用 PWA(漸進式 Web 應用)模型來改善使用者體驗。

Angular provides a framework for single-page apps, where most of the logic and data resides on the client. Most apps still need to access a server using the HttpClient to access and save data. For some platforms and applications, you might also want to use the PWA (Progressive Web App) model to improve the user experience.

  • HTTP:與伺服器通訊,透過 HTTP 客戶端來獲取資料、儲存資料,並呼叫伺服器端的動作。

    HTTP: Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.

  • 伺服器端渲染:Angular Universal 透過伺服器端渲染(SSR)在伺服器上產生靜態應用頁面。這允許你在伺服器上執行 Angular 應用,以提高效能,並在移動裝置和低功耗裝置上快速顯示首屏,同時也方便了網頁抓取工具。

    Server-side rendering: Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.

  • Service Worker 和 PWA:使用 Service Worker 來減少對網路的依賴,並顯著改善使用者體驗。

    Service workers and PWA: Use a service worker to reduce dependency on the network and significantly improve the user experience.

  • Web worker:學習如何在後臺執行緒中執行 CPU 密集型的計算。

    Web workers: Learn how to run CPU-intensive computations in a background thread.

為開發週期提供支援

Support for the development cycle

  • CLI 命令參考手冊:Angular CLI 是一個命令列工具,可用於建立專案、產生應用和函式庫程式碼,以及執行各種持續開發任務,如測試、打套件和部署。

    CLI Command Reference: The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

  • 編譯:Angular 為開發環境提供了 JIT(即時)編譯方式,為生產環境提供了 AOT(預先)編譯方式。

    Compilation: Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.

  • 測試平臺:對應用的各個部件執行單元測試,讓它們好像在和 Angular 框架互動一樣。

    Testing platform: Run unit tests on your application parts as they interact with the Angular framework.

  • 部署:學習如何把 Angular 應用部署到遠端伺服器上。

    Deployment: Learn techniques for deploying your Angular application to a remote server.

  • 安全指南:學習 Angular 對常見 Web 應用的弱點和工具(比如跨站指令碼攻擊)提供的內建防護措施。

    Security guidelines: Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.

  • 國際化 :藉助 Angular 的國際化(i18n)工具,可以讓你的應用支援多本地環境。

    Internationalization: Make your app available in multiple languages with Angular's internationalization (i18n) tools.

  • 無障礙性:讓所有使用者都能訪問你的應用。

    Accessibility: Make your app accessible to all users.

檔案結構、配置和依賴

File structure, configuration, and dependencies

  • 工作區與檔案結構:理解 Angular 工作區與專案資料夾的結構。

    Workspace and file structure: Understand the structure of Angular workspace and project folders.

  • 建構與執行:學習為專案定義不同的建構和代理伺服器設定的配置方式,比如開發、預生產和生產。

    Building and serving: Learn to define different build and proxy server configurations for your project, such as development, staging, and production.

  • npm 套件:Angular 框架、Angular CLI 和 Angular 應用中用到的元件都是用 npm 打套件的,並透過 npm 註冊伺服器進行發佈。Angular CLI 會建立一個預設的 package.json 檔案,它會指定一組初始的套件,它們可以一起使用,共同支援很多常見的應用場景。

    npm packages: The Angular Framework, Angular CLI, and components used by Angular applications are packaged as npm packages and distributed via the npm registry. The Angular CLI creates a default package.json file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.

  • TypeScript 配置:TypeScript 是 Angular 應用開發的主要語言。

    TypeScript configuration: TypeScript is the primary language for Angular application development.

  • 瀏覽器支援:讓你的應用能和各種瀏覽器相容。

    Browser support: Make your apps compatible across a wide range of browsers.

擴充套件 Angular

Extending Angular

  • Angular 函式庫:學習如何使用和建立可複用的函式庫。

    Angular libraries: Learn about using and creating re-usable libraries.

  • 學習原理圖 :學習如何自訂和擴充套件 CLI 的產生(generate)能力。

    Schematics: Learn about customizing and extending the CLI's generation capabilities.

  • CLI 建構器:學習如何自訂和擴充套件 CLI 的能力,讓它使用工具來執行復雜任務,比如建構和測試應用。

    CLI builders: Learn about customizing and extending the CLI's ability to apply tools to perform complex tasks, such as building and testing applications.