Angularjs. Сервисы. Сервис $http
Сегодня мы рассмотрим сервисы в angular на примере сервиса $http. $http — один из самых мощных и важных сервисов в angular. Он позволяет разработчику выполнять запросы к серверу, а также кросс доменные запросы.
Сервисы в некотором случае можно считать аналогами встроенных объектов в javascript. Например, уже упомянутый сервис $http является аналогом встроенного в javascript объекта XMLHttpRequest (XHR). Но существенная разница в том, что в angular сервисы не являются глобальными объектами, как это есть в javascript.
Сервис $http имеет несколько методов, которые иллюстрируют типа запросов на сервер:
Сервис $http имеет несколько методов, которые иллюстрируют типа запросов на сервер:
- $http.get(url, config)
- $http.post(url, data, config)
- $http.put(url, data, config)
- $http.delete(url, config)
- $http.jsonp(url, config)
- $http.head(url, config)
- $http.patch(url, data, config)
Соотвественно, каждый из этих методов принимает 2 или 3 параметра: url — адрес, куда отправляется запрос; data — отправляемые данные; config — дополнительные настройки для запроса.
Необязательно для запроса вызывать соответствующий метод. Можно выполнить запрос вторым способом — вызвать $http как функцию, передав в качестве параметра конфигурацию запроса. В коде урока приведены оба способа.
Отмечу, что при помощи $http можно выполнять и кросс-доменные запросы. Для этого $http имеет метод jsonp.
Подробно про сервис $http можно почитать здесь
В качестве домашнего задания прошу вас сохранить данные с формы нашего приложения, то есть выполнить post запрос.
Код урока
<!DOCTYPE html>
<html ng-app="playersApp">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
/*input.ng-invalid-required {
border: 1px solid red;
}*/
</style>
</head>
<body>
<div class="container" ng-controller="playerCtrl">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" name="addPlayerForm" novalidate>
<legend>Список футболистов</legend>
<div class="form-group" ng-class="{'has-error': addPlayerForm.pName.$error.required && addPlayerForm.pName.$dirty}">
<label for="playerName" class="col-sm-4 control-label">Имя игрока</label>
<div class="col-sm-8">
<input type="text" required name="pName" ng-model="playerName" class="form-control" id="playerName" placeholder="Имя игрока">
<span class="error" ng-show="addPlayerForm.pName.$dirty && addPlayerForm.pName.$error.required">Введите имя игрока!</span>
</div>
</div>
<div class="form-group">
<label for="playerTeam" class="col-sm-4 control-label">В какой команде играет</label>
<div class="col-sm-8">
<input type="text" name="pTeam" ng-model="playerTeam" class="form-control" id="playerTeam" placeholder="В какой команде играет">
</div>
</div>
<div class="form-group" ng-class="{'has-error': addPlayerForm.pCountry.$error.required && addPlayerForm.pCountry.$dirty}">
<label for="playerCountry" class="col-sm-4 control-label">Гражданство</label>
<div class="col-sm-8">
<input type="text" required name="pCountry" ng-model="playerCountry" class="form-control" id="playerCountry" placeholder="Гражданство">
<span class="error" ng-show="addPlayerForm.pCountry.$dirty && addPlayerForm.pCountry.$error.required">Игрок не может быть без гражданства!</span>
</div>
</div>
<div class="form-group">
<label for="playerGoals" class="col-sm-4 control-label">Сколько голов забил</label>
<div class="col-sm-8">
<input type="text" name="pGoals" ng-model="playerGoals" class="form-control" id="playerGoals" placeholder="Сколько голов забил">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<button ng-disabled="addPlayerForm.pName.$invalid || addPlayerForm.pCountry.$invalid" ng-click="addPlayer(playerName, playerTeam, playerCountry, playerGoals)" class="btn btn-default">Добавить</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" name="pSelect" ng-model="selectPlayers" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th ng-click="sortByName('name')">Игрок</th>
<th>Команда</th>
<th>Национальность</th>
<th>Сколько голов забил</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in players | filter:selectPlayers">
<td>{{player.name}}</td>
<td>{{player.team}}</td>
<td>{{player.country}}</td>
<td>{{player.goals}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="angular.js"></script>
<script>
var app = angular.module("playersApp", []);
var model = [];
app.controller("playerCtrl", function($scope, $http){
$scope.players = model;
$scope.orderByFunction = function(player){
return parseInt(player.goals);
};
$scope.addPlayer = function(playerName, playerTeam, playerCountry, playerGoals) {
$scope.players.push({name: playerName, team: playerTeam, country: playerCountry, goals: playerGoals});
};
$scope.sortByName = function(p) {
$scope.nameSorting = p;
};
/*$http({
method: "GET",
url: "players.json"
}).then(function successResp(response) {
$scope.players = response.data.players;
console.log($scope.players);
}, function errorResp(response) {
console.log(response);
});*/
$http.get("players.json").then(
function successResp(response) {
$scope.players = response.data.players;
console.log($scope.players);
}
)
});
</script>
</body>
</html>
Код урока (пример кросс-доменного запроса к api VK)
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body ng-controller="vkCtrl">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("test", []);
app.controller("vkCtrl", function($http, $scope, $sce) {
/*$http({
url: 'https://api.vk.com/method/users.get',
method: "JSONP",
responseType: "json",
params: {
callback: "JSON_CALLBACK",
"user_id": 90759251,
"v": "5.60"
}
})
.success(function(data, status, headers, config) {
console.log(data.response);
}).error(function(data, status, headers, config) {
console.log("error" + data);
});*/
$http.jsonp("https://api.vk.com/method/users.get?user_ids=90759251&fields=bdate&v=5.68&callback=JSON_CALLBACK")
.then(function(data){
console.log(data);
});
});
</script>
</body>
</html>
0 Комментариев