Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:03_servicios:02_http [2014/07/25 10:57] – admin
+++ unidades:03_servicios:02_http [2014/08/30 13:26] (actual) – admin
@@ Línea 1: / Línea 1: @@
 ====== 3.2 $http ======
-El servicio [[https://docs.angularjs.org/api/ng/service/$http|$http]] permite hacer peticiones AJAX al servidor. Es realmente como el objeto [[http://es.wikipedia.org/wiki/XMLHttpRequest|XMLHttpRequest]] o el método [[http://api.jquery.com/jquery.ajax/|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.
+El servicio [[https://docs.angularjs.org/api/ng/service/$http|$http]] permite hacer peticiones AJAX al servidor. Es realmente como el objeto [[http://es.wikipedia.org/wiki/XMLHttpRequest|XMLHttpRequest]] o el método [[http://api.jquery.com/jquery.ajax/|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.
 <note important>
 Como en otros apartados de AngularJS es obligatorio usar las funciones de AngularJS como ''$http'' para que AngularJS sepa que se han modificado los datos.
 </note>
+<note tip>
+Si quieres saber mas sobre JSON puede ir al tema [[unidades:10_servidor:02_json]]
+Y si quieres saber sobre HTTP puede ir al tema [[unidades:10_servidor:01_rest#http]]
+</note>
+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:
+<sxh js;title:datos.json>
+{
+    "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"
+    }
+}
+</sxh>
+<note tip>
+No está el campo "fechaCreacion" ya que las fechas son un tema complejo que trataremos más adelante.
+</note>
+====== La instancia ======
+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.
+<sxh js;title:script.js;highlight: [3];>
+var app=angular.module("app",[]);
+app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {
+}]);
+</sxh>
+//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.
 ====== config ======
-[[https://docs.angularjs.org/api/ng/service/$http|$http]] acepta como parámetro un único objeto llamado ''config'' con todos los datos que necesita para la petición.
+[[https://docs.angularjs.org/api/ng/service/$http|$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.
 <note tip>
-El objeto ''config'' contiene mas propiedades pero no vamos a explicarlas en este curso. Puedes ver la lista completa [[https://docs.angularjs.org/api/ng/service/$http#usage|aqui]]
+El objeto ''config'' contiene mas propiedades pero no vamos a explicarlas en este curso. Puedes ver la lista completa en [[https://docs.angularjs.org/api/ng/service/$http#usage|$http Usage]]
 </note>
+Ahora vamos a hacer una llamada mediante ''GET'' a la URL ''datos.json'' y sin parámetros.
+<sxh js;title:script.js;highlight: [4,5,6,7];>
+var app=angular.module("app",[]);
+app.controller("SeguroController",['$scope','$log','$http',function($scope,$log,$http) {
+  var config={
+    method:"GET",
+    url:"datos.json"
+  }
+}]);
+</sxh>
+//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''
+====== respuesta ======
+Teniendo el objeto ''config'' ya podemos llamar al servicio ''$http''. La llamada nos retornará un objeto ''response''.
+<sxh js;title:script.js;highlight: [9];>
+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);
+}]);
+</sxh>
+//No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//
+  * Línea 9: Se llama al servicio ''$http'' al que se le pasa toda la configuración y nos responde con un objeto ''response''.
+<note important>
+Realmente no nos responde con un objeto ''response'' sino con un objeto [[https://docs.angularjs.org/api/ng/service/$q#the-promise-api|promise]] pero ya veremos más adelante en el curso los objetos ''promise''.
+</note>
+====== Los datos ======
+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.
+<note tip>
+Recuerda que ''headers'' no es un objeto con la cabeceras sino una función que permite obtener el valor de una cabecera.
+</note>
+<sxh js;title:script.js;highlight: [11,12,13];>
+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;
+  });
+}]);
+</sxh>
+//No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//
+  * 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.
+<note important>
+La línea 12 tiene mucha más importancia de la que parece, sólo que AngularJS nos lo hace todo muy sencillo.
+Como ya hemos dicho, el parámetro ''data'' contiene el objeto con los datos del servidor. Al asignárselo a la propiedad ''$scope.seguro'' modificamos nuestro modelo de datos por lo que automáticamente se modificarán los tag ''<input>'' de la página HTML ya que el formato del objeto es exactamente el mismo que el que tenemos en ''$scope.seguro''.
+El que se actualice automáticamente el modelo es lo que hace que tengamos que usar ''$http''. Si hubiéramos usado directamente el objeto [[http://es.wikipedia.org/wiki/XMLHttpRequest|XMLHttpRequest]] o el método [[http://api.jquery.com/jquery.ajax/|ajax()]] de JQuery , AngularJS no se habría enterado de los cambios y no se habría actualizado la página HTML.
+</note>
+<note tip>
+Recuerda que la llamada a nuestra función de la línea 11 se hace de forma asíncrona tal y como se hacen las peticiones AJAX
+</note>
+====== El error ======
+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''.
+<sxh js;title:script.js;highlight: [15,16,17];>
+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);
+  });
+}]);
+</sxh>
+//No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//
+  * 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.
+<note tip>
+Hacer un ''alert'' no es la mejor forma de tratar los errores pero a efectos de aprender lo vamos a poner así.
+</note>
+====== Uniendo todo el código ======
+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í:
+<sxh js;title:script.js;highlight: [5,6,7,8,9,10,11,12];>
+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);
+  });
+}]);
+</sxh>
+//No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//
+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''.
+<note warning>
+El poner en el controlador la llamada a ''$http'' es con fines educativos. Realmente debería estar dentro de un servicio y que dicho servicio se llamara desde el controlador.
+El ejemplo correcto se explicará en [[unidades:03_servicios:10_ejemploseguro]]
+</note>
+====== Ejemplo ======
+Finalmente el controlador completo quedaría de la siguiente forma:
+<sxh js;title:script.js;highlight: [3,30,31,32,33,34,35,36,37];>
+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);
+  });
+}]);
+</sxh>
+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''.
+{{url>http://embed.plnkr.co/Cbedqx}}
+====== Referencias ======
+  * [[https://docs.angularjs.org/api/ng/service/$http|$http]]
+  * [[https://docs.angularjs.org/api/ng/service/$q|$q]]: Servicio de promesas