Angular2-專案實戰（續）-與服務端通訊

介紹

本文是基於我的上一篇文章Angular2 專案實戰來寫的。就是用那個種子工程來作為腳手架來開發一個工作中的應用（不用的內容全部刪掉）。主要介紹服務端Spring REST API的開發，到前端資料顯示的整個過程，以及使用webpack的proxy，前後端分離就靠它了，前端使用它代理地址，有兩個好處，（1）解決開發時候的跨域問題；（2）改改代理的ip和埠方面以後切換各種環境，如本機環境，開發，測試，預生產等環境。

知識點涵蓋

1 Spring REST API開發；

2 webpack-dev-serve proxy

3 angular2 HTTP

4 ngFor

準備

（1）兩臺電腦，一臺做API的伺服器，一臺做web伺服器。（其實在一臺上面改下埠就行了）

（2）用種子工程搭建好一個專案；

Spring REST API

api

哈哈哈，這個好簡單，我隨便寫了兩句，有興趣的讀者可以持久化到資料庫。

我的“伺服器” 埠是8080，ip地址如下圖

伺服器ip地址

配置webpack-dev-server 的proxy代理

webpack-dev-server代理

根據我的伺服器ip地址和埠，這裡配置target。注意，我們這裡要匹配一些使用代理的api，這裡配置凡是 /api/** 這樣的都會轉發到這個http://192.168.0.120:8080上，為什麼要這麼個匹配？因為我們還有很多資源包括頁面，css，圖片等都在我們的web伺服器上（就是本機上的東西），如果配置成／* 那麼一切都去我們的後臺伺服器去找了，所以這裡要理解。注意到了沒，我的後端api是/api/table 與之是相應匹配的。

Angular2的HTTP

這個是文章的核心才對，建立model

獲取資料的service

dashboard中呼叫service，service通過HTTP模組發起get請求，請求api，返回的結果賦值給tableData。稍後頁面進行遍歷。

html使用*ngFor進行便利，兩重便利。[hidden]="searchCell&&cell.indexOf(searchCell)<0"是為了配合上面的[(ngModel)]="searchCell" 實現頁面的搜尋功能，當searchCell輸入時，cell包含上面的內容時，顯示。

看下結果展示

這正是我們從伺服器獲取的資料，

搜尋功能驗證：

輸入a，結果age和name都顯示，id不顯示，正是我們要的結果。

作者寄語：

angular2真是妙不可言，大家多多跟我交流。