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 éstos 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 un String JSON del servidor , desde la url datos.json. Este fichero contendrá simplemente un String en formato JSON para que podamos obtener la información del servidor.Mas 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.

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 como ahora se inyecta el nuevo servicio , $http. Fíjate como 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.