Javascript Object Notation (JSON)
{"markers": [
{
"point":new GLatLng(40.266044,-74.718479),
"homeTeam": "Lawrence Library",
"awayTeam":"LUGip",
"markerImage":"images/red.png",
},
{
"point":new GLatLng(40.211600,-74.695702),
"homeTeam":"Hamilton Library",
"awayTeam":"LUGip HW SIG",
"markerImage":"images/white.png",
},
] }
Запит (Request)
var req = { method: 'POST', url: 'http://example.com', headers: { 'Content-Type': undefined }, data: { test: 'test' } } $http(req)...
Типи запитів:
Відповідь (HTTP Response)
Сервер може повернути дані в різних форматах:
Основні статус коди:
200 Вдало
201 Створено
301 Переміщений на постійній основі
304 Відповідь сервера не змінено
400 Незрозумілий синтаксис запиту
401 Необхідна авторизація
403 Недостатньо прав, відхилено
404 Не знайдено
500 Внутрішня помилка серверу
505 HTTP версія не підтримується
json-server -v
npm install -g json-server
json-server --watch db.json
http://localhost:3000/books
Angular $http
$http(
{ method: ‘GET’,
url: ‘/books’
})
.then(
function() { . . . },
function() { . . .}
);
$http.get(), $http.put(), $http.post(), $http.delete() ...
$http сервіс
Відповідь (HTTP Response)
Response:
.constant("baseURL","http://localhost:3000/")
.service('booksService', ['$http','baseURL', function($http, baseURL) {
$http.get(baseURL + "books");
$http.get(baseURL + "books/" + id);
$scope.books = {};
booksService.getBooks()
.then(
function(response) {
$scope.books = response.data;
}
);
$scope.book = {};
booksService.getBook( parseInt($stateParams.id, 10) )
.then(
function(response) {
$scope.book = response.data;
}
);
$scope.showBooksFilter = false;
$scope.errorMessage = "Loading content...Please wait";
function(response) {
$scope.errorMessage = "Error: " + response.status + " " + response.statusText;
}
<div class="col-lg-12 col-md-12" >
<h4 ng-if="!showBooksFilter">
{{errorMessage}}
</h4>
</div>
Representational State Transfer (REST)
Основні принципи проектування:
Іменування ресурсів
HTTP: //www.example.com/books/
- HTTP: //www.example.com/books/123
- HTTP: //www.example.com/authors/
- HTTP: //www.example.com/authors/456
Зв'язок з CRUD операціями
HTTP PUT, HTTP POST, HTTP DELETE
– POST http://www.example.com/books/
• Content: {...}
– PUT http://www.example.com/books/123
• Content: { …}
– DELETE http://www.example.com/books/456
<script src="vendor/angular-resource/angular-resource.min.js"></script>
this.booksResource = function() {
return $resource(baseURL + "books/:id", {id:'@id'},
{'update':{method:'PUT'},'delete':{method:'DELETE'}} );
}
$scope.books = booksService.booksResource().query();
$scope.book = booksService.booksResource().get({id:parseInt($stateParams.id,10)});
$scope.showUpdateForm = true;
$scope.viewUpdateForm = function() {
$scope.showUpdateForm = !$scope.showUpdateForm;
$scope.newBook = $scope.book;
}
$scope.updateBook = function() {
var id = parseInt($scope.newBook.id,10);
$scope.newBook.id = id;
booksService.booksResource().update({id:id},$scope.newBook);
$scope.showUpdateForm = !$scope.showUpdateForm;
}
$scope.deleteBook = function() {
booksService.booksResource().delete({id:$scope.book.id});
$state.go('app.books');
}
booksService.booksResource().save($scope.newBook);
<button type="button" class="btn btn-warning" ng-click="viewUpdateForm()">Update</button>
<button type="button" class="btn btn-danger" ng-click="deleteBook()">Delete</button>
<p></p>
<div class="well well-lg" uib-collapse="showUpdateForm">
<form class="form-horizontal" name="bookForm" ng-submit="updateBook()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : bookForm.bookName.$error.required && !bookForm.bookName.$pristine }">
<label for="bookName" class="col-sm-2 control-label">Book Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="bookName" name="bookName" placeholder="Enter Book Name" ng-model="newBook.name" required>
<span ng-show="bookForm.bookName.$error.required && !bookForm.bookName.$pristine" class="help-block">Your Book name is required.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : bookForm.bookLabel.$error.required && !bookForm.bookLabel.$pristine }">
<label for="bookLabel" class="col-sm-2 control-label">Book Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="bookLabel" name="bookLabel" placeholder="Enter Book Label" ng-model="newBook.label" required>
<span ng-show="bookForm.bookLabel.$error.required && !bookForm.bookLabel.$pristine" class="help-block">Your Book label is required.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : bookForm.bookPrice.$error.required && !bookForm.bookPrice.$pristine }">
<label for="bookPrice" class="col-sm-2 control-label">Book Price</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="bookPrice" name="bookPrice" placeholder="Enter Book Price" ng-model="newBook.price" required>
<span ng-show="bookForm.bookPrice.$error.required && !bookForm.bookPrice.$pristine" class="help-block">Your Book price is required.</span>
</div>
</div>
<div class="form-group">
<label for="bookDescription" class="col-sm-2 control-label">Your Book description</label>
<div class="col-sm-10">
<textarea class="form-control" rows="12" ng-model="newBook.description">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="bookForm.$invalid">Add Book</button>
</div>
</div>
</form>
</div>