angular:angularjs:servisy: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
<code javascript>
<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>
</code>
{{ :angular:angularjs:сервисы:ajax1.png?400 |}}

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

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


<code javascript>
<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>
</code>

{{ :angular:angularjs:сервисы:ajax2.png?600 |}}

====Работа с xml====

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

<code javascript>
<!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>
</code>


xmlData.xm
<code xml>
<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>
</code>

{{ :angular:angularjs:сервисы:ajax1.png?400 |}}

====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 ответа и возвращает преобразованную (по умолчанию десериализованую) версию.

<code javascript>
<!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>
</code>
===transformRequest===

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

<code javascript>
<!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>
</code>

====$httpProvider====

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

<code javascript>
<!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>
</code>

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

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

<code javascript>
<!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>
</code>
Инструменты пользователя

Инструменты сайта

Инструменты страницы
