Angular，前端開發始終繞不開的山，久仰大名，卻一直連文檔都沒敢翻開看。不過開始學習之後，發現其實也不是很難，特別是有Vue開發經驗之後，而且兩個框架本就有一定的淵源。下面就將自己的學習過程記錄一下，加深理解和記憶，希望能早日登頂。
angular概述
和Ｖue一樣，angular也是以數據爲中心，數據驅動——通過創建數據，綁定數據，修改數據，更新數據，來完成頁面的操作。
雖然還不是太懂這個，但是我還是記錄下來，估計以後慢慢就能理解。
angular的8大核心概念：
①組件：可被反覆使用的 帶有特定功能的視圖
②模板: 普通的html+自定義組件+指令
③指令:讓模板支持更多的邏輯功能
④綁定: 1、事件() 2、屬性[] 3、雙向數據[(ngModel)]
⑤管道: 是一個有參數有返回值的方法,幫助將原始數據經過篩選、過濾、格式化之後更好的展示出來
⑥裝飾器和元數據：裝飾器是用來描述當前的類；元數據是用來告訴Angular如何來處理當前的類
⑦服務
⑧依賴注入
angular工作示意圖
使用angular拓展語法來編寫HTML模板，用組件類管理這些模板，用服務添加應用邏輯，用模塊打包發佈組件與服務。
然後通過引導跟模塊來啓動該應用。 angular在瀏覽器中接管、展現應用的內容，並根據我們提供的操作指令響應用戶的交互。
angular開發模式：
使用組件來完成視圖的封裝和複用
使用服務來完成業務邏輯的封裝和複用
使用模塊來打包組件和服務
使用指令或者管道等拓展語法來編寫HTML
angular選擇TypeScript作爲主要構建語言，其中涉及到靜態類型和基於類的面向對象編程，同時也支持諸如接口、命名空間、裝飾器等特性。
雖然我有點矇蔽，因爲我對typescript的印象僅停留在語法很嚴格。但是這裏暫時不理解也問題不大，瞭解一些基本的語法即可，如：
- 變量名:變量類型。 score:number= 88;private elemRef:ElementRef，看到冒號知道這裏冒號後面其實是變量類型。
- ts中的箭頭函數，在函數創建時就綁定了this
- any表示任意類型，是在類型不明確的變量中使用的。常用於變量的值會動態變化以及存儲各種類型數據的數組。let x:any=1; x= false;
- 支持let，var，const，用法和ES6一樣。
- 接口，命名空間，裝飾器這些特性稍微要了解一下。接口，命名空間，裝飾器這些特性稍微要了解一下。
下面開始正式步入學習
1.安裝 CLI
類似於使用Vue cli ，這裏我們需要安裝一下Angular CLI，目前最新版本的cli要求node版本8.0以上，使用node -v查看自己node版本。
全局安裝命令爲：
npm install -g @angular/cli
還是和Vue類似，安裝完cli之後還要新建項目，並且安裝依賴。
這裏新建一個項目叫做my-app
ng new my-app
進入項目目錄之後,在package.json中可以看到運行指令：start,所以可以直接 npm start運行，修改項目代碼後會自動熱重啓，非常方便。
npm start
編譯完成之後在cmd中可以看到項目地址，輸入網址即可看到效果。
2.工作原理
項目主入口還是main.js，在這裏可以看到，項目是通過引導AppModule這個模塊來啓動的，而AppModule是從app.module導入的，而app.module是通過引導AppComponent，AppComponent是來自app.component.html模板，這個html文件就稱之爲根模板，而這5個就稱之爲根組件。最終你創建的組件是在app.component.html中，以自定義組件的形式展示出來，類似於vue中的局部組件都是掛載在根組件上一樣。
在angular的github上面可以找到創建組件的指令和其他指令，這裏截取上面的一張圖片，加強記憶。
依次是創建 組件、自定義指令，管道(過濾器)，服務，類，守衛，接口，？，模塊
才學到服務這裏來，後面再慢慢補全。
3.創建組件
在項目路徑下，在cmd中
ng g component demo01-component
就可以創建一個組件，這裏可以看到，系統幫我們創建了4個文件，還修改了一個文件。
html文件是我們要編寫的模板，用來控制文檔結構
spec.ts是預編譯文件，這裏一般不做處理；
.ts文件，這裏寫ts代碼，控制邏輯。
.css文件控制樣式。
根組件中更新的內容其實是系統自動幫你導入的自定義組件，不導入就無法註冊使用。
導入之後還需要聲明或者註冊，下面就是註冊。
爲什麼這裏還是要提呢，因爲有時候生成新組建之後，這裏的代碼會出現問題。可能是cli安裝的問題吧，每次新建組件後，新插入的代碼位置都是錯亂的，很煩。但是得知道怎麼修改，問題也不大。
每次都會錯位，每次都要調整，有人知道爲啥嗎？
創建成功之後，這一個文件夾4個文件就稱之爲一個組件。
在.ts文件中可以看到，@Component是它的裝飾器，大花括號內的是它的元數據。
元數據中有一項叫做selector，含義是選擇器。選擇器後面的內容是告訴你使用什麼標籤來調用該組件，這裏是app-demo01,所以我們在根組件的html模板中直接使用該標籤，就可以顯示該組件的內容。
<app-demo01></app-demo01>
個人感覺這裏創建組件比在vue中要方便很多哈，輸入命令後自動創建，自動註冊，調用也方便。
後面我註釋了的templateUrl和styleUrls，分別是組件的模板文件位置和樣式文件位置。css規則和以前一樣，而且不用自己手工引入。
4.編寫模板
前面我們已經會創建組件了，那麼接下來就是編寫組件中的內容。這裏組件的內容其實就是文檔結構+邏輯+樣式，分別對應組件中的html，ts，css文件。
其中html這塊也稱之爲模板，其實模板就是普通的html+自定義組件+指令。
- html我們都很熟悉，不多講。
- 自定義組件就是說模板中我們可能會插入其他的組件，如上demo01其實就是以自定義組件的形式插入到根組件的模板中顯示的。
- 指令和vue中類似，分爲系統內置指令和自定義指令。回想一下vue中有哪些指令？(v-if,v-for,v-model,v-show,v-bind[:
],v-on:[@]…),那麼對應的angular中也有它的內置指令。
5.Angular中的常用指令
直接上圖吧，類比於vue來學習，很快就能理解這些指令的用法。
這裏挑幾個重點說一下：
- [(ngModel)]屬於表單模塊，不屬於Ng模塊，因此不能直接使用。需要在根組件模塊中導入並引用，見下圖19.
- *ngFor和 *ngIf不能再同一標籤上一起使用，會報錯。這裏使用ng-container標籤來解決，將*ngFor綁定到ng-container上即可。ng-container不會渲染在dom書上，不會影響性能。
- 事件綁定時候，事件觸發的函數要加括號，和微信小程序不一樣，vue中可加可不加。
- 屬性綁定使用的是[],這裏忘了單獨寫一個，用法和vue中的v-bind:一樣。
- 插值表達式也一樣用。
- *ngIf爲false時候，在dom樹上都不會有顯示，和v-i6.*ngIf爲false時候，在dom樹上都不會有顯示，和v-if一樣。
圖19