經過漫長的等待,終于等到了ng2發布。相比較ng1而言,ng2的變化還是顯而易見的。本文將帶領小伙伴們,一起快速上手玩轉ng2。
一、工欲善其事,必先利其器。
快速安裝Angular-CLI。CLI是谷歌Angular核心團隊提供的一個項目快速構建工具(平臺),對于我這樣貪玩的人來講可謂神兵利器。
首先確保nodejs已經正確安裝,然后檢查一下npm。一切正常,在命令行輸入如下命令:
npm install -g angular-cli
注意,由于腳手架已經改名字,現在使用npm install -g @angular/cli
安裝。
耐心等待幾分鐘,等待腳手架安裝完畢。爾后輸入如下命令,檢查一下是否真的安裝完成:
E:\> ng --version
成功安裝會出現以上信息
二、躍躍欲試,創建第一個ng2項目
通過cli快速的構建一個ng2項目,只需要使用ng new 命令就能完成。具體如下:
E:\>ng new hello-world
cli自動創建的資源文件
三、一切就緒,讓我調試一下
不出意外第一個ng2項目已經構建完畢,接下來我們將一起見證一下運行后的效果。
//進入項目文件目錄
E:\>cd hello-world
//啟動項目
E:\hello-world>ng serve
正常啟動項目后的信息
當webpack將項目編譯成功后,便可以在瀏覽器中輸入http://localhost:4200/來訪問,效果如下圖。
項目運行效果
PS:Angular是比較優秀的一款JS框架,不管是雙向數據綁定,還是依賴注入都讓它變得越來越好玩。