Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
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:00] – creado adminunidades:10_servidor:07_angularjs [2014/09/06 09:55] (actual) – [remoteResource] admin
Línea 1: Línea 1:
-====== 10.7 remoteResource ======+====== 10.7 AngularJS ======
 Ya tenemos un API REST funcionando en el servidor, así que vamos a volver a la parte de AngularJS para por fin tener una aplicación funcionando capaz de hacer un CRUD. Ya tenemos un API REST funcionando en el servidor, así que vamos a volver a la parte de AngularJS para por fin tener una aplicación funcionando capaz de hacer un CRUD.
  
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 339: Línea 339:
  
 <note warning> <note warning>
 +Si ejecutamos la aplicación e insertamos un nuevo seguro médico se producirá la excepción:
 +  com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: Unrecognized field "fechaCreacion" 
  
 +Esto es debido a que aun no estamos tratando la propiedad "fechaCreacion" para solucionarlo debemos indicar a la librería Jackson que no pasa nada si falta algún campo. Ello se hace mediante la línea:
 <sxh java> <sxh java>
 +objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
 +</sxh>
 +
 +Así que el método ''fromJson'' de la clase ''JsonTransformerImplJackson'' quedará de la siguiente forma:
 +  
 +<sxh java;highlight: [5]>
     @Override     @Override
     public Object fromJson(String json, Class clazz) {     public Object fromJson(String json, Class clazz) {
Línea 422: Línea 431:
  
 ==== Mostrar los mensajes ==== ==== Mostrar los mensajes ====
-Por último nos queda mostrar los mensajes en la pantalla. Aparentemente es sencillo pero +Por último nos queda mostrar los mensajes en la pantalla. Aparentemente es sencillo ya que solo tenemos que mostrar una lista de objetos por pantalla, pero debe cumplir las siguiente condiciones: 
 +  * Si no hay ningún mensaje no debe verse nada 
 +  * Debe haber un botón para poder quitar los mensajes 
 +  * Debe tratarse el caso de que la propiedad ''fieldName'' sea ''null''.
  
 +La solución a ésto es el siguiente código HTML:
 +<sxh html;highlight: [1,4,5,6,9]>
 +<div ng-show="bussinessMessages.length > 0">
 +    <div>Se han producido los siguientes errores</div>
 +    <ul>
 +        <li ng-repeat="bussinessMessage in bussinessMessages">
 +            <strong ng-hide="businessMessage.fieldName == null">{{bussinessMessage.fieldName}}:</strong>
 +            {{bussinessMessage.message}}.
 +        </li>
 +    </ul>
 +    <button ng-click="bussinessMessages = []" >Quitar mensajes</button>
 +</div>
 +</sxh>
 +  * Línea 1: No no hay mensajes todo el ''<div>'' está oculto.
 +  * Línea 4: Recorremos la lista de los mensajes
 +  * 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 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.
  
-==== Ejemplo ====+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:
  
-<sxh java> +{{:unidades:10_servidor:dismissiblealerts.png?nolink|}}
-        if (idSeguroMedico==1) { +
-            throw new BussinessException(new BussinessMessage(null,"No es posible borrar el seguro médico")); +
-        }+
  
-</sxh>+Y quitamos el horrible botón de "Quitar mensajes" substituyendolo por el aspa de la parte superior derecha.
  
 +===== 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 ("11111111A".equals(seguroMedico.getNif())) {         if ("11111111A".equals(seguroMedico.getNif())) {
Línea 440: Línea 476:
         }         }
 </sxh> </sxh>
 +
 +
 +Al principio del método ''delete'' se han añadido las siguientes líneas:
 +<sxh java>
 +        if (idSeguroMedico==1) {
 +            throw new BussinessException(new BussinessMessage(null,"No es posible borrar el seguro médico"));
 +        }
 +
 +</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.1409835624.txt.gz · Última modificación: por admin