如何在AngularJS中使用$http来更新持久内存

How to, in AngularJS, use $http to update persistent memory

本文关键字：http 更新 内存 AngularJS      更新时间：2023-09-26

这段代码来自Angular入门系列视频，它解释了如何用持久化内存中的数据填充Angular控制器，但没有解释如何将新的产品评论添加到持久化内存中。

似乎确实有一些文章解释了如何做到这一点，但由于我对angular非常陌生，恐怕我无法理解其中的任何一个。

我已经弄清楚了使用$http进行post请求的语法，但我不知道如何将该代码放入现有结构中，以便它将1)在将新元素推到reviews数组时调用，以及2)完成时更新视图。

我有兴趣学习一种基本的方法，将新产品评论添加到持久记忆中。

(function() {
  var app = angular.module('gemStore', ['store-directives']);
  app.controller('StoreController', ['$http', function($http){
    var store = this;
    store.products = [];
    $http.get('/store-products.json').success(function(data){
      store.products = data;
    });
  }]);
  app.controller('ReviewController', function() {
    this.review = {};
    this.addReview = function(product) {
      product.reviews.push(this.review);
      this.review = {};
    };
  });
})();

JSON是这样的:

[
  {
    "name": "Azurite",
    "description": "...",
    ...
    "reviews": []
  },
  ...
]

如果store-products.json只是服务器上的一个文件，则需要实际的后端实现(PHP, nodejs等)来实际更新文件(或者更典型地只是从数据库返回内容)。

通常你会做一个保存方法，而不是张贴每一个修改。但是，在任何一种情况下，取决于您的后端，通常实现就像$http.put('/store-products', store.products)一样简单，每当您单击"保存"按钮时。通常，put可以返回相同的数据，因此通常不需要更新视图，因为只需将其精确地设置为您的状态。但是，如果您有并发编辑的可能性，并且put返回修改后的数据，那么它看起来就像get:

$http.put('/store-products', store.products).success(function(data){
  store.products = data;
});

对于添加项，它可能几乎相同，这取决于您的数据模型:

$http.post('/store-products', newProduct).success(function(data){
  store.products = data;
});

在本例中，POST给出一个要添加的项目并返回所有产品。如果有很多产品——也就是说，产品更像是一个大数据库，而不是一个"文档"中的小集合，那么post通常会在任何服务器处理之后返回添加的项目:

$http.post('/store-products', newProduct).success(function(newProductFromServer){
  store.products.push(newProductFromServer); //if newProduct wasn't already in the array
  //or, store.products[newProductIdx] = newProductFromServer
});

如果你真的想在每次修改时调用这个函数而不是保存按钮，你可以使用watch:

$scope.$watchCollection(
  function() { return store.products; },
  function() { /* call the $http.put or post here */ }
}
相关文章：