在服务器或客户端上创建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"]