logo angularJS

Aprendiendo AngularJS (VII). El servicio $http

Para aprender cómo funciona el servicio $http de AngularJS vamos a pedirte que hagas varias cosas.

En principio tienes que crear una carpeta con dos ficheros. Uno se va a llamar main.htm y el segundo datos.htm.

carpetaangular

El fichero main.htm contendrá el siguiente código:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myfpschoolApp" ng-controller="myfpschoolCtrl">
<p>Data : {{contenido}}</p>
<p>Status (código) : {{codigostatus}}</p>
<p>Status (texto) : {{statustexto}}</p>
<script>
var app = angular.module(‘myfpschoolApp’, []);
app.controller(‘myfpschoolCtrl’, function($scope, $http) {
$http.get(“datos.htm”)
.then(function(response) {
$scope.contenido = response.data;
$scope.codigostatus = response.status;
$scope.statustexto = response.statusText;
});
});
</script></body>
</html>

En el fichero datos.html puedes escribir lo que quieras. El único propósito es que tu programa pueda leer los datos del fichero, luego no importa su contenido. Mi fichero contiene lo siguiente:

estos son los datos que tiene que leer el servicio http de AngularJS

Una vez que tengas estos ficheros creados ejecuta (haz doble click) el fichero main.htm y obtendrás el siguiente resultado:

resultadoangular

Como puedes observar hemos hecho uso de lo anteriormente aprendido en la entrega anterior con los servicios en AngularJS.

En nuestro controlador hacemos uso del servicio $http con el siguiente comando:


app.controller('myfpschoolCtrl', function($scope, $http) {

Realizamos una llamada al método get() el cual accederá a la página del servidor local datos.htm. En el caso que el resultado sea positivo, almacena en el objeto $scope tanto los datos como si el comando se ha ejecutado con éxito (status).

$http.get("datos.htm")
.then(function(response) {
$scope.contenido = response.data;
$scope.codigostatus = response.status;
$scope.statustexto = response.statusText;
});

Además del método get() el servicio $http tiene otros muchos métodos como son head(),delete(),jsonp(),patch(),post() y put().

Ejercicio 7.1.
Ejecuta el código anterior y prueba que funciona.
Ejercicio 7.2.
Explica qué hacen los método anteriores y pon un ejemplo de dos de ellos.
Ejercicio 7.3.
Prueba a cambiar el acceso a datos.htm por otra URL externa al servidor.
¿Funciona? ¿Por qué?
¿Se puede mejorar el código anterior?En el código anterior si te das cuenta no se controla qué hacer si falla la llamada. Además podríamos hacer una llamada al servicio $http con un objeto como argumento. Echa un vistazo al siguiente código y valora si mejora la programación con el mismo:

$http({
method : "GET",
url : "datos.htm"
}).then(function mySucces(response) {
$scope.contenido = response.data;
$scope.codigostatus = response.status;
$scope.statustexto = response.statusText;
}, function myError(response) {
$scope.contenido = "ERROR";
$scope.codigostatus = response.status;
$scope.statustexto = response.statusText;
});

Ejercicio 7.4.
Utiliza el código anterior para mejorar nuestro script.
¿Funciona?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>