Diferencias

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

--- unidades:03_servicios:01_servicios [2014/07/23 22:04] – [Usando servicios] admin
+++ unidades:03_servicios:01_servicios [2014/08/29 21:08] (actual) – admin
@@ Línea 1: / Línea 1: @@
 ====== 3.1 Servicios ======
-Por ahora hemos visto 2 artefactos de AngularJS , los controladores y las directivas. En esta unidad vamos a ver otro conjunto de nuevos artefactos: Los Servicios. Aunque hablamos de forma generica de servicios , AngularJS tiene realmente 5 tipos distintos de servicios:
+Por ahora hemos visto 2 artefactos de AngularJS , los controladores y las directivas. En esta unidad vamos a ver otro conjunto de nuevos artefactos: los servicios.
-  * Constantes
-  * Valores
+Aunque hablamos de servicios de forma genérica, AngularJS tiene realmente 5 tipos distintos de servicios:
-  * Factorias
-  * Servicios
+  * [[unidades:03_servicios:05_constant|Constantes]]
-  * Proveedores
+  * [[unidades:03_servicios:06_value|Valores]]
+  * [[unidades:03_servicios:07_service|Servicios]]
+  * [[unidades:03_servicios:08_factory|Factorias]]
+  * [[unidades:03_servicios:09_provider|Proveedores]]
 Estos 5 tipos corresponden a 5 métodos que existen en la clase "Modulo". Aunque repito que se suele hablar de todos ellos simplemente como servicios.
-===== ¿Que es un servicio? =====
+===== ¿Qué es un servicio? =====
-Es un objeto JavaScript que nos permite obtener información. Aparentemente nada nuevo que entender, sería por ejemplo un DAO en Java o un servicios de Java. Lo importante de ésto es que un servicio nunca ((Solo hay una excepción y es el servicio para crear ventanas de diálogo o modales)) interacciona con la propia página, solo con otros servicios o con un servidor de datos que pueda estar en otro Host.
+Es un objeto JavaScript que nos permite obtener información. Aparentemente nada nuevo que entender, sería por ejemplo un DAO en Java o un servicios de Java. Lo importante de ésto es que un servicio nunca ((Solo hay una excepción y es el servicio para crear ventanas de diálogo o modales)) interacciona con la propia página, sólo con otros servicios o con un servidor de datos que pueda estar en otro Host.
-Ejemplos de serviciós serían:
+Ejemplos de servicios serían:
-  * El servicio  [[https://docs.angularjs.org/#!/api/ng/service/$http|$http]] de AngularJS. Este servicio hace la típica llamada AJAX a un servidor para obtener información de él. Como vemos cumple perfectamente la definición de obtener información.
+  * El servicio  [[https://docs.angularjs.org/api/ng/service/$http|$http]] de AngularJS. Este servicio hace la típica llamada AJAX a un servidor para obtener información de él. Como vemos, cumple perfectamente la definición de obtener información.
   * Un servicio que se conecta a un host que nos retorna el valor del Euribor.
-  * Un posible servicio de cálculo de Hipoteca que dado los datos de una hipoteca (Importe del préstamo, años, diferencial ,etc) nos calculara cuanto hay que pagar mensualmente.
+  * Un posible servicio de cálculo de Hipoteca que dados los datos de una hipoteca (Importe del préstamo, años, diferencial ,etc) nos calculara cuánto hay que pagar mensualmente.
   * Un servicio que nos hiciera las operaciones de [[http://es.wikipedia.org/wiki/CRUD|CRUD]] sobre el servidor.
   * Un servicio que transformara los String con una fecha en un objeto Date.
-  * El servicio [[https://docs.angularjs.org/#!/api/ng/service/$log|$log]] de Angular que nos permite generar un log de nuestra aplicación.
+  * El servicio [[https://docs.angularjs.org/api/ng/service/$log|$log]] de Angular que nos permite generar un log de nuestra aplicación.
   * Etc.
+<note tip>
+Una característica importante de los servicios es que sólo hay una única instancia de ellos aunque los usemos más de una vez,es decir que son un [[http://es.wikipedia.org/wiki/Singleton|singleton]].
+</note>
 ===== Ventajas =====
-¿Y que tiene ésto de especial? ¿Porque Angular tiene esos artefactos si quizás tu ya tengas clases JavaScript que actúan como servicios? ¿que ventajas nos ofrecen?
+¿Y qué tiene ésto de especial? ¿Por qué Angular tiene esos artefactos si quizás tú ya tengas clases JavaScript que actúan como servicios? ¿qué ventajas nos ofrecen?
 Las ventajas son las siguientes:
@@ Línea 34: / Línea 40: @@
 ==== Facilitar el TDD ====
-Aunque en este curso no se trata el tema del [[http://es.wikipedia.org/wiki/Desarrollo_guiado_por_pruebas|Desarrollo guiado por pruebas]]  o TDD, todo AngularJs está diseñado para facilitar el TDD. Un ejemplo de ello es que las instancias de los servicios no se obtienen directamente sino que se obtienen mediante [[patrones:di|Inyección de Dependencias]]. Es decir en un controlador u otro servicio le diremos que deseamos una instancia de un servicio, pero no lo crearemos mediante la palabra reservada de JavaScript de ''new''. Esto nos permitirá al hacer TDD modificar los servicios por objetos [[http://es.wikipedia.org/wiki/Objeto_simulado|Mock]] y poder hacer pruebas unitarias de nuestros controladores o servicios.
+Aunque en este curso no se trata el tema del [[http://es.wikipedia.org/wiki/Desarrollo_guiado_por_pruebas|Desarrollo guiado por pruebas]]  o TDD, todo AngularJs está diseñado para facilitar el TDD. Un ejemplo de ello es que las instancias de los servicios no se obtienen directamente sino que se obtienen mediante [[patrones:di|Inyección de Dependencias]]. Es decir, en un controlador u otro servicio le diremos que deseamos una instancia de un servicio, pero no lo crearemos mediante la palabra reservada de JavaScript de ''new''. Esto nos permitirá al hacer TDD modificar los servicios por objetos [[http://es.wikipedia.org/wiki/Objeto_simulado|Mock]] y poder hacer pruebas unitarias de nuestros controladores o servicios.
 Es decir, al ser el servicio un artefacto de Angular , podremos cambiarlo por una implementación vacía que facilita el TDD.
 ==== Permitir decorar los servicios ====
-Angular nos permite decorar los servicios. Esto significa que permite que interceptemos la creación del servicio para poder añadir métodos os modificar su funcionamiento. Esto es muy útil por ejemplo para poder hacer modificaciones en servicios de terceros que no podemos modificar.
+Angular nos permite decorar los servicios. Ésto significa que permite que interceptemos la creación del servicio para poder añadir métodos os modificar su funcionamiento. Ésto es muy útil, por ejemplo, para poder hacer modificaciones en servicios de terceros que no podemos modificar.
 ==== Facilitar las relaciones entre servicios ====
 Cuando la aplicación se vuelve compleja empiezan a depender unos servicios de otros. En los ejemplos de servicios que hemos visto en este tema, está el servicio de cálculo de hipoteca que dependería del servicio de obtención del euribor.
-Cuando la cosa se complica podría pasar que se dependiera de un servicio que aun no ha sido inicializado.  Angular tiene los 5 tipos de servicios que hemos enumerado formando una jerarquía que  permite evitar esos problemas.
+Cuando la cosa se complica podría pasar que se dependiera de un servicio que aún no ha sido inicializado.  Angular tiene los 5 tipos de servicios que hemos enumerado formando una jerarquía que permite evitar esos problemas.
 ==== Modificar las implementaciones ====
@@ Línea 51: / Línea 57: @@
 En nuestro ejemplo de servicio de obtención del Euribor se podría haber creado un módulo llamado "BBVA" que incluyera el servicio del euribor de forma que se conecte al Banco BBVA para obtener el valor del Euribor.  En caso de que no nos interesara por cualquier motivo seguir usando el BBVA podríamos crear otro módulo llamado "Santander" en el que estuviera también el servicio de obtener el Euribor.
-Cambiar de un servicio a otro sería tan sencillo como cambiar en el módulo de nuestra aplicación del módulo "BBVA" a "Santander"
+Cambiar de un servicio a otro sería tan sencillo como cambiar en el módulo de nuestra aplicación del módulo "BBVA" a "Santander".
 ===== Usando servicios =====
-La primera característica de los servicios es que tiene un nombre (al igual que los controladores) y como ya dijimos en [[unidades:02_angular:08_modulos#espacio_de_nombres|Espacio de nombres]] dicho nombre es independiente del módulo en el que fueron añadidos. Así que para usar un servicio solo necesitamos saber su nombre.
+La primera característica de los servicios es que tienen un nombre (al igual que los controladores) y como ya dijimos en [[unidades:02_angular:08_modulos#espacio_de_nombres|Espacio de nombres]] dicho nombre es independiente del módulo en el que fueron añadidos. Así que para usar un servicio sólo necesitamos saber su nombre.
+Un  servicio sencillo de AngularJS es el servicio de [[https://docs.angularjs.org/api/ng/service/$log|$log]]. Este servicio simplemente llama a ''console.log'' pero nos abstrae por si no existe el objeto ''console''. ''$log'' dispone de varios métodos pero por ahora nos quedaremos con el método "debug" que permite pasarle un mensaje para que se muestre por la consola del navegador.
+Continuando ahora con nuestro ejemplo del seguro médico vamos a añadir un mensaje de log cuando se configura el ''$scope''.
+¿Cómo obtenemos una instancia del servicio de ''$log'' en el controlador? Debemos añadir un nuevo parámetro a nuestra función del controlador con el nombre del servicio, que como ya hemos dicho en nuestro caso es ''$log''. Si tuviéramos que solicitar más servicios se añadirían como más parámetros.
+<sxh js;title:script.js;highlight: [3,28];>
+var app=angular.module("app",[]);
+app.controller("SeguroController",function($scope,$log) {
+  $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");
+});
+</sxh>
+  * Línea 3: Vemos que la función del controlador ahora tiene 2 parámetros, el ''$scope'' y el ''$log''.
+  * Línea 28: Usamos el objeto ''$log'' llamando al método ''debug''.
+Si mostramos la consola de chrome (CTRL+SHIFT+J) veremos el mensaje de "Acabamos de crear el $scope"
+Es decir que en vez de pedir nosotros las instancias de los servicios, se incluyen como parámetros de nuestra función del controlador y cuando AngularJS llame al controlador nos inyectará las instancias de los servicios que hemos solicitado.
+==== Minimizando el JavaScript ====
+Para mejorar el rendimiento u ofuscar el código javaScript se suele recurrir a herramientas que minimizan el código JavaScript. Estas herramientas entre otras cosas renombran las variables. El problema es que si se renombra la variable del servicio del ''$log'' o incluso el nombre del ''$scope'', entonces AngularJS no reconocerá lo que le pedimos y fallará.
+Es decir, al minimizar nuestra función se queda de la siguiente forma (Hemos omitido aquí el cuerpo de la función para mejorar la legibilidad):
+<sxh js>
+app.controller("SeguroController",function(a,b) {
+});
+</sxh>
+Tras minimizar el código, los parámetros se llamarían ''a'' y ''b'' por lo que AngularJS nos dirá que no conoce ningún servicio llamado ''a'' ni ningún servicio llamado ''b'' y fallará nuestro código.
+Los creadores de AngularJS conocedores de este problema han creado una solución. En vez de pasar la función , pasamos un array en el que los n primeros elementos son ''Strings'' con el nombre de los servicios a inyectar y el último parámetro del array será la propia función.
+Veamos ahora cómo debería ser nuestro código:
+<sxh js>
+app.controller("SeguroController",['$scope','$log',function($scope,$log) {
+}]);
+</sxh>
+Vemos cómo se pasa un array con 3 elementos. El primero de ellos es un String con el texto ''$scope'' , el segundo parámetro es otro String con el texto ''$log'' y el tercer parámetro es la propia función.
+**Nótese que ahora hay que cerrar el corchete del array al acabar la función**
+Si ahora minimizáramos el código quedaría de la siguiente forma:
+<sxh js>
+app.controller("SeguroController",['$scope','$log',function(a,b) {
+}]);
+</sxh>
+Los parámetros al minimizarlos se llaman ''a'' y ''b''. Pero ahora éso no es un problema para angular porque él sabe que el primer parámetro corresponde a ''$scope'' ya que es el texto del primer elemento del array y el segundo parámetro corresponde al servicio ''$log'' ya que es el texto del segundo elemento del array.
+Es decir que el texto de cada elemento del array ((Menos el último)) se corresponde con el nombre de lo que queremos inyectar en la función del controlador.
+<note warning>
+Al inyectar objetos en el controlador (o cualquier otra función en la que AngularJS inyecte valores , recuerda siempre pasar un array con el nombre de lo que hay que inyectar y como último parámetro la función , en vez de pasar únicamente la función.
+Es necesario hacerlo siempre así ya que nunca sabes si alguien va a querer minimizar tu código JavaScript.
+</note>
+Finalmente el ejemplo quedaría de la siguiente forma:
+<sxh js;title:script.js;highlight: [3,30];>
+var app=angular.module("app",[]);
+app.controller("SeguroController",['$scope','$log',function($scope,$log) {
+  $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");
+}]);
+</sxh>
+  * Línea 3: Ahora vemos que se pasa el array con el nombre de las instancias a inyectar y como último parámetro la propia función.
+  * Línea 30: Tambien hay que cerrar el array con el '']''
+<note tip>
+Recuerda cerrar el array con "]" después de cerrar la función con "}" y por último la llamada a la función controller con ")".
-Un sencillo servicio de AngularJS es el servicio de [[https://docs.angularjs.org/#!/api/ng/service/$log|$log]]. Este servicio simplemente llama a ''console.log'' pero nos abstrae por si no existe el objeto ''console''. ''$log'' dispone de varios métodos pero por ahora nos quedaremos con el método "log" que permite pasarle un mensaje que se muestra por la consola del navegador.
+Es decir que acabará siempre con "}]);"
+</note>
-Continuemos ahora con nuestro ejemplo del seguro médico y añadamos un mensaje de log cuando se configura el ''$scope''.
+{{url>http://embed.plnkr.co/EaejAg}}
+===== Nombrando los servicios =====
+Los nombres de los servicios deben seguir la misma nomenclatura que los nombre de las variables. Es decir que la primera palabra debe ser en minúscula y el resto de palabras deben empezar en mayúscula (ver [[http://es.wikipedia.org/wiki/CamelCase|CamelCase]]).
+¿Por qué deben seguir la misma norma que las variables? Porque cuando inyectamos un servicio lo hacemos sobre una variable que se llama como el servicio por lo tanto el servicio se debe llamar como las variables.
-===== Nombres de los servicios =====
+==== Servicios propios de Angular ====
-Una cosa que llama la atención es porque en angular los servicios y otros artefactos empiezan sus nombres por "$". Por lo que yo he podido saber es simplemente para evitar que choque el nombre con otro servicio o artefacto que se llame igual y creado por nosotros o terceras personas.
+En angular los servicios y otros artefactos empiezan siempre sus nombres por "$". La razón de ello simplemente es evitar que choque el nombre de los servicios de Angular con los servicios creados por nosotros mismos o por terceras librerías.
-También hay nombres en angular que empiezan por "$$" . En ese caso significa que son cosas internas de AngularJs y que no son públicas , por lo que no deberían usarse ya que de una versión a otra podrían desaparecer. Aunque en internet hay muchas veces que para hacer cosas que no permite angular se recurran a artefactos que empiezan por "$$".
+También hay nombres en angular que empiezan por "$$" . En ese caso significa que son cosas internas de AngularJs y que no son públicas , por lo que no deberían usarse ya que de una versión a otra podrían desaparecer. Sin embargo en internet hay muchas veces que para hacer cosas que no permite angular se recurre a artefactos que empiezan por "$$".
+===== Referencias =====
+  * [[https://docs.angularjs.org/guide/services|Developer Guide / Services]]
+  * [[https://docs.angularjs.org/api/ng/service|API Reference / ng / service]]:Lista de servicios de AngularJS del módulo ng
+  * [[https://docs.angularjs.org/api/ng/service/$log|$log]]