$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 操作。