Angular 的 MVVM 實踐方法（取得資料篇）

Angular主要是MVVM的架構，跟MVC有點像，因為它主要是以UI操作為主，是前端的框架，MVVM讓他可以直接用雙向綁定，但這篇文章主要是以Angular取得資料我在實作的時候分成的三層來講起。

哪三層？

Angular主要是要從Web API取得資料回來，所以這篇文章會重點在取得資料的部分，取得資料我們公司有人全部寫在Component裡面我看到要吐血，所以參考了很多本國外的書，找的取得資料最好維護也最好擴充的寫法。

資料庫程式很常見的就是欄位有更動，程式設計師都認為最好不要更動，客戶總是會要更動，如果寫在Component裡面的話就真的很難維護，或者沒有分層的結構就會很難維護。

先寫分成哪三層：Model、Data（Service）、Component。

Model層

所以分成 Model（這邊不是MVVM的Model），我的Model層主要都是定義傳輸過程中的interface或者class。所以所有的Request的interface要開一個資料夾巢狀式的歸檔，Topics有topicsSelectRequest，然後資料傳回來會有topicsSelectResponse的interface。

Data Service層

Data層，主要是寫Services，用來做Component的相依性注入（Dependency Injection），最好Component不要有任何引用httpClient的部分。

所有呼叫API都在Data Services裡面解決，所以只要程式抓API有錯，或者程式抓API資料異常，找它們就對了。

要新增一個欄位怎辦？Model層加一個欄位在Response的Interface，然後Data Service有可能連動都不用動。

因為JSON傳回的資料會直接轉成Interface，然後變成一個可以訂閱的列舉，讓Component訂閱。

Component層

Component層基本上已經是整個UI最前端的TypeScipt檔了，這裡盡量讓它單純化，不要在這邊呼叫httpClient之類的，全部都交給Data Service去做，這樣要分工也好分工。

這層就是把Data層的資料做處理，訂閱以後可以做一些取得資料後的處理，處理成要顯示的格式。

最後就放到一個變數比如就叫data!: TopicsReponse[];

HTML Template可以在一開始判斷 *ngIf=”data”才開始顯示，就不會有null資料壞掉整個畫面。

結論

這個其實我是從別人的書得到靈感的，也不是我原創，我可以保證這個超好開發一個中型的專案。

因為我上一個帶的產品就是用這個方式寫，然後好分工好偵錯好擴充的完成了整個專案提前進度了兩個月。