Question

我为新手问题道歉，但在网上搜索时，我得到了相互矛盾的答案。

我创建了一个AngularJS应用程序，使用$ http.get从JSON文件中读取数据，并将数据显示为表单，每个表单元素都绑定了ng-model。理想情况下，我希望用户能够编辑所需的字段并单击“保存”，然后在JSON文件中更新该数据。有人告诉我要做到这一点你需要一个像NodeJS这样的第三方服务器，但是我看到其他的例子表明它是在视频中完成的。如果没有第三方服务器，有人可以告诉我这是否可行，如果是这样，这样做的最佳做法是什么。

谢谢

Answer 1

$ http GET（适用于客户端上的资源）无法与Chrome浏览器一起使用，并且会出现CORS错误（除非您通过使用run ... / chrome.exe＆＃34打开Chrome来停用Chrome网络安全性; - allow-file-access-from-files -disable-web-security）。 Firefox给出了一个错误，即JSON虽然没有很好地形成。浏览器似乎不喜欢它。

HTML5 LocalStorage是您希望执行CRUD操作并使数据在页面刷新后仍然存在的客户端存储的最佳选择。一个很好的例子是[TodoMVC示例] （https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs）

显示了一个非常简单的示例，它将json文件保存到localstorage并读取localstorage的内容。该服务包含一个getter和一个setter方法，用于与localstorage进行交互。

<强> INDEX.HTML

<body ng-app = "app">
<div ng-controller="MainCtrl">
  <form>
<input placeholder="Enter Name.." ng-model="newContact"/>
<button type="submit" class="btn btn-primary btn-lg"    
       ng-click="addContact(newContact)">Add
    </button>
  </form>
  <div ng-repeat="contact in contacts track by $index">
    {{contact.name}}
  </div>
</div>

<强> APP.JS

angular.module('app', ['app.services'] )
.controller('MainCtrl', function ($scope, html5LocalStorage) {
    //create variable to hold the JSON
var contacts = $scope.contacts = html5LocalStorage.get();
$scope.addContact = function(contact) {     
  $scope.contacts.push( {"name":contact} ); //Add new value
  html5LocalStorage.put($scope.contacts);   //save contacts to local storeage
    }
});

<强> SERVICES.JS

angular.module('app.services', [] )
.factory('html5LocalStorage', function () {
  var STORAGE_ID = 'localStorageWith_nG_KEY';   //the Local storage Key
    return {
    //Get the localstorage value
    get: function () 
    {
        return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
    },
    //Set the localstorage Value
    put: function (values) 
    {
        localStorage.setItem(STORAGE_ID, JSON.stringify(values));
    }
  };
});

否则，您可以使用Node和Express并将JSON文件存储在服务器上。使用文件系统模块＆fs-extra＆＃39;与json文件交互。您必须为客户端创建RESTful API路由，以使用$ http与服务器进行交互并执行CRUD操作。

/放
/获取
/删除
/后

Answer 2

我很想看到这些视频在没有服务器写入文件的情况下完成。你不能只发布.json文件＆＃34;并将它替换为旧的，除非您配置服务器（apache，nginx，tomcat，node）。

$ http.put可以将数据写入JSON文件

2 个答案: