angular:angularjs:servisy:http

Содержание

сервис $http

сервис $http

Для того чтобы использовать AJAX следует все голишь запросить сервис $http который позволяет работать с AJAX, далее следует вызвать один из методов которые предоставляет этот сервис(в зависимости от типа запроса который вы хотите сформировать) затем нужно определить метод который будет выполнятся при успешном запросе и который будет выполнятся если запрос не удался (при необходимости). Так же для того чтобы вы могли получить доступ к файлу с расширением *json следует внести изменения в файл web.config
Методы сревиса $http

get(url, config) выполняет GET запрос по указанному URL, config - конфигурационный объект.
post(url, data, config) выполняет POST запрос по указанному URL, data - данные которые передаются в запросе, config - конфигурационный объект.
delete(url, config) выполняет DELETE запрос по указанному URL, config - конфигурационный объект.
put(url, data, config) выполняет PUT запрос по указанному URL, data - данные которые передаются в запросе, config - конфигурационный объект.
head(url, config) выполняет HEAD запрос по указанному URL, config - конфигурационный объект.
jsonp(url, config) выполняет GET запрос для получения в качестве ответа JavaScript сценария который затем будет выполнен(работа с кроссдоменными запросами JSONP)

AngularJS использует технологию promise, суть этой технологии заключается в том что при выполнении асинхронного запроса после его окончания будет выполнен метод который указан в цепочке. Например метод success является promise так как AJAX запрос асинхронный, и этот метод будет выполнен после того как запрос получит ответ от сервера.
Ниже представлен список методов доступных для манипулирования данными полученными в качестве ответа на запрос от сервера

success(fn) вызывает функцию которая определена в аргументах когда запрос выполнен успешно
error(fn) вызывает функцию которая определена в аргументах когда запрос выполнен с ошибкой
then(fn, fn) регистрирует функцию success и функцию error

