<!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"
}
]Les données peuvent être obtenues, mais les données json ne sont pas mises à jour lors de la publication. Est-ce lié à Accept:application/json, text/plain, */* ? Comment le résoudre. .
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Lors de l'obtention, vous pouvez obtenir les données en utilisant n'importe quel serveur local ou en lisant directement le fichier json sans serveur. Mais si vous souhaitez enregistrer le contenu modifié sur la page, vous avez besoin d'un code côté serveur pour le gérer. Le $http d'Angular n'a pas pour fonction d'écrire des fichiers.
想保存数据的话，post的接口需要有对应的代码逻辑进行文件操作才行.Publiez le code de traitement des données json sur le backend, cool !