快捷導(dǎo)航

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

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

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

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

一、前序

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

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

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

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

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

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

二、環(huán)境準(zhǔn)備

WebStorm 2016.3.3
Nodejs 7.4.0
angular-cli 0.31
Windows 10 RedStone

WebStorm安裝很簡(jiǎn)單，破解不是本文重點(diǎn)，建議還是支持正版。

（1）Nodejs安裝

這一步很簡(jiǎn)單，下載Windows版的Nodejs，進(jìn)行按照提示安裝即可，記得選擇將nodejs增加到PATH一項(xiàng)，如果界面上沒(méi)有，應(yīng)該就是默認(rèn)幫你搞定了，可以忽略我這句廢話。

通過(guò)命令，驗(yàn)證是否安裝成：

node -v
npm -v

如果正常顯示版本號(hào)，即安裝成功。

（2）Nodejs配置

Nodejs安裝完成之后，默認(rèn)會(huì)將node.exe的路徑，添加到系統(tǒng)的環(huán)境變量中，如果沒(méi)有請(qǐng)手動(dòng)添加。除此之外還要進(jì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)境變量

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

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

在系統(tǒng)變量里新建 NODE_PATH ,值為

C:\Program Files\nodejs\node_global\node_modules

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

npm config get prefix

在”用戶變量”中,修改path

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

這個(gè)值就是上一步中，通過(guò) “npm config set prefix” 設(shè)置的值。

3、配置sass_binary

angular cli 是要依賴node-sass的，默認(rèn)情況下，不會(huì)像其它包一樣直接下載，而是要下載后進(jìn)行編譯的。在Windows下，首先要通過(guò)git下載win32-x64-51_binding.node，但是不知道是被墻還是什么原因，下不下來(lái)，就會(huì)導(dǎo)致后面的編譯出錯(cuò)，以及提示找不到python和Visual Studio的問(wèn)題。如下：

首先要做的就是根據(jù)錯(cuò)誤提示，手動(dòng)下載相應(yīng)的版本地址:binding.node

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

C:\win32-x64-51_binding.node

配置路徑：通過(guò)命令配置

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”

當(dāng)然以上prefix， cache，sass_binary_site， sass_binary_path等，也可以通過(guò)修改下面文件進(jìn)行配置

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進(jìn)行安裝，而是使用@angular/cli，參見(jiàn)官網(wǎng)

三、創(chuàng)建工程

1、打開(kāi)WebStorm新建一個(gè)Angualr CLI 工程

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

很多帖子只說(shuō)指定angular-cli的目錄，沒(méi)有說(shuō)清楚具體是哪個(gè)目錄。但是最開(kāi)始我在指定的時(shí)候，一直還提示“Please specify angular-cli package”。還以為是angualr-cli沒(méi)有安裝對(duì)。

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

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

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