Angularjs. Сервисы. Сервис $http

Главная » Видеоуроки » JavaScript » Angularjs. Сервисы. Сервис $http
Сегодня мы рассмотрим сервисы в angular на примере сервиса $http. $http — один из самых мощных и важных сервисов в angular. Он позволяет разработчику выполнять запросы к серверу, а также кросс доменные запросы.
Сервисы в некотором случае можно считать аналогами встроенных объектов в javascript. Например, уже упомянутый сервис $http является аналогом встроенного в javascript объекта XMLHttpRequest (XHR). Но существенная разница в том, что в angular сервисы не являются глобальными объектами, как это есть в javascript.
Сервис $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 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Pin It on Pinterest

Share This