打開 Angular2 學習的正確姿勢

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末硅瞧,一起剝皮案震驚了整個濱河市份乒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌腕唧,老刑警劉巖或辖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異枣接,居然都是意外死亡颂暇,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門月腋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蟀架,“玉大人,你說我怎么就攤上這事榆骚∑模” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵妓肢,是天一觀的道長捌省。 經(jīng)常有香客問我,道長碉钠,這世上最難降的妖魔是什么纲缓? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮喊废,結(jié)果婚禮上祝高,老公的妹妹穿的比我還像新娘。我一直安慰自己污筷,他們只是感情好工闺,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著瓣蛀,像睡著了一般陆蟆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上惋增,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天叠殷,我揣著相機與錄音,去河邊找鬼诈皿。 笑死林束,一個胖子當著我的面吹牛硬鞍,可吹牛的內(nèi)容都是我干的呢铆。 我是一名探鬼主播持搜,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼侯勉,長吁一口氣:“原來是場噩夢啊……” “哼廓块!你這毒婦竟也來了陨帆?” 一聲冷哼從身側(cè)響起素跺,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤齐苛,失蹤者是張志新(化名)和其女友劉穎怎披,沒想到半個月后胸嘁,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡凉逛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年性宏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片状飞。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡毫胜,死狀恐怖书斜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情酵使,我是刑警寧澤荐吉,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站口渔,受9級特大地震影響样屠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缺脉,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一痪欲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧攻礼,春花似錦业踢、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至深员,卻和暖如春负蠕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背倦畅。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工遮糖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人叠赐。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓欲账,卻偏偏與公主長得像,于是被迫代替她去往敵國和親芭概。 傳聞我的和親對象是個殘疾皇子赛不,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 曾經(jīng)有一份美好的愛情放在我的面前我沒有珍惜惹苗。等到失去后才后悔莫及殿较。如果可以再對小李說。毛欣想說桩蓉。這輩子無緣再牽手淋纲。...
    毛欣與小李閱讀 2,580評論 0 13
  • 【1】7,9院究,-1洽瞬,5本涕,( ) A、4伙窃;B菩颖、2;C对供、-1位他;D氛濒、-3 分析:選D产场,7+9=16;9+(-1)=8舞竿;(...
    Alex_bingo閱讀 18,858評論 1 19
  • 說一個裝逼的故事《佩珀勒羅》京景,這是男豬腳的名字,說實話骗奖,我丈夫名字要是這么難念确徙,分分鐘就離婚。 男豬腳...
    納兒青閱讀 235評論 0 0
  • 剛剛閱讀完劉同的《向著光亮那方》执桌,抱怨身處黑暗鄙皇,不如提燈前行。不論是《你的孤獨 雖敗尤榮》仰挣,還是《向著光亮那方》伴逸,...
    坨坨坨閱讀 155評論 0 0
  • 青春是什么顏色? 為什么總用絢爛去襯托膘壶? 它不是人們用來回憶的嗎错蝴? 那它應(yīng)該是記憶中泛黃顏色。 都說愛情是青春里必...
    一步一小步閱讀 297評論 0 1