<!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" 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. .
小伙看你根骨奇佳,潛力無限,來學PHP伐。
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. 想保存數(shù)據的話,post的接口需要有對應的代碼邏輯進行文件操作才行
.
Publiez le code de traitement des données json sur le backend, cool?!