1

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

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

谢谢

4

2 回答 2

3

$http GET(用于位于客户端的资源)不适用于 Chrome 浏览器,并且会出现 CORS 错误(除非您通过使用 run .../chrome.exe 打开 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 的内容。Service 包含一个 getter 和一个 setter 方法来与 localstorage 交互。

索引.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
    }
});

服务.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”与 json 文件进行交互。您必须为客户端创建 RESTful API 路由,以使用 $http 与服务器交互并执行 CRUD 操作。

  • /放
  • /得到
  • /删除
  • /邮政
于 2014-05-29T10:17:59.267 回答
0

我很想看到这些视频是在服务器不写入文件的情况下完成的。你不能只是“发布 .json 文件”并让它替换旧文件,除非你配置你的服务器(apache、nginx、tomcat、node)来这样做。

于 2014-05-28T20:33:54.860 回答