程式猿十大未解之謎

其實我準備原本按照教程上的寫法，用angular-in-memory-web-api類偽裝一個伺服器。而在最開始的專案裡，我也確實是這麼做的。

但是後來我用webpack替換了原demo中的systemjs，一切都跑偏了。

同樣的程式碼，在之前的專案裡怎麼跑都沒問題；在現在的專案裡，死活都是伺服器地址不對。

這就是程式猿十大未接謎題之首：剛才還特麼是好好的啊！

最後我實在找不到問題出在那裡，只好用js再寫了一個跑在node上的伺服器demo。

有的時候技術突破，也是被逼無奈。不是他XX的，就是你XX的。(原諒我爆粗口)。

所以我們需要小小的轉一個彎，來搞定有關node伺服器上的一些東西。

nodejs伺服器

git上的專案中，server目錄下，就是一個小小的伺服器demo，執行方式為進入資料夾後npm start。

伺服器包含2個檔案：

data.js是我隨便寫的一堆假資料（是的，伺服器也是假資料，因為我還不會用mongodb）

http.js是伺服器主檔案。

angularjs中的http

現在可以回到angular的部分，開始改造service了：

1 定義主路徑

private api = 'http://localhost:4000';

2 定義2個介面

private gundamList = '/gundamlist';
private
 
 gundamDeail = '/detail';

3 使用angular中的http模組

http類在angular中的‘@angular/http’裡，任何使用http之前都需要匯入。以及因為http本身是一個基類要在所有元件中使用，所以需要新增到app.module.ts的imports數組裡。

順便，因為在2個component都用到了service，所以不需要特別在每一個component用provider宣告，在app.module.ts宣告一次就可以了（但是還需要匯入和注入）。

做完之前的鋪墊後，終於可以在service裡用http去請求資料了。

匯入http：

import
 
 { Http } from '@angular/http';

必須的toPromise

import 'rxjs/add/operator/toPromise';

在建構函式中注入：

constructor(private http: Http) {};

修改獲得資料的方法：

// 獲得全部資料
getGundams(): Promise<Gundam[]> {
    return this.http.get(this.api + this.gundamList)
.toPromise()
.then(response => response.json() as Gundam[])
.catch(this.handleError);
}
// 根據Id查詢高達
getGundamById(id: number): Promise<Gundam> {
    return this.http.get(this.api + this.gundamDeail + '?id=' + id)
.toPromise().then( jsonStr => jsonStr.json() as Gundam)
.catch(this.handleError);
}
// 捕獲異常並輸出
private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}

1 http.get(url)（或者post put delete），訪問伺服器以後會返回一個observation物件，事實上是observation<伺服器返回值>。通過toPromise轉換成promise物件以後，就可以正常的使用then方法去處理返回值了。
2 通過promise的then方法，可以獲得到伺服器的返回值。2個返回值都是json字串，而在angular還是先按字串處理。呼叫字串的.json()方法轉化為json陣列（介面1）或者json物件（介面2），繼續呼叫關鍵字as將jison陣列或者jison物件轉化Gundam類，轉化的方式是屬性對應。

回到主頁面,重新整理

點選任意一個欄目

現在可以把假資料刪除，然後測試基本流程了。

webpack打包

進入angular目錄，執行打包命令：

npm run build 

打包完成

進入angular/dist資料夾內，會有如下幾個檔案：

複製到server目錄下的assets資料夾下（沒有請新建）：

回到伺服器目錄下，啟動伺服器：

點選任一列表專案：

可能樣子還不怎麼好看，可能邏輯處理也很簡單。但是至少是一個從前端到後端跑通的流程了。