Diferencias

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

Enlace a la vista de comparación

unidades:03_servicios:02_http [2014/07/25 13:32]
admin [3.2 $http]
unidades:03_servicios:02_http [2014/08/30 13:26] (actual)
admin
Línea 1: Línea 1:
 ====== 3.2 $http ====== ====== 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>​ <note important>​
Línea 7: Línea 7:
  
  
-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 obtiene ​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. ​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.+<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: El contenido del fichero ''​datos.json''​ es el siguiente:
Línea 36: Línea 41:
  
 <note tip> <note tip>
-No está el campo "​fechaCreacion"​ ya que las fechas ​es un tema complejo que trataremos ​mas adelante.+No está el campo "​fechaCreacion"​ ya que las fechas ​son un tema complejo que trataremos ​más adelante.
 </​note>​ </​note>​
 ====== La instancia ====== ====== La instancia ======
Línea 53: Línea 58:
  
  
-  * 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. ​+  * 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. ​
  
  
Línea 117: Línea 122:
  
 ====== Los datos ====== ====== 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.+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: La función que le pasaremos tendrá 4 argumentos que son los siguientes:
-  * **data**: Un objeto JavaScript correspondiente ​al los datos JSON que ha recibido+  * **data**: Un objeto JavaScript correspondiente ​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.   * **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.   * **headers**:​Es una función que acepta como único parámetro el nombre de una cabecera HTTP y nos responde su valor.
Línea 149: Línea 154:
 //No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//​ //No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//​
  
-  * Línea 11: Llamamos a la función ''​success'' ​pasandole ​como parámetro nuestro propia función. +  * 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 el servidor.+  * Línea 12: Asignamos los datos del servidor a nuestro objeto ''​$scope.seguro''​ para que se muestren en la página HTML.
  
 <note important>​ <note important>​
-La línea 12 tiene mucha mas importancia de la que parece ​solo que AngularJS nos lo hace todo muy sencillo. +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 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''​.+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. 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.
Línea 165: Línea 170:
  
 ====== El error ====== ====== 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 nuevo 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''​.+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''​. No vamos a extendernos mas en esta función ya que funciona igual que ''​success''​.
Línea 196: Línea 201:
  
 <note tip> <note tip>
-No es la mejor forma de tratar los errores ​hacer un ''​alert'' ​pero a efectos de aprender lo vamos a poner así.+Hacer un ''​alert''​ no es la mejor forma de tratar los errores pero a efectos de aprender lo vamos a poner así.
 </​note>​ </​note>​
  
 ====== Uniendo todo el código ====== ====== Uniendo todo el código ======
-Ya hemos visto como 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 las corto y legible.+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.+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í: El código finalmente quedaría así:
Línea 225: Línea 230:
 //No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//​ //No hemos mostrado el resto de líneas del controlador para mejorar la legibilidad//​
  
-Vemos como 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''​.+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 ====== ====== Ejemplo ======
 Finalmente el controlador completo quedaría de la siguiente forma: Finalmente el controlador completo quedaría de la siguiente forma:
Línea 273: Línea 284:
  
 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''​. 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
 +
unidades/03_servicios/02_http.1406287962.txt.gz · Última modificación: 2014/07/25 13:32 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0