Для простых бэкэндских взаимодействий, $ 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. поэтому каждый пользователь в массиве будет отображаться как
- Разрушите элемент на отдельные линии, чтобы имитировать список контактов:
Name: {{ user.name }}
Email: {{ user.email }}
Website: {{ user.website }}
Как вы можете видеть, вам не нужно отображать все свойства в объекте пользователя. Вы можете выбрать, что отображать и настроить его для использования в случае использования.
Другие учебники, которые вас могут быть заинтересованы в:
- Учебник AmCharts: интеграция в угловые 2
- Как использовать разрешение в угловых 2 маршрута
- Как настроить ваши первые Rails REST API