Рубрики
Без рубрики

Получение данных из API

Служба $ HTTP – это основная угловая служба, которая облегчает связь с удаленными HTTP-серверами через объект XMLHTTPRECEST браузера или через JSONP. Давайте лучше понять эту услугу, как мы учимся получать данные из API.

Автор оригинала: Sasha.

Для простых бэкэндских взаимодействий, $ http Модуль позволяет нам делать простые HTTP вызовы на конечную точку API. $ http Может использоваться для небольших, разовых HTTP-запросов. $ http Сервис – это тональная угловая служба, которая облегчает связь с удаленными HTTP-серверами через объект XMLHTTPRECEST браузера или через JSONP.

Направления

  • Создать Httpservice Сервис в app.js с функцией GetPost это сделает $ http Позвоните, чтобы получить сообщение:
.controller('AppCtrl', function($scope) {
})

.service('HttpService', function($http) {
  return {
    getPost: function() {
      // $http returns a promise, which has a then function, which also returns a promise.
      return $http.get('http://jsonplaceholder.typicode.com/posts/1')
       .then(function (response) {
       // In the response, resp.data contains the result. Check the console to see all of the data returned.
       console.log('Get Post', response);
       return response.data;
      });
    }
  };
});

То $ http. Сервис – это функция, которая принимает один аргумент – объект конфигурации – который используется для генерации HTTP-запроса и возвращает обещание. Сервер JSON в jsonplaceholder.com вернется один пост. Вы можете увидеть этот ответ в браузере, перейдя на URL http://jsonplaceholder.typicode.com/posts/1 .

  • Вставлять Httpservice В AppCTRL Контроллер:
.controller('AppCtrl', function($scope, HttpService) {
  • Позвоните в GetPost Функция из AppCTRL контроллер для того, чтобы установить ответ на объем:
.controller('AppCtrl', function($scope, HttpService) {
  HttpService.getPost()
    .then(function(response) {
    $scope.post = response;
  });
})
  • Добавить
    включить {{post.title}} , который показывает ответ:
The only post returned is {{ post.title }}

Если вы измените {{ Заголовок поста }} к {{ Почта }} , вы увидите, что все возвращено объектом JSON.

  • Добавьте функцию, которая получает пользователям из пример API к Httpservice :
.service('HttpService', function($http) {
  return {
    getPost: function() {
      // $http returns a promise, which has a then function, which also returns a promise.
      return $http.get('http://jsonplaceholder.typicode.com/posts/1')
        .then(function (response) {
        // In the response, resp.data contains the result. Check the console to see all of the data returned.
        console.log('Get Post', response);
        return response.data;
      });
    },
    getUsers: function() {
      // $http returns a promise, which has a then function, which also returns a promise.
      return $http.get('http://jsonplaceholder.typicode.com/users')
        .then(function(response) {
        // In the response, resp.data contains the result. Check the console to see all of the data returned.
        console.log('Get Users', response);
        return response.data;
      });
    }
  }
});
  • Позвоните в GetUsers Функция в AppCTRL контроллер после GetPost Функция звонка:
HttpService.getPost()
  .then(function(response) {
   $scope.post = response;
 });

HttpService.getUsers()
  .then(function(response) {
   $scope.users = response;
 });

Обратите внимание, что не сильно отличается между этим вызовом и предыдущим. Единственные различия являются: путь к файлу, которое мы вызываем, ответ возвращается в качестве массива, а переменная, которую мы сохраняем от ответ. пользователи Отказ Вы также можете просмотреть этот ответ в браузере, открыв URL http://jsonplaceholder.typicode.com/users .

  • Добавьте следующее
  • В :
The only post returned is {{ post.title }}
  • {{ user }}

Мы зацикливаемся через ответ, используя NG-Repeat. поэтому каждый пользователь в массиве будет отображаться как

  • в списке.
    • Разрушите элемент на отдельные линии, чтобы имитировать список контактов:
  • Username: {{ user.username }}
    Name: {{ user.name }}
    Email: {{ user.email }}
    Website: {{ user.website }}
  • Как вы можете видеть, вам не нужно отображать все свойства в объекте пользователя. Вы можете выбрать, что отображать и настроить его для использования в случае использования.

    Другие учебники, которые вас могут быть заинтересованы в:

    • Учебник AmCharts: интеграция в угловые 2
    • Как использовать разрешение в угловых 2 маршрута
    • Как настроить ваши первые Rails REST API