<!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, */* 這個有關嗎？該怎麼解決。 。
get的時候隨便一個本地的伺服器或是不用伺服器直接讀取json檔案就能得到資料。但是如果你想把頁面上更改的內容保存回去，就需要服務端程式碼來處理，angular 本身的$http是沒有進行文件寫入的功能的。
想保存数据的话，post的接口需要有对应的代码逻辑进行文件操作才行。貼後端處理json資料的程式碼吧，騷年！