AngularJS 2 Day1 Angular2 CLI 與環境的建置

Angular js 2的系列文章終於開始了,平均大概3-5天會進行更新

主要帶想學Angular js2 的初學者們能夠快速踏入這個領域

首先,為什麼一開始會需要進行環境的建置呢?

不就只是單純Html+JavaScript 就可以開始撰寫了嗎?

應該像Bootstrap or JQuery 一樣我可以透過CDN的方式 直接將套件進行載入,開始撰寫

這些疑問在筆者初學Angular js2的時候,也有相同的問題與困擾

後來發現,Angular2 之後開始的版本,把CDN的方式拿掉了 (早期的Angular1 的確是這樣沒錯)

原因在於,這些前端的MVC框架越來越成熟,因此已經不像Bootstrap/JQuery 一樣只是一個類別庫

在這邊有一個重點,它已經不再是一個Library的概念,而是更上一層,一整個框架式的概念

如果有寫過.NET MVC的人應該更能理解我在說什麼。

OK! 那我們就開始吧!!

環境的建置

首先我們需要先到VSCode的官網,下載他的開發工具 

雖然不一定要使用這套IDE來進行開發,但是由於目前VSCode是最支援Angular 2的IDE,裡面有很多套件可以使用

因此筆者建議可以利用這套來進行開發,之後也會額外寫一篇來介紹相關好用的套件。

Angular CLI 

而在Angular js 2 之後的版本,將採用CLI的方式進行開發,這邊的CLI你可以把它想像成利用cmd指令來進行開發

或許你會覺得,為什麼這麼麻煩?我只是想寫一個網頁而已,還需要透過指令才能進行環境的建置與開發

原因在於說,他的環境是需要很多檔案來進行建置

因此,如果能夠學會Angular CLI 將會增進你整個開發的速度

當然,你也可以略過這一塊,Angularjs2的官網上有列出所需的文檔,你可以一個一個手動加入去進行建置。

而在開發之前,你需要先到 Node.js 的官網上進行下載

因為接下來會透過Node.js來當作你的Server來進行驅動

就類似在寫.NET MVC一樣,需要安裝IIS來當作自己的Server

安裝完成後,可以透過指令的輸入來確定自己是否安裝成功:

node -v

安裝完成之後,我們就可以來安裝Angular CLI了

一樣在指令中輸入:

npm install -g @angular/cli

由於是整個框架的安裝,所以這部分會比較久一點,請耐心等待。

完成之後一樣可以輸入版本來進行查詢是否安裝成功:

ng -v 

如果成功看到上圖的資訊,就代表已經安裝完成了。

接下來的下一章節我們會開始介紹Angular CLI的相關指令介紹。 

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/