 |
|
Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: AngularJS Services (Serviços AngularJS) |
Aprenda a ler dados de um servidor remoto usando o serviço $http do AngularJSQuantidade de visualizações: 1575 vezes |
|
O serviço $http do AngularJS pode ser usado quando precisamos ler informações vindas de um servidor remoto. Esta comunicação é feita por meio do objeto XMLHttpRequest ou via JSONP. A funcionalidade deste serviço é semelhante às requisições AJAX do jQuery. Vamos ver um exemplo no qual enviamos dois números para uma página PHP e ela nos retorna a soma destes números como uma resposta JSON. Primeiro veja o código PHP que gera o JSON:
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header('Content-type: application/json');
$numero1 = $_GET["numero1"];
$numero2 = $_GET["numero2"];
$soma = $numero1 + $numero2;
// vamos gerar o JSON com a soma
$res = json_encode(array("soma" => $soma));
// vamos retornar o JSON para a página que chamou esta
echo $res;
?>
Salve este código como somar.php e experimente chamá-la no seu navegador fornecendo os dois valores a serem somados. Veja: http://localhost/somar.php?numero1=37&numero2=3 Se tudo correr bem, o seguinte resultado será exibido: {"soma":40} Aqui eu usei PHP no servidor remoto, mas você pode usar Java, Perl, Node.js, ASP.NET, etc, desde que o retorno seja JSON. Agora vamos à aplicação AngularJS. Veja o código completo:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('MinhaApp', []);
// vamos criar o controller HttpTesteController
app.controller('HttpTesteController', function($scope, $http){
// vamos fazer a conexão remota
$http.get("http://localhost/somar.php?numero1=37&numero2=3")
.then(function(response){
$scope.resultado = response.data.soma;
}
);
});
</script>
<div ng-app="MinhaApp" ng-controller="HttpTesteController">
<h1>A soma dos valores é: {{resultado}}</h1>
</div>
</body>
</html>
Abra esta página no seu navegador web. Você deverá ver um resultado parecido com: A soma dos valores é: 40 Note que usamos o método get() do serviço $http para fazer uma requisição GET para a página PHP. Em dicas dessa seção mostro como fazer requisições POST e também tratar os possíveis erros que podem ocorrer nesta operação. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
|
JavaScript - Como retornar apenas os três primeiros elementos de um array em JavaScript usando a função slice() do objeto Array |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
