摘要：安裝好后，在命令提示符下輸入回車后就會自動(dòng)安裝好的最新版本，如果你的網(wǎng)絡(luò)環(huán)境和我的一樣，處處受限的話，我建議你先安裝后，利用安裝。好了，基本的前端和后端程序已經(jīng)構(gòu)建完成了，下面需要對前端和后端環(huán)境進(jìn)行一下配置。

學(xué)習(xí)了一段時(shí)間的angular4知識，結(jié)合以前自學(xué)的nodejs-express后端框架知識，做了一個(gè)利用angular4作為前端，node-express作為后端服務(wù)器的網(wǎng)站。這個(gè)網(wǎng)站的功能很簡單，主要是為了體驗(yàn)一下angular4的各項(xiàng)功能。
現(xiàn)在這個(gè)網(wǎng)站做的差不多了，拿來和大家分享一下。有不足之處，希望大家多提意見，也希望能給大家的開發(fā)提供一些幫助。
話不多說，開始介紹我的網(wǎng)站。（特此聲明：本人非專業(yè)人士，只是個(gè)人愛好，不足之處還請大家多多原諒）。
這個(gè)網(wǎng)站是一個(gè)類似于通訊錄的網(wǎng)站，網(wǎng)站邏輯比較簡單，在這里簡單畫了一張網(wǎng)站運(yùn)行邏輯圖：

好了，開始吧！
我使用的是windows操作系統(tǒng)。所以，以下操作全部是在windows系統(tǒng)下進(jìn)行的。

構(gòu)建前端應(yīng)用程序

在前端我使用的是angular-cli構(gòu)建前端開發(fā)環(huán)境，angular-cli的好處就在于集成了開發(fā)angular前端應(yīng)用的一切工具和依賴，還集成了webpack打包工具，使用angular-cli構(gòu)建完應(yīng)用，對于我們來說，基本上就剩下寫代碼了。

1、安裝angular-cli。

你的電腦上首先需要安裝node.js，可以從node.js官網(wǎng)下載（官網(wǎng)下載地址：https://nodejs.org/en/），也可以從node.js中文網(wǎng)下載（node.js中文網(wǎng)地址：http://nodejs.cn/），我用的是windows系統(tǒng)，下載后直接雙加安裝就可以了。安裝好node.js后，在命令提示符下輸入：

npm install -g @angular/cli

回車后就會自動(dòng)安裝好angular-cli的最新版本，如果你的網(wǎng)絡(luò)環(huán)境和我的一樣，處處受限的話，我建議你先安裝cnpm后，利用cnpm安裝angular-cli。
安裝cnpm，請?jiān)诿钐崾痉螺斎耄?/p>

npm install -g cnpm

回車就OK了。之后將安裝angular-cli語句改為

cnpm install -g @angular/cli

2、用angular-cli構(gòu)建angular4應(yīng)用

用angular-cli構(gòu)建angular4應(yīng)用非常簡單，你只需在要構(gòu)建應(yīng)用的目錄中按住shift+鼠標(biāo)右鍵，選擇“在此處打開命令窗口”，在打開的命令窗口輸入：

ng new 

我的應(yīng)用名稱設(shè)置為front,比較簡單，大家可以在處填入自己的應(yīng)用名稱，回車后，會在你選擇的目錄下新建一個(gè)以“projectname”命名的應(yīng)用（在應(yīng)用構(gòu)建進(jìn)行到下載安裝依賴包的時(shí)候，由于網(wǎng)絡(luò)的原因，可能會產(chǎn)生錯(cuò)誤。你可以在命令行模式下進(jìn)到應(yīng)用目錄中，運(yùn)行cnpm install，應(yīng)該就能夠安裝好所有依賴）。

構(gòu)建后端應(yīng)用程序

1、安裝express應(yīng)用生成器，通過應(yīng)用生成器工具 express 可以快速創(chuàng)建一個(gè)應(yīng)用的骨架在命令行輸入：

npm install express-generator -g

2、利用express應(yīng)用生成器快速生成應(yīng)用：
在要構(gòu)建應(yīng)用的目錄下輸入：

express 

(appname是你的express應(yīng)用名稱，我的直接就用了server)，命令執(zhí)行完畢后，進(jìn)入你的appname目錄，執(zhí)行一下npm install或cnpm install,安裝好依賴后就能使用了。

好了，基本的前端和后端程序已經(jīng)構(gòu)建完成了，下面需要對前端和后端環(huán)境進(jìn)行一下配置。