Клієнт-серверна взаємодія

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)...

Типи запитів:

  • HEAD *
  • GET
  • POST
  • PUT *
  • DELETE *
  • ...

Відповідь (HTTP Response)

Сервер може повернути дані в різних форматах:

  • eXtensible Markup Language (XML)
  • Javascript Object Notation (JSON)

Основні статус коди:

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: Angular сервіс для зв'язку з сервером за допомогою HTTP протокола
  • Операція є асинхронним за своєю природою

 

  • $http сервіс повертає проміс:

$http(

    {  method: ‘GET’,

        url: ‘/books’

    })
    .then(

      function() { . . . },

      function() { . . .}

     );

  • Доступні методи:

$http.get(), $http.put(), $http.post(), $http.delete() ...

$http сервіс

Відповідь (HTTP Response)

Response:

  • response.data: текст/об'єкт, що містить тіло повідомлення
  • response.status: статус код
  • response.headers: хідери
  • response.config: конфігурація об'єкта
  • response.statusText: HTTP статус текст відповіді
.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 в явному вигляді
  • Використання структури директорій, як ідентифікатори URI
  • Передача з використанням XML, JavaScript Object Notation (JSON) 

Іменування ресурсів

  • REST використовує URI для ідентифікації ресурсів

HTTP: //www.example.com/books/
- HTTP: //www.example.com/books/123
- HTTP: //www.example.com/authors/
- HTTP: //www.example.com/authors/456

  • Рухаючись по URL ми проходимо шлях від більш загального до конкретного
  • Структура каталогів для ідентифікації ресурсів

Зв'язок з CRUD операціями

  • HTTP GET  ==  READ
  • HTTP POST  == CREATE
  • HTTP PUT  == UPDATE
  • HTTP DELETE == DELETE

HTTP PUT, HTTP POST, HTTP DELETE

  • HTTP POST створює ресурс

– POST http://www.example.com/books/
• Content: {...}

  • HTTP PUT оновлює ресурс

– PUT http://www.example.com/books/123
• Content: { …}

  •  HTTP DELETE видаляє ресурс

– 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>

AngularJS: Json-server. $http. $resource. Error handling.

By Ievgen Liubarshchuk

AngularJS: Json-server. $http. $resource. Error handling.

AngularJS: Json-server. $http. $resource. Error handling.

  • 850
Loading comments...

More from Ievgen Liubarshchuk