Angular9 技能擴(kuò)展

工具與技巧

在了解了基本的 Angular 構(gòu)建塊之后，您可以進(jìn)一步了解可以幫助你開發(fā)和交付 Angular 應(yīng)用的特性和工具。

• 參考“英雄指南”教程，了解如何將這些基本構(gòu)建塊放在一起，來創(chuàng)建設(shè)計(jì)精良的應(yīng)用。

• 查看詞匯表，了解 Angular 特有的術(shù)語和用法。

• 根據(jù)您的開發(fā)階段和感興趣的領(lǐng)域，使用該文檔更深入地學(xué)習(xí)某些關(guān)鍵特性。

應(yīng)用架構(gòu)

• 組件與模板一章中介紹了如何把組件中的應(yīng)用數(shù)據(jù)與頁面顯示模板聯(lián)系起來，以創(chuàng)建一個(gè)完整的交互式應(yīng)用。

• NgModules 一章中提供了關(guān)于 Angular 應(yīng)用模塊化結(jié)構(gòu)的深度信息。

• 路由與導(dǎo)航一章中提供了一些深度信息，教您如何構(gòu)造出一個(gè)允許用戶導(dǎo)航到單頁面應(yīng)用中不同視圖 的應(yīng)用。

• 依賴注入一章提供了一些深度信息，教您如何讓每個(gè)組件類都可以獲取實(shí)現(xiàn)其功能所需的服務(wù)和對象。

響應(yīng)式編程

“組件和模板”一章提供了模板語法的指南和詳細(xì)信息，用于在視圖中隨時(shí)隨地顯示組件數(shù)據(jù)，并從用戶那里收集輸入，以便做出響應(yīng)。

其它頁面和章節(jié)則描述了 Angular 應(yīng)用的一些基本編程技巧。

• 生命周期鉤子：通過實(shí)現(xiàn)生命周期鉤子接口，可以竊聽組件生命周期中的一些關(guān)鍵時(shí)刻 —— 從創(chuàng)建到銷毀。

• 可觀察對象（Observable）和事件處理：如何在組件和服務(wù)中使用可觀察對象來發(fā)布和訂閱任意類型的消息，比如用戶交互事件和異步操作結(jié)果。

• Angular 自定義元素：如何使用 Web Components 把組件打包成自定義元素，Web Components 是一種以框架無關(guān)的方式定義新 HTML 元素的 Web 標(biāo)準(zhǔn)。

• 表單：通過基于 HTML 的輸入驗(yàn)證，來支持復(fù)雜的數(shù)據(jù)錄入場景。

• 動(dòng)畫：使用 Angular 的動(dòng)畫庫，您可以讓組件支持動(dòng)畫行為，而不用深入了解動(dòng)畫技術(shù)或 CSS。

“客戶端-服務(wù)器”交互

Angular 為單頁面應(yīng)用提供了一個(gè)框架，其中的大多數(shù)邏輯和數(shù)據(jù)都留在客戶端。大多數(shù)應(yīng)用仍然需要使用 HttpClient 來訪問服務(wù)器，以訪問和保存數(shù)據(jù)。對于某些平臺(tái)和應(yīng)用，您可能還希望使用 PWA（漸進(jìn)式 Web 應(yīng)用）模型來改善用戶體驗(yàn)。

• HTTP：與服務(wù)器通信，通過 HTTP 客戶端來獲取數(shù)據(jù)、保存數(shù)據(jù)，并調(diào)用服務(wù)端的動(dòng)作。

• 服務(wù)器端渲染：Angular Universal 通過服務(wù)器端渲染（SSR）在服務(wù)器上生成靜態(tài)應(yīng)用頁面。這允許您在服務(wù)器上運(yùn)行 Angular 應(yīng)用，以提高性能，并在移動(dòng)設(shè)備和低功耗設(shè)備上快速顯示首屏，同時(shí)也方便了網(wǎng)頁抓取工具。

• Service Worker 和 PWA：使用 Service Worker 來減少對網(wǎng)絡(luò)的依賴，并顯著改善用戶體驗(yàn)。

• Web worker：學(xué)習(xí)如何在后臺(tái)線程中運(yùn)行 CPU 密集型的計(jì)算。

為開發(fā)周期提供支持

“開發(fā)工作流”部分描述了用于編譯、測試和部署 Angular 應(yīng)用的工具和過程。

• CLI 命令參考手冊：Angular CLI 是一個(gè)命令行工具，可用于創(chuàng)建項(xiàng)目、生成應(yīng)用和庫代碼，以及執(zhí)行各種持續(xù)開發(fā)任務(wù)，如測試、打包和部署。

• 編譯：Angular 為開發(fā)環(huán)境提供了 JIT（即時(shí)）編譯方式，為生產(chǎn)環(huán)境提供了 AOT（預(yù)先）編譯方式。

• 測試平臺(tái)：對應(yīng)用的各個(gè)部件運(yùn)行單元測試，讓它們好像在和 Angular 框架交互一樣。

• 部署：學(xué)習(xí)如何把 Angular 應(yīng)用部署到遠(yuǎn)端服務(wù)器上。

• 安全指南：學(xué)習(xí) Angular 對常見 Web 應(yīng)用的弱點(diǎn)和工具（比如跨站腳本攻擊）提供的內(nèi)置防護(hù)措施。

• 國際化 ：借助 Angular 的國際化（i18n）工具，可以讓您的應(yīng)用支持多語言環(huán)境。

• 無障礙性：讓所有用戶都能訪問您的應(yīng)用。

文件結(jié)構(gòu)、配置和依賴

• 工作區(qū)與文件結(jié)構(gòu)：理解 Angular 工作區(qū)與項(xiàng)目文件夾的結(jié)構(gòu)。

• 構(gòu)建與運(yùn)行：學(xué)習(xí)為項(xiàng)目定義不同的構(gòu)建和代理服務(wù)器設(shè)置的配置方式，比如開發(fā)、預(yù)生產(chǎn)和生產(chǎn)。

• npm 包：Angular 框架、Angular CLI 和 Angular 應(yīng)用中用到的組件都是用 npm 打包的，并通過 npm 注冊服務(wù)器進(jìn)行發(fā)布。Angular CLI 會(huì)創(chuàng)建一個(gè)默認(rèn)的 package.json 文件，它會(huì)指定一組初始的包，它們可以一起使用，共同支持很多常見的應(yīng)用場景。

• TypeScript 配置：TypeScript 是 Angular 應(yīng)用開發(fā)的主要語言。

• 瀏覽器支持：讓您的應(yīng)用能和各種瀏覽器兼容。

擴(kuò)展 Angular

• Angular 庫：學(xué)習(xí)如何使用和創(chuàng)建可復(fù)用的庫。

• 學(xué)習(xí)原理圖 ：學(xué)習(xí)如何自定義和擴(kuò)展 CLI 的生成（generate）能力。

• CLI 構(gòu)建器：學(xué)習(xí)如何自定義和擴(kuò)展 CLI 的能力，讓它使用工具來執(zhí)行復(fù)雜任務(wù)，比如構(gòu)建和測試應(yīng)用。