Сервис $http представляет ключевой сервис Angular, предназначенный для взаимодействия с удаленным HTTP-сервером через объект XMLHttpRequest или через JSONP. Посмотрим на примере, модифицировав приложение из прошлой темы. Во-первых, выделим все необходимые нам данные в какой-то внешний файл, например, question.json, который будет находиться рядом со страницей index.html. Он будет содержать данные в формате json:
{
"question":{
"text": "Какой js-фреймворк лучше использовать?",
"author": "Иван Иванов",
"date": "20/10/2013",
"answers":
[{
"text": "AngularJS!",
"author": "Вова Сидоров",
"date": "20/10/2013",
"rate":2
},{
"text": "AngularJS лучше всех",
"author": "Олег Кузнецов",
"date": "21/10/2013",
"rate":3
}]
}
}
Теперь используем в контроллере QuestionController сервис $http:
questApp.controller('QuestionController',
function QuestionController($scope, $http){
$http({method: 'GET', url: 'question.json'}).
then(function success(response) {
$scope.question=response.data.question;
});
$scope.voteUp = function (answer){
answer.rate++;
};
$scope.voteDown = function (answer){
answer.rate--;
};
}
)
Что тут надо отметить? Во-первых, если в прошлой теме про сервисы передался сделанный нами сервис в функцию QuestionController, то теперь в качестве второго параметра мы передаем в нее сервис $http.
Во-вторых, надо отметить синтаксис использования сервиса:
$http({method: 'GET', url: 'question.json'}).
then(function success(response) {
$scope.question=response.data.question;
});
Для обращения к определенному ресурсу (в данном случае к файлу question.json) сервис $http использует метод get,
который выполняет GET-запрос протокола http. Ресурсом необязательно должен выступать файл в формате json, это может быть и любой ресурс, который передает клиенту объекты в формате json, например, веб-серсис на ASP.NET,
скрипт на PHP, Ruby и т.д.
Далее идет функция then, в которую в качестве первого параметра передается функция, которая срабатывает, если обращение к ресурсу прошло
успешно - здесь мы берем из полученного объекта data, который содержит весь вышеопределенный файл в формате json и выбираем в нем объект верхнего уровня question. Затем этот объект
передаем в представление.
Таким образом, данные передаются в представление, а саму страницу index.html при этом мы можем оставить такой же, как и в прошлой теме:
<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div ng-controller="QuestionController">
<div class="content">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers | orderBy:sortparam" class="answer">
<div class="vote">
<a class="vote-up" ng-click="voteUp(answer)"></a>
<span class="rate">{{answer.rate}}</span>
<a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/QuestionController.js"></script>
</body>
</html>
Немного изменим пример. Пусть у нас данные загружаются по нажатию кнопки:
questApp.controller('QuestionController',
function QuestionController($scope, $http){
$scope.loaded=false;
$scope.load = function (){
$http({method: 'GET', url: 'question.json'}).
then(function success(response) {
$scope.question=response.data.question;
$scope.loaded=true;
});
};
$scope.voteUp = function (answer){
answer.rate++;
};
$scope.voteDown = function (answer){
answer.rate--;
};
}
)
А в блоке с данными создадим кнопку для загрузки данных:
<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div ng-controller="QuestionController">
<button ng-click="load()">Загрузить</button>
<div class="content" ng-show="loaded">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers | orderBy:sortparam" class="answer">
<div class="vote">
<a class="vote-up" ng-click="voteUp(answer)"></a>
<span class="rate">{{answer.rate}}</span>
<a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/QuestionController.js"></script>
</body>
</html>
А весь блок с данными теперь перемешен в отдельный элемент div, видимостью которого управляет объект loaded.