<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $http) {
            //$http сервис позволяет работать с ajax
            $scope.getFruits = function () {
                $http.get("../data.json").success(function (responseData) {
                    //вызвав метод get сервиса выполняем GET запрос
                    $scope.fruits = responseData;
                    //полученные данные записываем в свойство products на $scope, далее AngularJS самостоятельно обновит все привязки
                })
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div id="tasksPanel" class="panel panel-primary" ng-controller="studyCtrl">
        <div class="panel-heading">
            <div class="panel-title">
                <button class="btn btn-success" ng-click="getFruits()">
                    <h2>Get Fruits!</h2>
                </button>
            </div>
        </div>
        <div id="panel" class="panel-body">
            <div class="row">
                <div class="col-sm-4 col-md-4" ng-repeat="fruit in fruits">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title text-center">
                                <h3>{{fruit.name}}</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h3>Cost : {{fruit.price | currency}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Использование then

Использование then метода дает ряд преимуществ, помимо того что вы можете в одном методе определить две функции, в качестве аргумента этим функциям приходит promise объект который содержит дополнительную информацию о запросе:

data содержит данные запроса
status содержит статус ответа от сервера
headers содержит функцию которая позволяет получить заголовок по его имени
config конфигурационный объект который используется для выполнения запроса

<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $http) {
            $scope.getFruits = function () {
                $http.get("../data.json").then(function (response) {
                    console.log("Status: " + response.status);
                    console.log("Type: " + response.headers("content-type"));
                    console.log("Length: " + response.headers("content-length"));
                    $scope.fruits = response.data;
                })
            }
        });
    </script>
</head>
    <body ng-controller="studyCtrl">
        <div id="tasksPanel" class="panel panel-primary" ng-controller="studyCtrl">
            <div class="panel-heading">
                <div class="panel-title">
                    <button class="btn btn-success" ng-click="getFruits()">
                        <h2>Get Fruits!</h2>
                    </button>
                </div>
            </div>
            <div id="panel" class="panel-body">
                <div class="row">
                    <div ng-hide="fruits.length">
                        <h3 class="text-center">No Data</h3>
                    </div>
                    <div class="col-sm-4 col-md-4" ng-repeat="fruit in fruits">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <div class="panel-title text-center">
                                    <h3>{{fruit.name}}</h3>
                                </div>
                            </div>
                            <div class="panel-body">
                                <h3>Cost : {{fruit.price | currency}}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Работа с xml

для работы с xml можно так же использовать jqLite, в данном случае используется метод find() который возвращает jqLite объект который содержит найденные элементы

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $http) {
            $scope.getFruits = function () {
                $http.get("../xmlData.xml").then(function (response) {
                    $scope.fruits = [];
                    var sourceElems = angular.element(response.data.trim()).find("fruit");
                    //для работы с xml можно так же использовать jqLite, в данном случае используется метод find() который возвращает
                    //jqLite объект который содержит найденные элементы
                    for (var i = 0; i < sourceElems.length; i++) {
                        var elem = sourceElems.eq(i);
                        //метод eq() используется так как мы работаем с объектом
                        $scope.fruits.push({
                            name: elem.attr("name"),                            
                            price: elem.attr("price")
                        });
                    }
                });
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div id="tasksPanel" class="panel panel-primary" ng-controller="studyCtrl">
        <div class="panel-heading">
            <div class="panel-title">
                <button class="btn btn-success" ng-click="getFruits()">
                    <h2>Get Fruits!</h2>
                </button>
            </div>
        </div>
        <div id="panel" class="panel-body">
            <div class="row">
                <div ng-hide="fruits.length">
                    <h3 class="text-center">No Data</h3>
                </div>
                <div class="col-sm-4 col-md-4" ng-repeat="fruit in fruits">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title text-center">
                                <h3>{{fruit.name}}</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h3>Cost : {{fruit.price | currency}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

xmlData.xm

<fruits>
  <fruit name="Orange"  price="1.20"  />
  <fruit name="Apple" price="2.42" />
  <fruit name="Melon"   price="2.02"  />
  <fruit name="Pear"   price="20.45" />
  <fruit name="Watermelon" price="17.93" />
  <fruit name="Coco"  price="14.01" />
  <fruit name="Banana" price="11.34" />
  <fruit name="Tangerine"  price="12.93" />
</fruits>

config

Как вы уже видели все типы запросов которые можно выполнить с помощью сервиса $http поддерживают в качестве второго параметра конфигурационный объект, с помощью которого можно передать дополнительные данные в запросе:

data содержит данные которые будут переданы в запросе, если в качестве значения указать объект, то AngularJS автоматически сериализует его в JSON
headers используется для передачи заголовков в запросе
method устанавливает тип запроса
params позволяет передать URL параметры
timeout устанавливает время ожидания ответа от сервера
transformRequest используется для работы с запросом перед его посылкой на сервер
transformResponse используется для манипуляции с ответом после того как он пришел от сервера
url устанавливает URL для запроса
withCredentials если в качестве параметра указать true то в запрос будут включены cookies для аутентификации
xsrfHeaderNamexsrfCookieName это свойство используется для ответа на кроссдоменные зарпосы

transformResponse

transformResponse – {function(data, headersGetter)|Array.<function(data, headersGetter)>} – функция преобразования или массив таких функций. Функция преобразования берет тело и заголовки http ответа и возвращает преобразованную (по умолчанию десериализованую) версию.

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>Ajax</title>    
    <script src="../angular.js"></script>    
    <link href="../bootstrap.css" rel="stylesheet" />
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $http) {
            $scope.getFruits = function () {
                var config = {
                    transformResponse: function (responseData, headers) {
                        fruits = [];
                        var elem = angular.element(responseData.trim()).find("fruit");
                        for (var i = 0; i < elem.length; i++) {
                            var fruit = elem.eq(i);
                            fruits.push({
                                name: fruit.attr("name"),                                
                                price: fruit.attr("price")
                            });
                        }
                        return fruits;                        
                    }
                }
                $http.get("../xmlData.xml", config).success(function (responseData) {
                    $scope.fruits = responseData;
                });
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div id="tasksPanel" class="panel panel-primary" ng-controller="studyCtrl">
        <div class="panel-heading">
            <div class="panel-title">
                <button class="btn btn-success" ng-click="getFruits()">
                    <h2>Get Fruits!</h2>
                </button>
            </div>
        </div>
        <div id="panel" class="panel-body">
            <div class="row">
                <div ng-hide="fruits.length">
                    <h3 class="text-center">No Data</h3>
                </div>
                <div class="col-sm-4 col-md-4" ng-repeat="fruit in fruits">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title text-center">
                                <h3>{{fruit.name}}</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h3>Cost : {{fruit.price | currency}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

transformRequest

transformRequest – {function(data, headersGetter)|Array.<function(data, headersGetter)>} – функция преобразования или массив таких функций. Функция преобразования берет тело и заголовки http запроса и возвращает преобразованную (по умолчанию сериализованую) версию.

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $http) {
            $scope.getFruits = function () {
                $http.get("../data.json").success(function (responseData) {
                    $scope.fruits = responseData;
                })
            }
            $scope.sendXmlData = function () {
                var config = {
                        headers: {
                            "content-type": "application/xml"
                        },
                        transformRequest: function (data, headers) {
                            var rootElement = angular.element("<xml>");
                            for (var i = 0; i < data.length; i++) {
                                var element = angular.element("<fruit>");
                                element.attr("name", data[i].name);                                
                                element.attr("price", data[i].price);
                                rootElement.append(element);
                            }
                            rootElement.children().wrap("<fruits>");
                            return rootElement.html();
                        }
                }
                $http.post("02_transforming_request.html", $scope.fruits, config);
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div id="tasksPanel" class="panel panel-primary" ng-controller="studyCtrl">
        <div class="panel-heading">
            <div class="panel-title">
                <button class="btn btn-success" ng-click="getFruits()">
                    <h2>Get Fruits!</h2>
                </button>
                <button class="btn btn-primary" ng-click="sendXmlData()">
                    <h2>Send Data</h2>
                </button>
            </div>
        </div>
        <div id="panel" class="panel-body">
            <div class="row">
                <div ng-hide="fruits.length">
                    <h3 class="text-center">No Data</h3>
                </div>
                <div class="col-sm-4 col-md-4" ng-repeat="fruit in fruits">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title text-center">
                                <h3>{{fruit.name}}</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h3>Cost : {{fruit.price | currency}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

$httpProvider

если вам нужно установить настройки поу молчанию для запросов с помощью $http то для этого нужно воспользоватся сервисом $httpProvider свойства $httpProvider:

defaults.headers.common определяет заголовки по умолчанию которые используются для всех запросов
defaults.headers.post определяется заголовки которые используются для POST запросов
defaults.headers.put определяется заголовки которые используются для PUT запросов
defaults.transformResponse массив функций для трансформации всех ответов
defaults.transformRequest массив функций для трансформации всех запросов
interceptors массив фабричных interceptor функций
withCredentials устанавливает для всех типов запросов настройку аутентификации

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .config(function ($httpProvider) {
            $httpProvider.defaults.transformResponse.push(function (responseData, headers) {                
                    fruits = [];
                    var fruitElems = angular.element(responseData.trim()).find("fruit");
                    for (var i = 0; i < fruitElems.length; i++) {
                        var fruit = fruitElems.eq(i);
                        fruits.push({
                            name: fruit.attr("name"),
                            category: fruit.attr("category"),
                            price: fruit.attr("price")
                        });
                    }
                    return fruits;                
            })
        })
        .controller("studyCtrl", function ($scope, $http) {
            $scope.getFruits = function () {
                $http.get("../xmlData.xml").success(function (responseData) {
                    $scope.fruits = responseData;
                });
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div id="tasksPanel" class="panel panel-primary" ng-controller="studyCtrl">
        <div class="panel-heading">
            <div class="panel-title">
                <button class="btn btn-success" ng-click="getFruits()">
                    <h2>Get Fruits!</h2>
                </button>
            </div>
        </div>
        <div id="panel" class="panel-body">
            <div class="row">
                <div ng-hide="fruits.length">
                    <h3 class="text-center">No Data</h3>
                </div>
                <div class="col-sm-4 col-md-4" ng-repeat="fruit in fruits">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title text-center">
                                <h3>{{fruit.name}}</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h3>Cost : {{fruit.price | currency}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

interceptor

interceptor(перехватчик) это некий асоциативный массив который содержит в себе функции предназначенные для перехвата запросов или ответов свойства которые содержит interceptor:

request функция будет выполнена перед запросом на сервер, в аргументах функции приходит объект config который содержит ранее упомянутые свойства
requestError функция будет вызвана если предыдущая функция перехватчик запроса сгенерировала ошибку
response функция будет выполнена когда будет получен ответ от сервера, в аргументы функции попадает объект который содержит ответ от сервера
responseError функция будет вызвана если предыдущая функция перехватчик ответа сгенерировала ошибку

<!DOCTYPE html>
<html ng-app="studyModule">
<head>    
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .config(function ($httpProvider) {
            $httpProvider.interceptors.push(function () {
                return {
                    request: function (config) {
                        config.url = "../data.json";
                        return config;
                    },
                    response: function (response) {
                        console.log("Fruits Count :" + response.data.length);
                        return response;
                    }
                }
            });
        })
        .controller("studyCtrl", function ($scope, $http) {
            $scope.getFruits = function () {
                $http.get("NotExists.xml").success(function (responseData) {
                    $scope.fruits = responseData;
                });
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div id="tasksPanel" class="panel panel-primary" ng-controller="studyCtrl">
        <div class="panel-heading">
            <div class="panel-title">
                <button class="btn btn-success" ng-click="getFruits()">
                    <h2>Get Fruits!</h2>
                </button>
            </div>
        </div>
        <div id="panel" class="panel-body">
            <div class="row">
                <div ng-hide="fruits.length">
                    <h3 class="text-center">No Data</h3>
                </div>
                <div class="col-sm-4 col-md-4" ng-repeat="fruit in fruits">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title text-center">
                                <h3>{{fruit.name}}</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h3>Cost : {{fruit.price | currency}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>