El servicio $http permite hacer peticiones AJAX al servidor. Es realmente como el objeto XMLHttpRequest o el método ajax() de JQuery. La diferencia con estos dos últimos es que está integrado con Angular como un servicio (con todas las ventajas de ellos conlleva) pero principalmente porque notifica a AngularJS que ha habido un cambio en el modelo de JavaScript y actualiza la vista y el resto de dependencias adecuadamente.

Para explicar el servicio de $http vamos a seguir con nuestro ejemplo del seguro médico en el que vamos a obtener unos datos iniciales del seguro desde el servidor para mostrarlos en el formulario. Los datos se obtienen en formato JSON desde la url datos.json. Este fichero contendrá simplemente texto en formato JSON para que podamos obtener la información del servidor. Más adelante en el curso, obtendremos los datos mediante REST desde la base de datos , pero por ahora y para aprender a usar $http será simplemente un fichero estático.

El contenido del fichero datos.json es el siguiente:

{
    "nif":"12345678Z",    
    "nombre":"Carlos",
    "ape1":"Cano",
    "edad":41,
    "sexo":"H",
    "casado":true,
    "numHijos":3,
    "embarazada":false,
    "coberturas": {
      "oftalmologia":true,
      "dental":false,
      "fecundacionInVitro":false
    },
    "enfermedades":{
      "corazon":true,
      "estomacal":false,
      "rinyones":false,
      "alergia":true,
      "nombreAlergia":"Acaros"
    }
}

Lo primero que tenemos que hacer es obtener una referencia al servicio $http. Como ya hemos explicado en el tema anterior, tenemos que incluirlo como parámetro de nuestro controlador para que nos lo inyecte al crearlo.

var app=angular.module("app",[]);
   
app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {

   
}]);

No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad

• Línea 3: Vemos cómo ahora se inyecta el nuevo servicio , $http. Fíjate ó hemos puesto el nombre del servicio como parámetro de la función y como tercer parámetro del array.

$http acepta como parámetro un único objeto llamado config con todas las propiedades que necesita para la petición.

Veamos ahora alguna de las propiedades:

• method: El método HTTP para hacer la petición. Sus posibles valores son: GET, POST, PUT, DELETE, etc.
• url: La URL de donde queremos obtener los datos.
• data: Si usamos el método POST o PUT aquí pondremos los datos a mandar en el body de la petición HTTP
• params: Un objeto que se pondrá como parámetros de la URL.

Ahora vamos a hacer una llamada mediante GET a la URL datos.json y sin parámetros.

var app=angular.module("app",[]);
   
app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {
  var config={
    method:"GET",
    url:"datos.json"
  }
   
}]);

No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad

• Línea 4: Creamos el objeto JavsScript llamado config.
• Línea 5: Añadimos la propiedad method para indicar que el método HTTP es GET.
• Línea 6: Indicamos la url al fichero datos.json

Teniendo el objeto config ya podemos llamar al servicio $http. La llamada nos retornará un objeto response.

var app=angular.module("app",[]);
   
app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {
  var config={
    method:"GET",
    url:"datos.json"
  }
  
  var response=$http(config);
   
}]);

• Línea 9: Se llama al servicio $http al que se le pasa toda la configuración y nos responde con un objeto response.

Si todo ha funcionado correctamente podremos obtener el objeto JavaScript correspondiente al String JSON que nos han pasado. Para ello llamaremos a la función success(fn) que acepta como único parámetro una función nuestra que será llamada cuando se obtengan los datos.

La función que le pasaremos tendrá 4 argumentos que son los siguientes:

• data: Un objeto JavaScript correspondiente a los datos JSON que ha recibido
• status: Es el estado HTTP que ha retornado. Su valor siempre será entre 200 y 299 ya que si se llama a esta función significa que la petición ha tenido éxito.
• headers:Es una función que acepta como único parámetro el nombre de una cabecera HTTP y nos responde su valor.
• config: El mismo objeto config que usamos para configurar la petición.

var app=angular.module("app",[]);
   
app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {
  var config={
    method:"GET",
    url:"datos.json"
  }
  
  var response=$http(config);
  
  response.success(function(data, status, headers, config) {
      $scope.seguro=data;
  });
   
}]);

• Línea 11: Llamamos a la función success pasándole como parámetro nuestro propia función.
• Línea 12: Asignamos los datos del servidor a nuestro objeto $scope.seguro para que se muestren en la página HTML.

Si ocurre algún error, es decir si se retorna un 400, 500 ,etc, no se llamará a la función de success .Para poder controlar el error debemos llamar a una nuev función llamada error(fn) que al igual que success acepta como único parámetro una función la cual tiene los mismos argumentos que success.

No vamos a extendernos mas en esta función ya que funciona igual que success.

var app=angular.module("app",[]);
   
app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {
  var config={
    method:"GET",
    url:"datos.json"
  }
  
  var response=$http(config);
  
  response.success(function(data, status, headers, config) {
      $scope.seguro=data;
  });
  
  response.error(function(data, status, headers, config) {
      alert("Ha fallado la petición. Estado HTTP:"+status);
  });
    
   
}]);

• Línea 15: Llamamos a la función error y le pasamos nuestra función.
• Línea 16: Mostramos al usuario un mensaje de error indicando el valor del estado HTTP.

Ya hemos visto cómo funciona pero el código nos ha quedado un poco largo. Lo hemos hecho así para ir explicando todo poco a poco, pero vamos a condensarlo todo para que quede más corto y legible.

Un detalle a comentar antes es que las funciones success o error retornan el mismo objeto response , con lo que podemos concatenar las llamadas.

El código finalmente quedaría así:

var app=angular.module("app",[]);
   
app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {

  $http({
    method: 'GET', 
    url: 'datos.json'
  }).success(function(data, status, headers, config) {
      $scope.seguro=data;
  }).error(function(data, status, headers, config) {
      alert("Ha fallado la petición. Estado HTTP:"+status);
  });
    
   
}]);

Vemos cómo hemos puesto la configuración directamente en la llamada en vez de crear un objeto config. Hemos incluido la llamada a success tras llamar a $http sin crear una nueva variable response y finalmente como success retorna el mismo objeto que $htpp podemos a su vez llamar a error.

Finalmente el controlador completo quedaría de la siguiente forma:

var app=angular.module("app",[]);
  
app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {
  $scope.seguro={
    nif:"",
    nombre:"",
    ape1:"",
    edad:undefined,
    sexo:"",
    casado:false,
    numHijos:undefined,
    embarazada:false,
    coberturas: {
      oftalmologia:false,
      dental:false,
      fecundacionInVitro:false
    },
    enfermedades:{
      corazon:false,
      estomacal:false,
      rinyones:false,
      alergia:false,
      nombreAlergia:""
    },
    fechaCreacion:new Date()
  }
  
  $log.debug("Acabamos de crear el $scope");

  $http({
    method: 'GET', 
    url: 'datos.json'
  }).success(function(data, status, headers, config) {
      $scope.seguro=data;
  }).error(function(data, status, headers, config) {
      alert("Ha fallado la petición. Estado HTTP:"+status);
  });
  
}]);

Como ya hemos explicado hemos añadido en la línea 3 la referencia al objeto $http y hemos añadido en las líneas 30 a 37 la llamada a $http.

• $http
• $q: Servicio de promesas