在服務器或客戶端上創建AngularJS View-Model？

Question

我很好奇其他人如何使用底層關係數據庫創建他們的AngularJS視圖模型？我和我的團隊在決定是否應該在服務器端或客戶端進行對象連接時遇到問題。

例如，我們在服務器上有幾個型號，如Author,Book和BookComment。在第一個示例中，只有一個端點可以像/api/author/:id那樣獲得Author，並且它在服務器上「打包」整個視圖模型。第二個示例中，每個對象都有自己的RESTful API端點，如/api/authors/:id，api/books/:id和/api/bookcomments/:id。

一個Author可以有一個或多個Book對象和一個Book可以有一個或多個BookComment對象。

現在讓我們來比較2種情況：

服務器端加入

我們讓服務器加入基於關外鍵的對象，並與像

作者物體結束

  { 
       'id':1, 
       'firstName':'John', 
       'lastName':'Steinbeck', 
       'books':[{ 
        'id':123, 
        'title': 'Grapes of Wrath', 
        'author':1, 
        'comments':[{ 
         'id':555, 
         'content':'This is a great book!', 
         'book':123 
        }] 
       }] 
      } 

這將得到所有的neede d數據和對象以正確呈現視圖。然後，問題就變成了管理原子級別的評論和書籍，所以如果用戶只編輯評論，我們不想保存整個對象，而只需更新BookComment對象。這需要拔出物體並用角狀物$resource或類似的東西來引導它們。

客戶端加入

我們要求的車型單獨，然後加入他們的客戶端上：

作者

 { 
      'id':1, 
      'firstName':'John', 
      'lastName':'Steinbeck', 
      'books':[] 
     } 

書

 { 
      'id':123, 
      'title': 'Grapes of Wrath', 
      'author':1, 
      'comments':[] 
     } 

BookComment

  { 
       'id':555, 
       'content':'This is a great book!', 
       'book':123 
     } 

如果我拉下對象使用RESTful接口列表，然後我可以使用的東西加入他們喜歡

//Get the author 
var author = Author.get(); 

//Join the books that were authored by this author 
author.books = filterFilter(books, {author:author.id}); 

// Iterate each book and filter the comments by book ID 
angular.forEach(books, function(book){ 
    book.comments = filterFilter(comments, {book:book.id}); 
}); 

這些都具有自己的優點和缺點。第一個原因很難自動管理這些對象，這迫使您POST大型對象並使後端處理更新SQL數據庫。第二個向客戶端添加更多工作，因爲您需要拉下大型數據集，然後過濾/將它們連接到其他模型上。

是否還有另一個選項，我還沒有遇到或者是這兩種方式之一被認爲是最佳實踐？

Answer 1

我正在與一個大型角應用程序的團隊合作，我們已經嘗試了這兩種實現。

我們從前端鏈接開始。主要是因爲我們對如何構建數據或在某些情況下甚至涉及它們沒有清楚的理解。在開始時創建高度通用的資源並鏈接到客戶端似乎更加靈活。

我們剛剛移動到維護序列化兩端的對象結構，從其餘的API出來並返回到它。這實實在在地將大量凌亂的邏輯和陰暗的關係從我們的盤子中拿走，如果你的數據只是你需要克服的基本對象，我強烈推薦它。它還具有高度可維護性，並易於構建集成工具。

一個例子：

。如果我要求作者資源，我得到以下數據：

{ 
      'id':1, 
      'firstName':'John', 
      'lastName':'Steinbeck', 
      'books':[{ 
       'id':123, 
       'title': 'Grapes of Wrath', 
       'author':1, 
       'comments':[{ 
        'id':555, 
        'content':'This is a great book!', 
        'book':123 
       }] 
      }] 
     } 

我們通過與Restangular包數據的每個嵌套層。 Restangular摘要以令人敬畏的方式將對象封裝爲RESTful資源。

然後，我們可以用像firstAuthor.books[0].remove()這樣的東西編輯底層對象。或者構建自定義終端節點，以便輕鬆更新這些對象，例如Restangular.one('books', firstAuthor.books[0]).get()。

移動這個方向的一個巨大'產品'好處是在瀏覽器中API調用更少/性能更好。當我們在Angular中進行鏈接時，我有一個頁面會爲一個非常複雜的對象創建50個API調用，然後仍然需要執行客戶端中的所有邏輯。使用嵌套序列化，它可以減少到1個API調用，在該頁面上性能提高10倍。

一件小事---它幫助標準化後端如何處理外鍵。我們知道，對於我們知道的外部對象（比如將_id附加到服務器的屬性），我們沒有爲對象設置奇怪的屬性名稱，而是查找該屬性並獲取其ID。在Python/Django的情況下，其中book_comment是外鍵：

book_comment = request.DATA["book_comment"]["id"]