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

一、前序

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

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

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

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

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

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

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

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

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

（1）Nodejs安裝

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

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

node -v
npm -v

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

（2）Nodejs配置

Nodejs安裝完成之后，默認(rèn)會將node.exe的路徑，添加到系統(tǒng)的環(huán)境變量中，如果沒有請手動添加。除此之外還要進(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ī)”—>”屬性”—>”高級系統(tǒng)設(shè)置”—>”環(huán)境變量”

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

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

C:\Program Files\nodejs\node_global\node_modules

這個值就是上一步中，通過 “npm config set prefix” 設(shè)置的值?？梢裕孟旅婷畈榭?br />

npm config get prefix

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

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

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

3、配置sass_binary

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

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

當(dāng)然以上prefix， cache，sass_binary_site， sass_binary_path等，也可以通過修改下面文件進(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，參見官網(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”，就點(diǎn)擊一下工程名稱那一欄或其它地方。因?yàn)檫x擇angular-cli目錄，不會觸發(fā)事件，所以錯誤提示一直在，點(diǎn)了其它地方，觸發(fā)一下事件，提示就會消失，“Create”按鈕就可以使用。

2、等待工程創(chuàng)建完成

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

如果出現(xiàn)上圖，就說明工程創(chuàng)建完成，工程結(jié)構(gòu)如下

3、運(yùn)行程序

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

點(diǎn)擊“start” 啟動 Web Server

在瀏覽器輸入 http://localhost:4200 ，若出現(xiàn) app works! ，表示 Angular 2 已經(jīng)正常啟動。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論