Angular入門，開發環境搭建，使用Angular CLI建立你的第一個Angular項目

前言：

　　最近一直在使用阿里的NG-ZORRO（Angular組件庫）開發公司後端的管理系統，寫了一段時間的Angular之後發現對於咱們.NET後端開發而言真是很是的友善。所以這篇文章主要是對這段時間使用Angular作一些小總結，但願能夠幫到有須要的同窗。

Angular學習前必備基礎知識點：

TypeScript基本常識：

https://www.tslang.cn/docs/home.html

Angular中文文檔：

https://angular.cn/docs

GitHub地址：

https://github.com/angular/angular

Angular CLI命令參考手冊：

https://angular.cn/cli

Angular中的生命週期函數：

什麼是生命週期函數？

通俗的來講，聲明周期函數就是組件建立，組件更新，組件銷燬是會觸發的一系列方法。

生命週期鉤子： https://angular.cn/guide/lifecycle-hooks

當 Angular 使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些生命週期鉤子方法：

注意：constructor 構造函數（依賴注入，起到對應局部變量值初始化做用）： 除了使用簡單的值對局部變量進行初始化以外，什麼都不該該作！！

 

鉤子	用途及時機
ngOnChanges()	當 Angular（從新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的  SimpleChanges 對象 在 ngOnInit() 以前以及所綁定的一個或多個輸入屬性的值發生變化時都會調用。
ngOnInit()	在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。 在第一輪 ngOnChanges() 完成以後調用，只調用一次。[請求數據時使用]
ngDoCheck()	檢測，並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應。 在每一個變動檢測週期中，緊跟在 ngOnChanges() 和 ngOnInit() 後面調用。
ngAfterContentInit()	當 Angular 把外部內容投影進組件/指令的視圖以後調用。 第一次 ngDoCheck() 以後調用，只調用一次。
ngAfterContentChecked()	每當 Angular 完成被投影組件內容的變動檢測以後調用。 ngAfterContentInit() 和每次 ngDoCheck() 以後調用
ngAfterViewInit()	當 Angular 初始化完組件視圖及其子視圖以後調用。 第一次 ngAfterContentChecked() 以後調用，只調用一次。
ngAfterViewChecked()	每當 Angular 作完組件視圖和子視圖的變動檢測以後調用。 ngAfterViewInit() 和每次 ngAfterContentChecked() 以後調用。
ngOnDestroy()	每當 Angular 每次銷燬指令/組件以前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。 在 Angular 銷燬指令/組件以前調用。

Node.js(攜帶NPM包管理工具)安裝配置：

安裝Nodejs，NodeJS 是必須的：

可在以下地址得到 NodeJS 的安裝包： https://nodejs.org/en/

詳細安裝圖解: https://www.runoob.com/nodejs/nodejs-install-setup.html

安裝成功後查看node版本：

node --version
node -v

切換npm安裝鏡像源，解決npm install緩慢問題：

NodeJS 安裝 好以後，NPM 也就能夠用了（NPM是隨同NodeJS一塊兒安裝的包管理工具）。但 NPM 的默認安裝源在國外，一般會比較慢或者是直接由於網絡緣由安裝失敗，所以須要把 NPM 的安裝源設置到國內鏡像源， 淘寶鏡像（ http://npm.taobao.org/）是個不錯的選擇，執行以下命令設置將淘寶鏡像設置爲NPM的安裝源：

臨時切換使用：

npm --registry https://registry.npm.taobao.org install express

持久使用（推薦）：

npm config set registry https://registry.npm.taobao.org

# 恢復
npm config delete registry

配置後驗證是否成功：

npm config get registry
或者
npm info express

安裝Angular相關開發環境：

Angular-CLI構建工具(腳手架工具)安裝說明：

Angular-CLI詳細簡介： https://www.jianshu.com/p/3d17d5ee1951

全局安裝腳手架工具：

安裝命令（只須要安裝一次）

npm install -g @angular/cli
或者
cnpm install -g @angular/cli   --推薦使用速度較快

 

安裝前最好是先NPM安裝源切換成淘寶鏡像，以下使用國外鏡像安裝由於網絡緣由報錯：

安裝完成：

驗證Angular環境是否安裝成功：

Angular項目建立並運行：

經過Angular腳手架建立一個新的項目：

在終端(win+r 輸入cmd)中打開E:\Angular 文件目錄，輸入一下命令新建項目：

ng new MyAngularProject(項目名稱)

直接經過命名運行腳手架搭建的項目：

ng serve --open

ng serve 命令會啓動開發服務器、監視文件，並在這些文件發生更改時重建應用。
--open（或者只用 -o 縮寫）選項會自動打開你的瀏覽器，並訪問 http://localhost:4200/。

好了你的第一個Angular項目運行成功: