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


前言:

  最近一直在使用阿里的NG-ZORRO(Angular組件庫)開發公司后端的管理系統,寫了一段時間的Angular以后發現對於我們.NET后端開發而言真是非常的友善。因此這篇文章主要是對這段時間使用Angular做一些小總結,希望可以幫到有需要的同學。

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

TypeScript基本常識:

Angular中文文檔:

GitHub地址:

Angular CLI命令參考手冊:

Angular中的生命周期函數:

什么是生命周期函數?
通俗的來說,聲明周期函數就是組件創建,組件更新,組件銷毀是會觸發的一系列方法。
當 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/
安裝成功后查看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項目運行成功:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM