用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的核心概念是
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 已經正常啟動。
參考資料: