Question

我对angularjs和web应用程序开发很新。我正在制作一个简单的网络应用程序。首先，它从json文件中读取默认设置。然后在网络上，用户可以更改这些设置。但是，我仍然坚持如何保存用户所做的更改以及如何将它们生成到新的json文件。我不知道应该把什么放在控制器里。我尝试了在线发现的不同方法，但没有一种方法有效。请协助。

app.js - 我只做了读取文件部分，但需要保存文件部分。

var app1 = angular.module("myApp", [])
    app1.controller("myAppCtrl", function ($scope, $http) {
        $http.get('src/default.json').then(function(response){
            $scope.messes = response.data;
        });
    });

Answer 1

逻辑上，您应该在这种情况下使用服务器端处理。编写服务器api（在php，node.js，java等中）接受json，转换为json文件并存储在某处并返回物理json文件的可下载链接。

所以在你的情况下：

$http.get('src/default.json').then(function(response){
  $scope.messes = response.data;
  // perform your logic, create a json and send to server
});

让您的服务器完成繁重的处理。考虑可能会严重影响浏览器用户体验的json数据的大小也很重要。

Answer 2

在客户端生成文件的最简单方法（无需服务器端逻辑）是使用HTML5 Blob和File：

var app1 = angular.module("myApp", [])
app1.controller("myAppCtrl", function ($scope, $http) {
    $http.get('src/default.json').then(function(response){
        $scope.messes = response.data;
    });

    $scope.generateJSONFile = function(){
        var jsonStr = JSON.parse(JSON.stringify($scope.messes));
        var blob = new Blob([jsonStr], {type: "application/json"});
        var url = URL.createObjectURL(blob);

        var a = document.createElement('A');
        a.download = "default.json";
        a.href = url;

        document.body.appendChild(a);
        a.click();
    }
});

live example

Angularjs保存用户输入数据并将其生成为json文件

2 个答案: