Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza: • 10.7 AngularJS
unidades:10_servidor:07_angularjs

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
unidades:10_servidor:07_angularjs [2014/09/04 15:28] – [Mostrar los mensajes] adminunidades:10_servidor:07_angularjs [2014/09/06 09:55] (actual) – [remoteResource] admin
Línea 64: Línea 64:
 Como vemos los cambios han sido mínimos, solo la nueva URL y la gestión del error ''400 Bad Request'' que ahora es lo que hace que se rechace la promesa. Como vemos los cambios han sido mínimos, solo la nueva URL y la gestión del error ''400 Bad Request'' que ahora es lo que hace que se rechace la promesa.
  
-Pasemos ahora a ver el resto de los métodos. Son casi todos iguales y solo cambia la URL y los datos que se envían.+Pasemos ahora a ver el resto de los métodos. Son casi todos iguales y solo cambia el método HTTP, la URL y los datos que se envían.
  
-<sxh js;highlight: [8,22,29]>+<sxh js;highlight: [6,8,22,29]>
     this.insert = function(seguroMedico) {     this.insert = function(seguroMedico) {
         var defered = $q.defer();         var defered = $q.defer();
Línea 129: Línea 129:
     };     };
 </sxh> </sxh>
 +  * Línea 6: Usamos el método HTTP de ''POST'' para enviar los datos, en los otros métodos usaremos ''PUT'' y ''DELETE''.
   * Líneas 8 y 29: Se usa la propiedad ''data''. La propiedad ''data'' contiene el objeto JavaScript que se transforma en un String JSON y se envía en la petición HTTP en el cuerpo de la misma. Esta String JSON es el que posteriormente se obtiene desde el servidor en Java con la anotación [[unidades:10_servidor:06_controlador#accediendo_al_json_de_entrada|@RequestBody]].   * Líneas 8 y 29: Se usa la propiedad ''data''. La propiedad ''data'' contiene el objeto JavaScript que se transforma en un String JSON y se envía en la petición HTTP en el cuerpo de la misma. Esta String JSON es el que posteriormente se obtiene desde el servidor en Java con la anotación [[unidades:10_servidor:06_controlador#accediendo_al_json_de_entrada|@RequestBody]].
   * Línea 22: Hemos optado por pasar el parámetro ''idSeguro'' aunque también se podría obtener del mismo objeto JavaScript ''seguroMedico'' mediante ''seguroMedico.idSeguro''. Se ha hecho así para destacar en el update se envía el ''idSeguro'' tanto en la URL como en el propio objeto.   * Línea 22: Hemos optado por pasar el parámetro ''idSeguro'' aunque también se podría obtener del mismo objeto JavaScript ''seguroMedico'' mediante ''seguroMedico.idSeguro''. Se ha hecho así para destacar en el update se envía el ''idSeguro'' tanto en la URL como en el propio objeto.
Línea 321: Línea 321:
     }]);     }]);
 </sxh> </sxh>
