ps:雖然這個是版本2可是和4差距不大兆蕉,官網(wǎng)現(xiàn)在是4.0版本羽戒,如果和我一樣看官網(wǎng)看不懂,可以利用前人的智慧來學習虎韵。
利用別人思考總結(jié)的檢驗看易稠,要比自己看官方文檔好的多。
如果想一起學習可以叫我qq 3351552193
第一章 編寫你的第一個Angular Web 應(yīng)用
1.1 仿制Reddit網(wǎng)站
1.2 起步
1.2.1 TypeScript
1.2.2 angular-cli
1.2.3 示例項目
1.3 運行應(yīng)用
1.3.1 制作Component
1.3.2 導入依賴
1.3.3 Component注解
1.3.4 用templateUrl添加模板
1.3.5 添加template
1.3.6 用styleUrls添加CSS樣式
1.3.7 加載組件
1.4 把數(shù)據(jù)添加到組件中
1.5 使用數(shù)組
1.6 使用UserItemComponent組件
1.6.1 渲染UserItemComponent
1.6.2 接收輸入
1.6.3 傳入Input值
1.7 “啟動”速成班
1.8 擴展你的應(yīng)用
1.8.1 添加CSS
1.8.2 應(yīng)用程序組件
1.8.3 添加互動
1.8.4 添加文章組件
1.9 渲染多行
1.9.1 創(chuàng)建Article類
1.9.2 存儲多篇文章
1.9.3 使用inputs配置ArticleComponent
1.9.4 渲染文章列表
1.10 添加新文章
1.11 最后的修整
1.11.1 顯示文章所屬的域名
1.11.2 基于分數(shù)重新排序
1.12 全部代碼
1.13 總結(jié)
1.14 獲得幫助
第2章 TypeScript
2.1 Angular是用TypeScript構(gòu)建的
2.2 TypeScript提供了哪些特性
2.3 類型
2.4 內(nèi)置類型
2.4.1 字符串
2.4.2 數(shù)字
2.4.3 布爾類型
2.4.4 數(shù)組
2.4.5 枚舉
2.4.6 任意類型
2.4.7 “無”類型
2.5 類
2.5.1 屬性
2.5.2 方法
2.5.3 構(gòu)造函數(shù)
2.5.4 繼承
2.6 工具
2.6.1 胖箭頭函數(shù)
2.6.2 模板字符串
2.7 總結(jié)
第3章 Angular的工作原理
3.1 應(yīng)用
3.1.1 主導航組件
3.1.2 面包屑導航組件
3.1.3 產(chǎn)品列表組件
3.2 產(chǎn)品數(shù)據(jù)模型
3.3 組件
3.4 組件注解
3.4.1 組件selector
3.4.2 組件template
3.4.3 添加產(chǎn)品
3.4.4 用模板綁定來查看產(chǎn)品
3.4.5 添加更多產(chǎn)品
3.4.6 選擇一個產(chǎn)品
3.4.7 用列出產(chǎn)品
3.5.1 設(shè)置ProductsList的@Component配置項
3.5.2 組件的輸入
3.5.3 組件的輸出
3.5.4 觸發(fā)自定義事件
3.5.5 編寫ProductsList的控制器類
3.5.6 編寫ProdctsList的視圖模板
3.6 產(chǎn)品條目組件
3.6.1 產(chǎn)品條目的組件配置
3.6.2 產(chǎn)品條目組件的定義類
3.6.3 產(chǎn)品條目組件的template
3.6.4 完整的ProductRow代碼清單
3.8 價格展示組件
3.9 產(chǎn)品分類組件
3.10 創(chuàng)建NgModule并啟動應(yīng)用
3.11 完整的項目
3.12 關(guān)于數(shù)據(jù)架構(gòu)的一點說明
第4章 內(nèi)置指令
4.1 簡介
4.2 ngIf
4.3 ngSwitch
4.4 ngStyle
4.5 ngClass
4.6 ngFor
4.7 ngNonBindable
4.8 總結(jié)
第5章 Angular中的表單
5.1 表單——既重要包蓝,又復雜
5.2 FormControl和FormGroup
5.2.1 FormControl
5.2.2 FormGroup
5.3 我們的第一個表單
5.3.1 加載FormsModule
5.3.2 簡易SKU表單:@Component注解
5.3.3 簡易SKU表單:template
5.3.4 簡易SKU表單:組件定義類
5.4 使用FormBuilder
5.5 響應(yīng)式表單 FormBuilder
5.5.1 使用FormBuilder
5.5.2 在視圖中使用myForm
5.5.3 試試看
5.6 添加驗證
5.6.1 顯式地把sku設(shè)置為實例變量
5.6.2 自定義驗證器
5.7 監(jiān)聽變化
5.8 ngModel
第6章 HTTP
6.1 簡介
6.2 使用@angular/http
6.3 基本請求
6.3.1 構(gòu)建SimpleHTTPComponent的@Component
6.3.2 構(gòu)建SimpleHTTPComponent的template
6.3.3 構(gòu)建SimpleHTTPComponent控制器
6.3.4 完整的SimpleHTTPComponent
6.4 編寫YouTubeSearchComponent
6.4.1 編寫SearchResult
6.4.2 編寫YouTubeService
6.4.3 編寫SearchBox
6.4.4 編寫SearchResultComponent
6.4.5 編寫YouTubeSearchComponent
6.5 @angular/http API
6.5.1 發(fā)起一個POST請求
6.5.2 PUT/PATCH/DELETE/HEAD
6.5.3 RequestOptions
6.6 總結(jié)
第7章 路由
7.1 為什么需要路由
7.2 客戶端路由的工作原理
7.2.1 初級階段:使用錨標記
7.2.2 進化:HTML5客戶端路由
7.3 編寫第一個路由配置
7.4 Angular路由的組成部件
7.4.1 導入
7.4.2 路由配置
7.4.3 安裝路由配置
7.4.4 使用調(diào)用RouterOutlet指令
7.4.5 使用[routerLink]調(diào)用routerLink指令
7.5 整合
7.5.1 創(chuàng)建組件
7.5.2 應(yīng)用程序組件
7.5.3 配置路由
7.6 路由策略
7.7 路徑定位策略
7.8 運行應(yīng)用程序
7.9 路由參數(shù)
7.10 音樂搜索應(yīng)用
7.10.1 首要步驟
7.10.2 SpotifyService
7.10.3 SearchComponent
7.10.4 嘗試搜索
7.10.5 TrackComponent
7.10.6 音樂搜索應(yīng)用小結(jié)
7.11 路由器鉤子
7.11.1 AuthService
7.11.2 LoginComponent
7.11.3 ProtectedComponent組件和路由守衛(wèi)
7.12 嵌套路由
7.12.1 配置路由
7.12.2 ProductsComponent組件
7.13 總結(jié)
第8章 依賴注入
8.1 注入示例:PriceService
8.2 “別打給我們……”
8.3 依賴注入的部件
8.4 嘗試注入器
8.5 用NgModule提供依賴
8.6 提供者
8.6.1 使用類
8.6.2 使用工廠
8.6.3 使用值
8.6.4 使用別名
8.7 應(yīng)用中的依賴注入
8.8 使用注入器
8.9 替換值
8.10 NgModule
8.10.1 NgModule與JavaScript模塊
8.10.2 編譯器與組件
8.10.3 依賴注入與提供者
8.10.4 組件可見性
8.10.5 指定提供者
8.11 總結(jié)
第9章 Angular數(shù)據(jù)架構(gòu)
第10章 使用可觀察對象的數(shù)據(jù)架構(gòu)驶社,第1 部分:服務(wù)
10.1 可觀察對象和RxJS
10.1.1 注意:一些必備的RxJS相關(guān)知識
10.1.2 學習響應(yīng)式編程和RxJS
10.2 聊天應(yīng)用概覽
10.2.1 組件
10.2.2 數(shù)據(jù)模型
10.2.3 服務(wù)
10.2.4 總結(jié)
10.3 實現(xiàn)數(shù)據(jù)模型
10.3.1 User
10.3.2 Thread
10.3.3 Message
10.4 實現(xiàn)UserService
10.4.1 currentUser流
10.4.2 設(shè)置新用戶
10.4.3 UserService.ts
10.5 MessagesService
10.5.1 newMessages流
10.5.2 messages流
10.5.3 操作流模式
10.5.4 共享流
10.5.5 把Message對象添加到messages流中
10.5.6 完整的MessagesService
10.5.7 試用MessagesService
10.6 ThreadsService
10.6.1 當前一組Thread 的映射(threads流)
10.6.2 按時間逆序排列的Thread列表(orderedthreads流)
10.6.3 當前已選的Thread(currentThread流)
10.6.4 當前已選Thread的Message列表(currentThreadMessages流)
10.6.5 完整的ThreadsService
10.7 總結(jié) 251
第11章 使用可觀察對象的數(shù)據(jù)架構(gòu),第2部分:視圖組件
11.1 構(gòu)建視圖:頂層組件ChatApp
11.2 ChatThreads組件
11.2.1 ChatThreads控制器
11.2.2 ChatThreads的template
11.3.1 ChatThread控制器和ngOnInit
11.3.2 ChatThread的template
11.3.3 ChatThread的完整代碼
11.4 ChatWindow組件
11.4.1 ChatWindow組件類屬性
11.4.2 ChatWindow的ngOnInit
11.4.3 ChatWindow的sendMessage
11.4.4 ChatWindow的onEnter
11.4.5 ChatWindow的scrollToBottom
11.4.6 ChatWindow 的template
11.4.7 處理鍵盤動作
11.4.8 使用ngModel
11.4.9 點擊Send按鈕
11.4.10 完整的ChatWindow組件
11.5.1 設(shè)置incoming屬性
11.5.2 ChatMessage的template
11.6 ChatNavBar組件
11.6.1 ChatNavBar的@Component
11.6.3 ChatNavBar的template
11.6.4 完整的ChatNavBar組件
11.7 總結(jié)
11.8 更進一步
第12章 基于TypeScript的Redux簡介
12.1 Redux
12.2 Redux核心概念
12.2.1 reducer是什么
12.2.2 定義Action和Reducer的接口
12.2.3 創(chuàng)建第一個Reducer
12.2.4 運行第一個Reducer
12.2.5 使用action調(diào)整計數(shù)器
12.2.6 reducer的switch
12.2.7 action的“參數(shù)”
12.3 保存state
12.3.1 使用store
12.3.2 使用subscribe進行通知
12.3.3 Redux核心
12.4 消息應(yīng)用
12.4.1 消息應(yīng)用的state
12.4.2 消息應(yīng)用的action
12.4.3 消息應(yīng)用的reducer
12.4.4 試用action
12.4.5 action creator
12.4.6 使用真正的Redux
12.5 在Angular中使用Redux
12.6 規(guī)劃應(yīng)用
12.7 組建Redux
12.7.1 定義應(yīng)用的state
12.7.2 定義reducer
12.7.3 定義action creator
12.7.4 創(chuàng)建store
12.8 CounterApp組件
12.9 提供store
12.10 啟動應(yīng)用
12.11 CounterComponent
12.11.1 import
12.11.2 模板
12.11.3 constructor
12.11.4 整合
12.12 更進一步
12.13 參考資源
第13章 在Angular中引入Redux
13.1 閱讀背景
13.2 聊天應(yīng)用概覽
13.2.1 組件
13.2.2 數(shù)據(jù)模型
13.2.3 reducer
13.2.4 總結(jié)
13.3 實現(xiàn)數(shù)據(jù)模型
13.3.1 User
13.3.2 Thread
13.3.3 Message
13.4 應(yīng)用的state
13.4.1 關(guān)于代碼布局
13.4.2 根reducer
13.4.3 UserState
13.4.4 ThreadsState
13.4.5 可視化AppState
13.5 構(gòu)建reducer(和action creator)
13.5.1 設(shè)置當前用戶的action creator
13.5.2 UsersReducer:設(shè)置當前用戶
13.5.3 會話和消息概覽
13.5.4 添加新會話的action creator
13.5.5 添加新會話的reducer
13.5.6 添加新消息的action creator
13.5.7 添加新消息的reducer
13.5.8 選擇會話的action creator
13.5.9 選擇會話的reducer
13.5.10 reducer總結(jié)
13.6 構(gòu)建Angular聊天應(yīng)用
13.6.1 頂層組件ChatApp
13.6.2 ChatPage
13.6.3 容器型組件與展示型組件
13.7.1 Redux選擇器
13.7.2 會話選擇器
13.7.3 未讀消息總數(shù)選擇器
13.8 構(gòu)建ChatThreads組件
13.8.1 ChatThreads控制器
13.8.2 ChatThreads的template
13.10 構(gòu)建ChatWindow組件
13.10.1 ChatWindow的updateState()
13.10.2 ChatWindow的scrollToBottom()
13.10.3 ChatWindow的sendMessage
13.10.4 ChatWindow的onEnter
13.10.6 處理鍵盤動作
13.10.7 使用ngModel
13.10.8 點擊Send按鈕
13.11 ChatMessage組件
13.11.1 設(shè)置incoming屬性
13.11.2 ChatMessage的template
13.12 總結(jié)
第14章 高級組件
14.1 樣式
14.1.1 視圖(樣式)封裝
14.1.2 Shadow DOM 封裝
14.1.3 不使用封裝
14.2 創(chuàng)建popup指令:引用并修改宿主元素
14.2.1 popup指令的結(jié)構(gòu)
14.2.2 使用ElementRef
14.2.3 綁定到host屬性
14.2.4 添加按鈕并使用exportAs
14.3.1 改變host屬性的CSS類
14.3.2 使用ng-content
14.4 查詢相鄰的指令:編寫標簽頁
14.4.1 Tab組件
14.4.2 Tabset組件
14.4.3 使用Tabset
14.5 生命周期鉤子
14.5.1 OnInit和OnDestroy
14.5.2 OnChanges
14.5.3 DoCheck
14.5.4 AfterContentInit测萎、AfterViewInit亡电、AfterContentChecked和AfterViewChecked
14.6 高級模板
14.6.1 重寫ngIf:ngBookIf
14.6.2 重寫ngFor:ngBookRepeat
14.7 變更檢測
14.7.1 自定義變更檢測
14.7.2 Zones
14.7.3 可觀察對象和OnPush
14.8 總結(jié)
第15章 測試
15.1 測試驅(qū)動?
15.2 端對端測試與單元測試
15.3 測試工具
15.3.1 Jasmine
15.3.2 Karma
15.4 編寫單元測試
15.5 Angular單元測試框架
15.6 測試前準備
15.7 測試服務(wù)類和HTTP
15.7.1 HTTP要點
15.7.2 偽裝
15.7.3 模擬
15.7.4 Http MockBackend
15.7.5 TestBed.configureTestingModule和提供者
15.7.6 測試getTrack方法
15.8 測試組件間的路由
15.8.1 為測試創(chuàng)建路由器
15.8.2 模擬依賴
15.8.3 探子
15.9 回到測試代碼
15.9.1 fakeAsync和advance
15.9.2 inject
15.9.3 測試ArtistComponent組件初始化
15.9.4 測試ArtistComponent方法
15.9.5 測試ArtistComponent DOM模板值
15.10 測試表單
15.10.1 創(chuàng)建一個ConsoleSpy
15.10.2 安裝ConsoleSpy
15.10.3 配置測試模塊
15.10.4 測試表單
15.10.5 重構(gòu)表單測試
15.11 測試HTTP請求
15.11.1 測試POST方法
15.11.2 測試DELETE方法
15.11.3 測試HTTP頭
15.11.4 測試YouTubeService
15.12 總結(jié)
第16章 把AngularJS應(yīng)用升級到Angular
16.1 周邊概念
16.2 我們要構(gòu)建什么
16.3 把AngularJS映射到Angular
16.4 關(guān)于互操作性的需求
16.5 AngularJS應(yīng)用
16.5.1 AngularJS應(yīng)用的HTML
16.5.2 代碼概覽
16.5.3 AngularJS:PinsService
16.5.4 AngularJS:配置路由
16.5.5 AngularJS:HomeController
16.5.6 AngularJS:HomeController模板
16.5.7 AngularJS:pin指令
16.5.8 AngularJS:pin指令模板
16.5.10 AngularJS:AddController模板
16.5.11 AngularJS:總結(jié)
16.6 構(gòu)建混合式應(yīng)用
16.6.1 混合式應(yīng)用的結(jié)構(gòu)
16.6.2 引導混合式應(yīng)用
16.6.3 我們要升級什么
16.6.4 插一小段內(nèi)容:類型文件
16.6.6 使用Angular的PinControlsComponent
16.6.7 把Angular的PinControlsComponent 降級到AngularJS
16.6.8 用Angular添加圖釘
16.6.9 把AngularJS的PinsService和$state升級到Angular
16.6.10 寫Angular版的AddPinComponent
16.6.11 使用AddPinComponent
16.6.12 把Angular的服務(wù)暴露給AngularJS
16.6.13 實現(xiàn)AnalyticsService
16.6.14 把Angular的AnalyticsService降級到AngularJS