本書作者將一步一步帶領(lǐng)讀者詳細了解Angular的核心組件。本書從一個簡單的AngularApp開始,逐步引入Angular的組件、服務(wù)、服務(wù)器調(diào)用、路由和產(chǎn)品需求。
如果你熟悉,本書將快速指引你用Angular框架編寫高性能Web桌面應(yīng)用、移動應(yīng)用和單頁面App。Angular之前又叫作Angular 2,現(xiàn)在的版本經(jīng)過了AngularJS開發(fā)團隊的徹底重寫。熟悉早期版本的開發(fā)者會發(fā)現(xiàn)本書是一份寶貴的資源。
前言
有趣的是,在生活中我們總是高估或低估了某些事件和項目的重要性。我真的相信,我在谷歌工作的□后一個項目——谷歌的Feedback,□終會徹底改變公司與客戶的互動方式。我相信Angular(那時叫AngularJS)只不過是一個曇花一現(xiàn)的事物,它的壽命不會超過Feedback 項目的管理界面。
事后看來,情況正好相反。雖然Feedback仍然還在,并集成到谷歌的許多產(chǎn)品中,但Angular已經(jīng)從一個內(nèi)部團隊使用的小項目變成如今正在被全世界成千上萬的開發(fā)者和公司所使用。它誕生于Misko、Igor,以及整個項目團隊之手,他們?yōu)楦倪M我們的Web應(yīng)用開發(fā)方式做出了不懈的努力。
項目□初是由兩個人組成,現(xiàn)在已經(jīng)成為網(wǎng)絡(luò)上□大的一個開源社區(qū),這個框架已經(jīng)影響了全世界成千上萬個項目,同時自身也成為其中的一部分。關(guān)于Angular的書有數(shù)十本,教程有數(shù)以百計,文章有數(shù)以千計,同時Angular的使用量和支持數(shù)量每天都在持續(xù)增長。
在Angular□□個版本時的一些重要超前概念(比如數(shù)據(jù)綁定、關(guān)注分離、依賴注入等),現(xiàn)在變成了新框架中的通用特性。
AngularJS生態(tài)系統(tǒng)的□大變化是新版Angular(□初稱為Angular 2.0,現(xiàn)在就叫作Angular)。這是一個巨大的和不向后兼容的改變,幾乎導致整個社區(qū)的分裂。但是,有了社區(qū)參與,以及一個開放、包容的團隊,本來可能是災(zāi)難性的一幕變成了更加迫切地對Angular進行徹底的改造,從而使它開啟了Web開發(fā)的新時代。
實際上,使Angular成為一個偉大的技術(shù)和框架正是在它身后的社區(qū),即那些核心框架的貢獻者,為它開發(fā)插件的人,以及每天都在使用它的人。
作為社區(qū)的一份子,我對本書的出版感到高興,我也用自己的方式為社區(qū)做出了貢獻。
本書的讀者對象
本書是為準備學習Angular(2.0以上)的人準備的,無論是把它作為一個邊沿項目,一個額外的工具,還是作為主要工作。在開始閱讀本書之前,你應(yīng)該熟悉和HTML,但只需具備基本的知識就足夠了,不需要了解AngularJS1.0。
我們還會用到TypeScript,這是Angular推薦的開發(fā)語言,但初步了解一下就足以學習本書。
我們會一步一步的來,所以請放輕松,和我一起快樂地學習吧。
為什么寫這本書
Angular作為一個框架成長很快,具有大量的功能和特性。它的社區(qū)非常龐大,并包含很多有用的內(nèi)容。但是,幫助內(nèi)容、教程和指南要么只關(guān)注特定的主題,要么是零散的,對剛起步的人來說不一定有用。
本書目的是提供一個Angular的step-by-step入門指南。每個概念都建立在前一個概念的基礎(chǔ)之上,以富有邏輯的、有序的方式提供。由于有太多的多移動部件和一個活躍的社區(qū),本書不打算涵蓋每一個知識點,而是詳細介紹核心構(gòu)建塊,讓你自己去探索其他的部分。
當閱讀完本書后,你應(yīng)該熟悉Angular框架的主要內(nèi)容,能夠使用Angular開發(fā)自己的Web App并在你自己的項目中使用它。
如今的Web應(yīng)用程序開發(fā)
的歷史已經(jīng)有很長時間了,它甚至是□廣泛使用的編程語言之一。如今,Web開發(fā)人員很少需要擔心瀏覽器兼容性的問題,這是出現(xiàn)jQuery框架的主要原因。
框架(比如Angular 和React)已經(jīng)成為前端開發(fā)的常見選項,現(xiàn)在,很少有人會在
編寫前端App時不使用任何框架。
使用框架的好處有很多,比如減少雷同的代碼及為App開發(fā)提供相同的結(jié)構(gòu)和布局等。使用框架的主要目的是減少花在cruft(長年累月積累下來的冗余代碼)上的時間,并將注意力更多地集中在我們想要提供的主要功能上。而且,如果App要在不同的瀏覽器(以及在桌面操作系統(tǒng)之外的Android和iOS)上運行,那么框架就會顯得尤其強□。 <□r />Angular(以及其他類似框架)通過位于框架內(nèi)核的核心架構(gòu)提供了如下功能,包括:
? 由聲明式語法驅(qū)動的強大模板語法。
? 模塊化和關(guān)注隔離。
? 數(shù)據(jù)綁定,并通過它進行數(shù)據(jù)驅(qū)動編程。
? 可測試,以及強大的測試支持。
? 路由及導航。
? 還有許多其他功能,從服務(wù)器端渲染到編寫本地移動應(yīng)用程序的能力等。
借助于Angular,我們可以專注于編寫□□體驗,同時以一種無縫的方式管理復雜性和可維護性。
本書主要內(nèi)容
本書的目的是以step-by-step的方式引導開發(fā)人員學習Angular。在每章引入了新的概念之后,都會有一章來介紹如何對其進行單元測試。本書大致安排如下:
□□章,Angular概述,介紹了Angular及其背后的概念。它還包括了開始編寫Angular App需要準備的內(nèi)容。
第2章,你好!Angular,完整地介紹編寫一個簡單Angular App的步驟,從局部到整體。此外還介紹了Angular CLI。
第3章,使用Angular內(nèi)置指令,深入介紹Angular基本內(nèi)置指令(包括ngFor、ngIf等),什么時候使用以及如何使用它們。
第4章,理解和使用Angular組件,更詳細地介紹Angular組件,各種創(chuàng)建選項,以及組件中可用的基本的生命周期鉤子。
第5章,測試Angular 組件,介紹如何用Angular測試框架中的Karma和Jasmine對Angular組件進行單元測試。
第6章,使用模板驅(qū)動表單,介紹在Angular中創(chuàng)建和使用表單,特別是模板驅(qū)動表單。
第7章,使用響應(yīng)式表單,介紹定義和使用表單的另一種方法,即如何創(chuàng)建和開發(fā)響應(yīng)式表單。
第8章,Angular服務(wù),介紹Angular服務(wù),包括如何使用內(nèi)置的Angular服務(wù),以及如何定義和何時需要定義自己的Angular服務(wù)。
第9章,Angular與HTTP請求,介紹Angular的服務(wù)器通信,深入介紹HTTP請求,以及一些高級主題(如攔截器)等。
□□0章,對服務(wù)進行單元測試,回頭再次討論單元測試,但這次重點放在單元測試服務(wù)上。這包括測試簡單的服務(wù)和更復雜的情況,比如異步流,以及進行HTTP調(diào)用的服務(wù)和組件。
□□1章,路由,深入討論如何在一個Angular App中實現(xiàn)路由,并詳細介紹Angular的路由模塊,以及它的大部分特性。
□□2章,部署到生產(chǎn),□后將所有的概念和內(nèi)容組裝在一起,介紹如何將開發(fā)出來的Angular App應(yīng)用到生產(chǎn)環(huán)境中,以及與此相關(guān)的各種問題及技術(shù)。
所有代碼放在GitHub上,如果你不想手敲代碼,或者想看看□終的示例代碼是什么樣子,可以訪問Git 庫上的相關(guān)內(nèi)容(https://github.com/shyamseshadri/angular-upand-running)。
本書中所有示例代碼使用的都是AngularJS 5.0.0。
在線資源
對于任何一個AngularJS開發(fā)者,都可以使用以下資源進行學習,它們對于你來說都是觸手可及的:
? 官方的Angular API文檔(https://angular.io/api)。
? 官方的Angular快速入門指南(https://angular.io/guide/quickstart)。
? Angular Heroes教程App(https://angular.io/tutorial)。
目錄
前言 1
□□章 Angular概述 9
為什么要用Angular 10
本書沒有涉及的內(nèi)容 10
創(chuàng)建開發(fā)環(huán)境 11
Nodejs 11
TypeScript 12
Angular CLI 12
下載代碼庫 13
小結(jié) 13
第2章 你好!Angular 14
創(chuàng)建你的□□個Angular項目 14
理解Angular CLI 15
運行應(yīng)用程序 16
Angular應(yīng)用程序的基本構(gòu)成 18
根HTML——indexhtml 19
入口點——maints 19
主模塊——appmodulets 20
根組件——AppComponent 21
創(chuàng)建組件23
創(chuàng)建組件的步驟 23
使用新組件 25
理解數(shù)據(jù)綁定 26
理解屬性綁定 29
理解事件綁定 32
使用模型讓代碼更清晰 37
小結(jié) 39
練習 39
第3章 使用Angular內(nèi)置指令 41
指令和組件 41
內(nèi)置屬性指令 42
NgClass 42
NgStyle 46
另一種class綁定和style綁定語法 47
內(nèi)置結(jié)構(gòu)化指令 48
NgIf 50
NgFor 51
NgSwitch 56
多分支的結(jié)構(gòu)指令 57
小結(jié) 57
練習 58
第4章 理解和使用Angular組件 59
組件簡介59
定義組件60
Selector 60
Template 61
Styles 62
樣式封裝 64
其他 65
組件和模塊 67
輸入和輸出 68
輸入 68
輸出 70
變化感知 73
組件的生命周期 77
接口和函數(shù) 78
視圖投影82
小結(jié) 85
練習 85
第5章 測試Angular組件 87
什么是單元測試? 87
測試和Angular 88
測試步驟89
Karma 配置 89
testts 90
編寫單元測試 91
隔離單元測試 91
運行測試 93
編寫Angular單元測試 95
測試組件交互 98
調(diào)試 101
小結(jié) 102
練習 102
第6章 使用模板驅(qū)動表單 104
模板驅(qū)動表單 104
創(chuàng)建表單 104
事件綁定和屬性綁定——另一種ngModel 105
ngModel 108
一個完整的表單 110
控件的狀態(tài) 115
控件的校驗 118
使用表單組FormGroups 125
小結(jié) 127
練習 127
第7章 使用響應(yīng)式表單 129
響應(yīng)式表單 129
區(qū)別 130
使用響應(yīng)式表單 130
表單控件 130
表單組 134
表單構(gòu)建器 137
表單數(shù)據(jù)138
控件狀態(tài)、有效性和錯誤 139
表單和數(shù)據(jù)模型 141
FormArray表單數(shù)組 145
小結(jié) 150
練習 151
第8章 Angular服務(wù) 153
什么是Angular服務(wù)? 153
創(chuàng)建自己的Angular服務(wù) 154
深入示例代碼 154
依賴注入 164
Angular和依賴注入 165
RxJS和Observables:使用異步操作 172
小結(jié) 178
練習 179
第9章 Angular與HTTP請求 180
HttpClient概述 180
啟動服務(wù)器 181
使用HttpClientModule 181
創(chuàng)建HTTP GET/POST請求 182
高級HTTP 188
選項——Header和參數(shù) 188
options參數(shù)——Observe和ResponseType 191
攔截器 196
Observable進階 203
小結(jié) 210
練習 211
□□0章 對服務(wù)進行單元測試 213
如何對服務(wù)進行單元測試 213
測試有服務(wù)依賴的組件 217
用真實服務(wù)測試組件217
用模擬服務(wù)測試組件218
用假服務(wù)測試組件 220
異步單元測試 222
HTTP的單元測試 226
小結(jié) 231
練習 231
□□1章 路由 233
創(chuàng)建Angular路由 233
啟動服務(wù)器 233
初始代碼庫 234
導入路由模塊 234
顯示路由內(nèi)容 237
App的導航 238
通配符和默認值 240
常見路由需求 242
路由必要參數(shù) 242
在App中導航 244
路由可選參數(shù) 248
路由保護252
僅授權(quán)可用路由 252
防止卸載 255
用Resolver提前加載數(shù)據(jù) 258
小結(jié) 260
練習 260
□□2章 部署到生產(chǎn) 262
編譯生產(chǎn)版本 262
生產(chǎn)構(gòu)建 263
AOT編譯和Build優(yōu)化器 264
Base Href 265
部署Angular App 265
其他 266
緩存 266
API/服務(wù)器調(diào)用和CORS 268
區(qū)分不同環(huán)境 269
深度鏈接 269
懶加載 271
服務(wù)端渲染和SEO 277
小結(jié) 287