<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<p class="container">
<p class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</p>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
</ul>
</p>
</nav>
</header>
<p class="container">
<p ng-controller="mainController">
<p>
<label>What is your twitter handle?</label>
<input type="text" ng-model="handle" />
</p>
<p class="alert" ng-class="{ 'alert-warning': handle.length < characters, 'alert-danger': handle.length > characters }" ng-if="handle.length !== characters">
<p ng-show="handle.length < characters">
You have less than 5 characters!
</p>
<p ng-show="handle.length > characters">
You have more than 5 characters!
</p>
</p>
<hr />
<h1>twitter.com/{{ lowercasehandle() }}</h1>
<h3>Rules</h3>
<ul>
<li ng-repeat="rule in rules">
{{ rule.RuleName }}
</li>
</ul>
Add rule: <input type="text" ng-model="newRule" /><a href="#" class="btn btn-default" ng-click="addRule()">Add</a>
</p>
</p>
</body>
</html>//app.js
var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope', '$filter','$http',function ($scope, $filter,$http) {
$scope.handle = '';
$scope.characters = 5;
$scope.lowercasehandle = function () {
return $filter('lowercase')($scope.handle);
}
$http.get('/angularjs/http/api.json')
.success(function(result){
$scope.rules = result;
})
.error(function (data,status) {
console.log(data);
})
$scope.newRule = '';
$scope.addRule = function () {
$http.post('/angularjs/http/api', { newRule: $scope.newRule })
.success(function (result) {
console.log(result);
$scope.rules = result;
$scope.newRule = '';
})
.error(function (data, status) {
console.log(data);
});
};
}]);//api.json
[
{
"ID":1,
"RuleName":"Must be 5 characters"
},{
"ID":2,
"RuleName":"Must be 5 characters"
},{
"ID":3,
"RuleName":"Must be 5 characters"
}
]能get到数据，但是post的时候没有更新json数据，和Accept:application/json, text/plain, */* 这个有关吗？该怎么解决。。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
가져올 때는 로컬 서버를 사용하거나 서버 없이 json 파일을 직접 읽어 데이터를 가져올 수 있습니다. 하지만 페이지에 변경된 내용을 저장하려면 이를 처리하기 위한 서버 측 코드가 필요합니다. Angular 자체 $http에는 파일 작성 기능이 없습니다.
想保存数据的话，post的接口需要有对应的代码逻辑进行文件操作才行.백엔드에서 json 데이터를 처리하기 위한 코드를 게시하세요. 멋지네요!