Angular 2中的服務應該保存數據操作邏輯還是組件？

這可能標記爲基於意見。但我正在尋找標準/最佳做法。我正在構建一個Angular 2應用程序，並且在我將它顯示在模板中之前，我必須從API處理數據。例如，如果我的服務看起來像：Angular 2中的服務應該保存數據操作邏輯還是組件？

getData(id: number): Observable<Data> { 
    return this.http 
     .get(this.url + '/' + id) 
     .map((res) => { 
     return res.json().data; 
     }); 
    } 

    prepareData(data) { 
    // manipulate and return the data 
    }

而且在我的部分，我可以這樣調用服務：

getData(id: number): void { 
    this.dataService.getData(id) 
     .subscribe((data: Data) => { 
     this.showData = this.dataService.prepareData(data) 
     }; 
    }

但是，這是標準的做法？或者應該將prepareData函數包含在組件中？

另一種說法是，服務在與組件比較時應該很重，還是應該很輕，只能作爲獲取數據的接口？

來源

2016-12-16 Yathi

簡單，通用的轉換大家需要（如res => res.json().data）應該去服務。

依賴於表示邏輯（例如data => data.user.firstName + ' ' + data.user.lastName）的視圖特定轉換應該放到組件中。

服務應該能夠提供數據而不知道將會呈現什麼。該組件應該能夠呈現數據而不知道其來自。

來源

2016-12-16 15:59:17 slezica

您的最後一行實際上有助於確定應該去哪裏。我希望Angular的文檔更清楚一點。 – Yathi

從n層體系結構的角度考慮您的角度應用。尊重DRY原則和至少一些SOLID要點 - 在這種情況下，S在您的服務中。將「組件」視爲視圖展示器對（其中模型位於其他位置），而不是ASP.NET的webForms（標記加上代碼後面）。

有兩個基本的可能性會影響您設計的細節 - 您的服務服務器端點是否意識到您的視圖模型。有些團隊採用這種方法，在角度應用程序中幾乎不需要任何轉換，因爲服務器端型號與非常接近角度視圖模型。在這些情況下，任何非視圖特定的東西都可以在您的服務中使用，組件中特定於視圖的轉換是可以的。另一方面，如果您需要將更通用的服務/服務器響應映射到角度視圖模型中，則不希望在服務中執行此操作。如果有可能在其他視圖中重用此模型（將其視爲業務類，而不僅僅是DTO），則您也不想在組件中執行此操作。由於映射可能涉及業務規則，因此最好在角度應用程序中分離專用模型和映射器層，並使服務和組件保持乾燥和「S」。創建一個單獨的模型/業務層也很好，因爲它實際上可以幫助您稍後輕鬆替換UI框架。

來源

2016-12-16 16:10:15

你能告訴我更多關於VM/mapper層的信息嗎？一些鏈接到角度文檔或示例將很好。 – Yathi

這不是特定於角度的，而是OOP啓發的概念，它可以在更大的應用程序中獲得回報（因爲您可以將業務邏輯集中並分離爲「真實」類）。 [這是一個]（https://medium.com/opinionated-angularjs/angular-model-objects-with-javascript-classes-2e6a067c73bc）乾淨地提到這種方法的文章。這是一個很好的模型工廠實現[（swimlane/angular-model-factory）]（https://github.com/swimlane/angular-model-factory），這是一個很好的開箱即用的擴展解決方案指向插入自定義類/映射器，如果需要的話 –

您可以操作並返回getData()中的數據。爲以下各項

getData(id: number): Observable<Data> { 
    return this.http 
     .get(this.url + '/' + id) 
     .map((res) => { 
      let data= res.json().data; 
      return this.prepareData(data); 
     }); 
    } 

    prepareData(data) { 
    // manipulate and return the data 
    }

我希望這將幫助你，如果你有特定的條件，你可以在簡短的描述，我會幫你的，你可以寫你的代碼。

來源

2016-12-16 16:30:00 Devansh

Angular 2中的服務應該保存數據操作邏輯還是組件？

回答

相關問題