-  * Linea 1:Inyectamos los servicios [[unidades:07_rutas:02_routeprovider#servicio_location_desde_javascript|$locate]] y ''remoteResource'' que usaremos en el controlador.+  * Linea 1:Inyectamos los servicios [[unidades:07_rutas:02_routeprovider#servicio_location_desde_javascript|$location]] y ''remoteResource'' que usaremos en el controlador.
   * Línea 16: Definimos todos los campos del ''$scope.seguro'' con los valores que queremos que tengan al mostrarse la página.   * Línea 16: Definimos todos los campos del ''$scope.seguro'' con los valores que queremos que tengan al mostrarse la página.
   * Línea 41: El método debe obligatoriamente llamarse ''guardar'' ya que ese nombre se llama desde la página ''detalle.html'' la cual compartimos con el controlador ''EditSeguroController''.   * Línea 41: El método debe obligatoriamente llamarse ''guardar'' ya que ese nombre se llama desde la página ''detalle.html'' la cual compartimos con el controlador ''EditSeguroController''.
Línea 453: Línea 453:
   * Línea 5: Somo mostramos el campo ''fieldName'' y los dos puntos ":" si su valor no es null   * Línea 5: Somo mostramos el campo ''fieldName'' y los dos puntos ":" si su valor no es null
   * Línea 6: Mostramo el valor del propio mensaje   * Línea 6: Mostramo el valor del propio mensaje
-  * Línea 9: Ponemos el botón para que el usuario pueda en cualquier momento quitar los mensajes. Hay que fijarse que realmente el botón no oculta los mensajes sino que borra la lista de mensajes y al hacerlo la directiva ''ng-show' del ''<div>'' es la que lo oculta.+  * Línea 9: Ponemos el botón para que el usuario pueda en cualquier momento quitar los mensajes. Hay que fijarse que realmente el botón no oculta los mensajes sino que borra la lista de mensajes y al hacerlo la directiva ''ng-show'' del ''<div>'' es la que lo oculta.
  
-Si ves el resultado de esto te puede parecer muy cutre pero por ejemplo con [[http://getbootstrap.com/Bootstrap]] y simplemente usando [[http://getbootstrap.com/components/#alerts-dismissible|Dismissible alerts]] puede quedar tan elegante como en la siguiente imagen:+Si ves el resultado del HTML te puede parecer muy cutre pero por ejemplo con [[http://getbootstrap.com/Bootstrap|Bootstrap]] y simplemente usando [[http://getbootstrap.com/components/#alerts-dismissible|Dismissible alerts]] puede quedar tan elegante como en la siguiente imagen:
  
 {{:unidades:10_servidor:dismissiblealerts.png?nolink|}} {{:unidades:10_servidor:dismissiblealerts.png?nolink|}}
  
-Y fíjate lo bien que queda el aspa de la parte superior derecha en vez del horrible botón de nuestro ejemplo.+Y quitamos el horrible botón de "Quitar mensajes" substituyendolo por el aspa de la parte superior derecha.
  
-==== Ejemplo ====+===== Ejemplo ===== 
 +El ejemplo de esta unidad es exactamente lo que acabamos de contar pero en un nuevo proyecto llamado "segurosv1".
  
 +Para poder probar los mensajes que llegan del servidor mediante un error ''400 Bar Request'' hemos modificado la clase ''SeguroMedicoDAOImplJDBC'' para incluir 2 fallos, que son:
 +  * No se permite borrar el seguro médico con ''idSeguroMedico==1'' que es el que tiene el NIF con valor "12345678Z"
 +  * No se permite añadir un seguro médico con NIF igual a "11111111A".
 +
 +Por supuesto estas restricciones no tienen ningún sentido y están puestas por un motivo puramente pedagógico.
 +
 +Al principio del método ''insert'' se han añadido las siguientes líneas:
 <sxh java> <sxh java>
-        if (idSeguroMedico==1) { +        if ("11111111A".equals(seguroMedico.getNif())) { 
-            throw new BussinessException(new BussinessMessage(null,"No es posible borrar el seguro médico"));+            throw new BussinessException(new BussinessMessage("nif","La letra no es válida"));
         }         }
- 
 </sxh> </sxh>
  
  
 +Al principio del método ''delete'' se han añadido las siguientes líneas:
 <sxh java> <sxh java>
-        if ("11111111A".equals(seguroMedico.getNif())) { +        if (idSeguroMedico==1) { 
-            throw new BussinessException(new BussinessMessage("nif","La letra no es válida"));+            throw new BussinessException(new BussinessMessage(null,"No es posible borrar el seguro médico"));
         }         }
 +
 </sxh> </sxh>
 +
 +<note>
 +Este ejemplo se encuentra en  git en [[https://github.com/logongas/cursoangularjs/tree/master/segurosv1]]
 +</note>
 +
 +===== Referencias =====
 +  * [[https://docs.angularjs.org/api/ngResource/service/$resource|$resource]]
 +  * [[https://github.com/mgonto/restangular|Restangular]]
 +  * [[http://getbootstrap.com/Bootstrap|Bootstrap]]
unidades/10_servidor/07_angularjs.1409837297.txt.gz · Última modificación: por admin