Question

我是Web开发的新手，我正在努力更好地了解服务器和数据库以及客户端开发的局限性。

现在，我正在学习AngularJS，并且我能够创建简单的CRUD应用程序，例如待办事项列表或在线商店。目前，我一直在通过常规JavaScript数组/对象为我的Web应用程序创建数据..但现在我希望能够通过我自己的CMS用户界面永久编辑/更改此数据。

一些研究使我使用JSON和角度$http服务从服务器请求JSON数据。

现在，我正在尝试使用angularJS异步更新此JSON数据，我不知道如何执行此操作（请参阅下面的我的尝试）。

简单的待办事项列表申请

<body ng-controller="ToDoCtrl">

  <div class="container">
    <div class="page-header">
      <h1>
        {{todo.user}}'s To Do List &nbsp;
        <span class="label label-default" ng-hide="incompleteCount() == 0"
              ng-class="warningLevel()">
          {{ incompleteCount() }}
        </span>
      </h1>
    </div>

    <div class="panel">

      <div class="input-group">
        <input class="form-control" ng-model="actionText">
        <span class="input-group-btn">
          <button class="btn btn-success" ng-click="addItem(actionText, todo.items)">Add</button>
        </span>
      </div><!-- end input-group -->

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Descriptions</th>
            <th>Done</th>
            <th>Remove</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in todo.items | checkedItems: showComplete | orderBy: 'action'">
            <td>{{item.action}}</td>
            <td><input type="checkbox" ng-model="item.done"></td>
            <td><button ng-click="deleteItem(item, todo.items)" class="btn btn-danger">Delete</button></td>
          </tr>
        </tbody>
      </table>

      <div class="checkbox-inline">
        <label><input type="checkbox" ng-model="showComplete">Show Complete</label>
      </div>

      <div class="input-group">
        <button ng-click="save()" class="btn btn-primary">Save Changes</button>
        <p>{{msg}}</p>
      </div>

    </div><!-- end panel -->
  </div>

  <!-- Vendor JS -->
  <!-- Angular -->
  <script src="vendors/angular.min.js"></script>

  <!-- Modules -->
  <script src="app.js"></script>

</body>

app.js

var model = {
  user: "Alex"
};

angular.module('todoApp', [])

.run(function($http) {

  $http.get("todo.json").success(function(data) {
    model.items = data;
  });

})

.controller('ToDoCtrl', ['$scope', '$http', function($scope, $http) {

  $scope.todo = model;

  $scope.incompleteCount = function() {
    var count = 0;
    angular.forEach($scope.todo.items, function(item) {

      if (!item.done) { 
        count++ 
      }

    });
    return count;
  };

  $scope.warningLevel = function() {
    return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
  };

  $scope.addItem = function(actionText, sourceArray) {
    sourceArray.push(
      {
        action: actionText,
        done: false,
      }
    );

    $scope.actionText = '';
  };

  $scope.deleteItem = function(item, sourceArray) {
    for(var i = 0, j = sourceArray.length; i < j; i++) {
      if(item.action == sourceArray[i].action) {
        sourceArray.splice(i, 1);
        return;
      }
    }
  };

  $scope.save = function() {
    $http.post('C:\Users\Alex\Desktop\Development\"Web Design"\2015\todoApp\public\src\todo.json', $scope.todo.items).then(function(data) {
      $scope.msg = 'Data saved '+ JSON.stringify($scope.todo.items);
    });
  };

}])

.filter("checkedItems", function() {
  return function(items, showComplete) {
    var resultArr = [];
    angular.forEach(items, function(item) {

      if(item.done == false || showComplete == true) {
        resultArr.push(item);
      }

    });
    return resultArr;
  }
});

我将Post用于$scope.save函数，但收到错误：“XMLHttpRequest无法加载。只有协议方案才支持交叉原始请求：http，data，chrome ......”

  $scope.save = function() {
    $http.post('C:\Users\Alex\Desktop\Development\"Web Design"\2015\todoApp\public\src\todo.json', $scope.todo.items).then(function(data) {
      $scope.msg = 'Data saved '+ JSON.stringify($scope.todo.items);
    });
  };

基本上，我只想用我的todo.json数组的当前内容更新我的$scope.todo.items文件。我认为最简单的方法是删除JSON数据的当前内容并替换为$scope.todo.items的当前内容，但我不太了解这些内容。

感谢您的帮助。

Answer 1

首先从一些概念开始：

1.- JSON文件只是一个文本文件，它可以是数据库查询的产品，也可以由服务器动态生成，但在一天结束时只是一个文本文件。

2.- $ http服务处理对HTTP服务器的请求，如Apache Web Server或NodeJS Http Server，使用后端技术运行您的软件，有大量服务器，有些可以在您的机器上运行以及远程。

3.- GET和POST是HTTP方法，必须对运行后端的服务器进行。最常见的一种，GET方法通常用于从服务器获取数据，如文本文件或JSON文件。

4.-在一个Windows提供本地开发的文件服务器中，GET方法可以调出文件系统中的文件（例如＆＃34; todo.json＆＃34;）。这个文件服务器非常基本，它只接受GET请求，并且它应该接受它。

5.-在您的后端软件中，您定义了一个端点，该端点应该是您的后端准备好接收POST请求的地址，您还需要定义此POST请求的作用。

从角度文件到定义服务器端点之间的距离很长，你会遇到不同的技术，Angular框架不是后端技术，它是前端库。

如果你想进入这些概念，TODO List项目是一个很棒的第一个项目，像http://www.todobackend.com/这样的网站可以向你展示各种不同后端和前端的各种TODO项目。

使用AngularJS更新JSON数据

1 个答案: