[Angular學習紀錄] 網站載入前讀取config設定檔參數

應用程式執行前讀取 config 檔案內的參數,這是常見的開發方式,但若把參數定義在 TypeScript 檔案內,經過編譯後,所撰寫的類別都會被整併到 main.js 檔案內,所以若需要調整 config 參數,就必須要打開 main.js 然後在凌亂的 JavaScript檔案內找到參數,在修改它,這可能不是你樂見的。

理想的狀態應該是,把參數檔案定義在一個不會被編譯的檔案內,Ex. JSON檔,然後要使用的時候再去讀取它,對吧~

當然不對,這也是筆者一開始的思維,但當要讀取 .json 檔案的時候,卻發現必須使用 http 、使用 http 、使用 http 來取得參數,若還沒發現事情的嚴重性,筆者大概說明一下,http是一個非同步回傳的類別,所以若要取得參數,就必須要在等待資料回傳後再繼續進行後續的作業,這樣整個應用程式會變得非常的複雜。


Angular正規的使用方式,應該是建立一個 Service,該服務用來載入參數,並且可視需求注入各類別,供各類別使用,下文將示範如何建立一個服務來取得必要的參數資料。


建立服務類別 ConfigService


建立一個服務類別config.service.ts,該類別用來初始化載入參數,和提供參數。
@Injectable()
export class ConfigService {

  private _config: any;

  //提供姓名
  get name() {
    return !this._config ? "沒載入成功" : this._config.name;
  }

  constructor(private http: Http) { }

  //供第一次讀取config時呼叫,之後就不會使用到了
  load() {
    console.log("ConfigService load");
    return this.http.get('assets/config.json')
      .map(res => res.json())
      .toPromise()
      .then(data => {
        this._config = data;
        return data;
      })
  }
}


Module Providers


在Module Providers內聲明該服務為,APP_INITIALIZER,參考語法如下。
providers: [
ConfigService,
{
  provide: APP_INITIALIZER,
  useFactory: (config: ConfigService) => { return () => config.load(); }, 
  deps: [ConfigService],
  multi: true
},
],


實作完以上兩個步驟後,整個應用程式的執行順序將會從原本
AppModule -> ConfigService -> AppComponent 變成
ConfigService -> AppModule -> AppComponent

也就是說,宣告了ConfigService這個服務必須在APP初始化的時候就載入了,其它的必須要等待它完成才繼續進行,如此,就可以達到期望的使用方式了。




本文撰寫時Angular版本為v4.0。

本文範例下載 : Github,使用Angular CLI。



留言