Angular4之五 服務器通信

Angular能夠與任何支持http與websocket服務器進行通信。

首先，咱們使用node.js用typescript語言建立一個web服務器。

1、建立web服務器

步驟1

建立一個空的項目，取名爲service，名字能夠按照狀況而取。

使用命令行，npm init -y 做用：進行初始化，增長一個默認的package.json

使用命令行， npm i @types/node --save 做用：引入node.js

可是node.js不認typescript，須要把typescript編譯成javascript，

首先，新建一個配置文件，取名爲tsconfig.json。
寫入如下內容：

{
  "compilerOptions": {
    "target":"es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build",//ts轉換成js的文件夾
    "lib": ["es6"]
  },
  "exclude": ["node.modules"]
}

其次，想要ctrl+s自動將ts文件轉換成js文件，須要對webstorm進行設置file->settings

步驟2

安裝express框架，命令行：npm install express --save

使用命令行使可以用typescript語法用express框架，命令行：npm install @types/express --save，這個是express的定義文件

步驟3

啓動服務器，命令行：node build/aution_server.js 顯示以下則啓動成功

node服務器啓動後若是發生改變，則不會發生改變，若是要改則須要從新啓動服務器，這對開發十分不便。

安裝插件則能夠作到更新，命令行：npm install -g nodemon

這個插件會監控源代碼，若是發生改變會自動加載到服務器。
用這個命令啓動項目：nodemon build/aution_server.js

2、Angular項目中使用http進行通信

一般咱們但願在 HTTP 請求的時候，頁面不會失去響應，因此咱們的 HTTP 請求是異步的。

JavaScript 中，處理異步代碼一般有3 種方式：

1.回調（callback）

2.承諾（promise）

3.可觀察對象（observable）

一、使用命令行：npm g component [組件名] 實例組件名爲product。

下圖爲product.component.ts文件的代碼。

在此過程當中，(.map)遇到一個問題，報錯。

錯誤信息爲：This import is blacklisted, import a submodule instead

解決方法：引入rxjs文件。

引入方法：參考了https://poychang.github.io/an...，import ‘rxjs/Rx’ 仍然是以上錯誤信息。

改用‘rxjs/rx’ 則不會在代碼報錯。運行時發生錯誤，

提示：TypeError: this.http.get(…).map is not a function

改成'rxjs/add/operator/map' 則正常。可點擊錯誤信息查看原文檔。

二、配置angular命令行，發送請求到相對應的服務器

項目根目錄新建一個配置文件，這裏爲proxy.conf.json。注意json中，不用輕易使用註解，有可能形成錯誤。

須要把這個配置文件配置到項目中，package.json

修改客戶端請求路徑:

從新使用命令行：npm run start啓動客戶端angular項目，發現仍是沒法獲取數據，由於客戶端發送請求路徑爲api/products ，故修改web服務器路徑爲

結果：

到這裏，使用nodejs建立web服務器，angular項目客戶端使用http訪問web服務器就完成了。

注意點：http是異步請求，當你須要用到請求返回值的時候，須要肯定使用時值是否已經返回。這裏很容易被忽視，致使讀值錯誤，頗有可能你使用值的時候，http請求尚未回來。解決的方法應該不少，目前個人作法是把這賦值的語句和http請求在同一線程中執行，即在網絡請求線程中執行。