腳本之家服務器常用軟件

快捷導航

用WebStorm進行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式)

更新時間：2018年12月05日 10:45:47 作者：Pointer_v

這篇文章主要介紹了用WebStorm進行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

一、前序

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

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

Angular2使用了javascript的超集‘Typescript'，所以angular1和angular2從設定之初就是不一樣的；

Angular1.x在設計之初主要是針對pc端的，對移動端支持較少（當然也有其他一些衍生框架如ionic），而Angular2是設計包含移動端的；

Angular 1的核心概念是scope，但是angular2中沒有scope，angular2使用zone.js來記錄監(jiān)測變化；

Angular 1 中的控制器在angular2中不再使用，也可以說控制器在angular2中被‘Component'組件所替代：

二、環(huán)境準備

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的路徑，添加到系統(tǒng)的環(huán)境變量中，如果沒有請手動添加。除此之外還要進行其他的配置。

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、配置環(huán)境變量

右擊“計算機”—>”屬性”—>”高級系統(tǒng)設置”—>”環(huán)境變量”

在”系統(tǒng)變量”中,設置 NODE_PATH

在系統(tǒng)變量里新建 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的問題。如下：

首先要做的就是根據(jù)錯誤提示，手動下載相應的版本地址: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

新版已經(jīng)不用angular-cli進行安裝，而是使用@angular/cli，參見官網(wǎng)

三、創(chuàng)建工程

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

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

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

通過嘗試發(fā)現(xiàn)：

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

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