用WebStorm進行Angularjs 2開發（環境篇：Windows 10，Angular-cli方式）

自己學習使用了Angular JS 1一段時間，由於沒有具體的項目進行嘗試加上其它研究工作的影響，就擱置了一段時間。在與同事討論技術選型時，才知道Angular JS 2的差別之大（孤陋了，莫見笑），所以決定弄弄Angular 2。WebStorm是進行JS和前端開發的不二之選的IDE工具，雖然目前版本已經更新了，但是由於Angular 2的成熟度還沒那麼高，所以用WebStorm進行Angular 2的工程創建，還是沒有其他語言的方便。自己嘗試用WebStorm搭建Angular 2的工程，雖然在網上看了一些仁兄的帖子，很有幫助，但是感覺關鍵的、核心的問題沒有說清楚（也可能是由於用Node不是很久，知識淺薄），所以搭建過程特別是在Windows上也是磕磕絆絆，總是有些問題。相信其他人也會遇到同樣的問題，所以將問題梳理總結如下。

---

一、前序

既然是使用Angular JS 2，那麼先簡單說下 1 和 2 的主要區別。這方面內容，網上很多，我就借用其他仁兄的一些資料，具體來源可以查看：參考資料

Angular 1與 Angular 2之間的一些差別

Angular2使用了javascript的超集‘Typescript’，所以angular1和angular2從設定之初就是不一樣的；
Angular1.x在設計之初主要是針對pc端的，對移動端支持較少（當然也有其他一些衍生框架如ionic），而Angular2是設計包含移動端的；
Angular 1的核心概念是scope，但是angular2中沒有 scope，angular2使用zone.js來記錄監測變化；
Angular 1 中的控制器在angular2中不再使用，也可以說控制器在angular2中被‘Component’組件所替代：

二、環境準備

• WebStorm 2016.3.3
• Nodejs 7.4.0
• angular-cli 0.31
• Windows 10 RedStone

WebStorm安裝很簡單，破解不是本文重點，建議還是支持正版。

（1）Nodejs安裝

這一步很簡單，下載Windows版的Nodejs，進行按照提示安裝即可，記得選擇將nodejs增加到PATH一項，如果界面上沒有，應該就是默認幫你搞定了，可以忽略我這句廢話。

通過命令，驗證是否安裝成：

node -v

npm -v

如果正常顯示版本號，即安裝成功。

（2）Nodejs配置

Nodejs安裝完成之後，默認會將node.exe的路徑，添加到系統的環境變量中，如果沒有請手動添加。除此之外還要進行其他的配置。

1、配置prefix和cache目錄

示例目錄地址爲：C:\Program Files\nodejs

npm config set prefix “C:\Program Files\nodejs\node_global”
npm config set cache  “C:\Program Files\nodejs\node_cache

2、配置環境變量
右擊“計算機”—>”屬性”—>”高級系統設置”—>”環境變量”

在”系統變量”中,設置 NODE_PATH
在系統變量裏新建 NODE_PATH ,值爲

C:\Program Files\nodejs\node_global\node_modules

這個值就是上一步中，通過 “npm config set prefix” 設置的值。可以，用下面命令查看

npm config get prefix

在”用戶變量”中,修改path
修改用戶變量中的path，添加C:\Program Files\nodejs\node_global\。

這個值就是上一步中，通過 “npm config set prefix” 設置的值。

3、配置sass_binary

angular cli 是要依賴node-sass的，默認情況下，不會像其它包一樣直接下載，而是要下載後進行編譯的。在Windows下，首先要通過git下載win32-x64-51_binding.node，但是不知道是被牆還是什麼原因，下不下來，就會導致後面的編譯出錯，以及提示找不到python和Visual Studio的問題。如下：

• 首先要做的就是根據錯誤提示，手動下載相應的版本地址:binding.node

• 將下載的binding.node放到指定目錄，例如：

C:\win32-x64-51_binding.node

• 配置路徑：通過命令配置

npm config set sass_binary_site “https://npm.taobao.org/mirrors/node-sass/” //使用阿里的鏡像

npm config set sass_binary_path  “C:\win32-x64-51_binding.node”

當然以上prefix， cache，sass_binary_site， sass_binary_path等，也可以通過修改下面文件進行配置

C:\<username>\.npmrc

prefix=C:\Program Files\nodejs\node_global
cache=C:\Program Files\nodejs\node_cache
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
sass_binary_path=C:\win32-x64-51_binding.node

（3）安裝工具包

1、全局安裝阿里cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、全局安裝typescript

npm install -g typescript typings

3、全局安裝angularjs-cli

npm install -g @angular/cli

新版已經不用angular-cli進行安裝，而是使用@angular/cli，參見官網

三、創建工程

1、打開WebStorm新建一個Angualr CLI 工程

• nodejs如果安裝好，WebStorm會自己掃描到
• 指定工程目錄和名稱
• 指定angular-cli的目錄

很多帖子只說指定angular-cli的目錄，沒有說清楚具體是哪個目錄。但是最開始我在指定的時候，一直還提示“Please specify angular-cli package”。還以爲是angualr-cli沒有安裝對。

通過嘗試發現：

（a）具體的目錄，就是angular-cli包中，bin目錄的上一層目錄

（b）如果目錄選擇完成後，還提示：“Please specify angualr-cli package”，就點擊一下工程名稱那一欄或其它地方。因爲選擇angular-cli目錄，不會觸發事件，所以錯誤提示一直在，點了其它地方，觸發一下事件，提示就會消失，“Create”按鈕就可以使用。

2、等待工程創建完成

以上工作完成，就是等待新建一個angular 2工程。這個過程有點慢，主要是IDE會根據package.json下載依賴的包到工程裏面。

如果出現上圖，就說明工程創建完成，工程結構如下

3、運行程序

• 選擇package.json, 右鍵選擇“Show npm Scripts”，或者用“Edit Configurations”，添加“npm”

• 點擊“start” 啓動 Web Server

• 在瀏覽器輸入 http://localhost:4200 ，若出現 app works! ，表示 Angular 2 已經正常啓動。

---

參考資料：

[1]:http://blog.csdn.net/chenleisly/article/details/53432123
[2]:http://blog.csdn.net/zhu1500527791/article/details/53444870
[3]:http://blog.csdn.net/u013934914/article/details/51460673
[4]:http://www.tuicool.com/articles/7b2MVre
[5]:http://www.cnblogs.com/sulishibaobei/p/6094898.html