使用AngularJS更新JSON數據

Question

我是Web開發的新手，我試圖更好地了解服務器和數據庫以及客戶端開發的局限性。

現在，我正在學習AngularJS，並且已經能夠創建簡單的CRUD應用程序，例如待辦事項列表或在線商店。 當前，我一直在通過常規JavaScript數組/對象為我的Web應用程序創建數據。但是現在，我希望能夠通過自己的CMS用戶界面永久編輯/更改該數據。

一些研究使我使用JSON和angular $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;
  }
});

我將此帖子用於$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);
    });
  };

基本上，我只想用$scope.todo.items數組的當前內容更新todo.json文件。 我認為最簡單的方法是刪除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方法可以從您的文件系統中啟動文件（例如“ todo.json”）。 這個文件服務器確實很基礎，它只接受GET請求，僅此而已。

5.-在后端軟件中，您定義了一個端點，該端點應該是您的后端准備好接收POST請求的地址，並且您還需要定義此POST請求的功能。

從角度文件到在服務器中定義端點之間需要很長的一步，您會遇到不同的技術，Angular框架不是后端技術，而是前端庫。

如果您想了解這些概念，那么TODO List項目就是一個很好的第一個項目，例如http://www.todobackend.com/的網站可以向您展示各種不同的后端和前端中的各種TODO項目。

使用AngularJS更新JSON數據

問題描述

1 個解決方案

解決方案1
4 已采納 2015-08-12 05:08:06

使用AngularJS更新JSON數據

問題描述

1 個解決方案

解決方案1 4 已采納 2015-08-12 05:08:06

解決方案1
4 已采納 2015-08-12 05:08:06