利用angular4和nodejs-express構建一個簡單的網站（一）——構建先後端開發環境

學習了一段時間的angular4知識，結合之前自學的nodejs-express後端框架知識，作了一個利用angular4做爲前端，node-express做爲後端服務器的網站。這個網站的功能很簡單，主要是爲了體驗一下angular4的各項功能。
如今這個網站作的差很少了，拿來和你們分享一下。有不足之處，但願你們多提意見，也但願能給你們的開發提供一些幫助。
話很少說，開始介紹個人網站。（特此聲明：本人非專業人士，只是我的愛好，不足之處還請你們多多原諒）。
這個網站是一個相似於通信錄的網站，網站邏輯比較簡單，在這裏簡單畫了一張網站運行邏輯圖：

好了，開始吧！
我使用的是windows操做系統。因此，如下操做所有是在windows系統下進行的。

先從構建應用程序開始吧

• 構建前端應用程序

在前端我使用的是angular-cli構建前端開發環境，angular-cli的好處就在於集成了開發angular前端應用的一切工具和依賴，還集成了webpack打包工具，使用angular-cli構建完應用，對於咱們來講，基本上就剩下寫代碼了。

一、安裝angular-cli。

你的電腦上首先須要安裝node.js，能夠從node.js官網下載（官網下載地址：https://nodejs.org/en/），也能夠從node.js中文網下載（node.js中文網地址：http://nodejs.cn/），我用的是windows系統，下載後直接雙加安裝就能夠了。安裝好node.js後，在命令提示符下輸入：

npm install -g @angular/cli

回車後就會自動安裝好angular-cli的最新版本，若是你的網絡環境和個人同樣，到處受限的話，我建議你先安裝cnpm後，利用cnpm安裝angular-cli。
安裝cnpm，請在命令提示符下輸入：

npm install -g cnpm

回車就OK了。以後將安裝angular-cli語句改成

cnpm install -g @angular/cli

二、用angular-cli構建angular4應用

用angular-cli構建angular4應用很是簡單，你只需在要構建應用的目錄中按住shift+鼠標右鍵，選擇「在此處打開命令窗口」，在打開的命令窗口輸入：

ng new <projectname>

個人應用名稱設置爲front,比較簡單，你們能夠在<projectname>處填入本身的應用名稱，回車後，會在你選擇的目錄下新建一個以「projectname」命名的應用（在應用構建進行到下載安裝依賴包的時候，因爲網絡的緣由，可能會產生錯誤。你能夠在命令行模式下進到應用目錄中，運行cnpm install，應該就可以安裝好全部依賴）。

• 構建後端應用程序

一、安裝express應用生成器，經過應用生成器工具 express 能夠快速建立一個應用的骨架在命令行輸入：

npm install express-generator -g

二、利用express應用生成器快速生成應用：
在要構建應用的目錄下輸入：

express <appname>

(appname是你的express應用名稱，個人直接就用了server)，命令執行完畢後，進入你的appname目錄，執行一下npm install或cnpm install,安裝好依賴後就能使用了。

好了，基本的前端和後端程序已經構建完成了，下面須要對前端和後端環境進行一下配置。