Diferencias

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

Enlace a la vista de comparación

unidades:03_servicios:01_servicios [2014/07/24 11:50]
admin [¿Que es un servicio?]
unidades:03_servicios:01_servicios [2014/08/29 21:08] (actual)
admin
Línea 1: Línea 1:
 ====== 3.1 Servicios ====== ====== 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. 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 vemoscumple perfectamente la definición de obtener información. ​
   * Un servicio que se conecta a un host que nos retorna el valor del Euribor.   * 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 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.   * Un servicio que transformara los String con una fecha en un objeto Date.
Línea 22: Línea 25:
  
 <note tip> <note tip>
-Una cosa que llama la atención es porque en angular ​los servicios ​y otros artefactos empiezan sus nombres por "​$"​. Es simplemente para evitar ​que choque el nombre ​de los servicios ​de Angular con los servicios creados por nosotros mismos o por terceras librerías. +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]].
- +
-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 desaparecerSin embargo en internet hay muchas veces que para hacer cosas que no permite angular se recurran a artefactos que empiezan por "​$$"​.+
 </​note>​ </​note>​
 ===== Ventajas ===== ===== 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: Las ventajas son las siguientes:
Línea 39: Línea 40:
  
 ==== Facilitar el TDD ==== ==== 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 deciren 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. 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 ==== ==== 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 útilpor ejemplopara poder hacer modificaciones en servicios de terceros que no podemos modificar.
  
 ==== Facilitar las relaciones entre servicios ==== ==== 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 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 ==== ==== Modificar las implementaciones ====
Línea 56: 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. 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 ===== ===== 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 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 "​debug"​ que permite pasarle un mensaje para que se muestre por la consola del navegador.+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.
  
  
Línea 68: Línea 69:
  
  
-¿Como ​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 ​mas servicios se añadirían como mas parámetros.+¿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];> <sxh js;​title:​script.js;​highlight:​ [3,28];>
Línea 108: Línea 109:
 Si mostramos la consola de chrome (CTRL+SHIFT+J) veremos el mensaje de "​Acabamos de crear el $scope"​ 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 AngularJS ​cuando llame al controlador nos inyectará las instancias de los servicios que hemos solicitado.+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 ==== ==== Minimizando el JavaScript ====
-Para mejorar el rendimiento ​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á.+Para mejorar el rendimiento ​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 si al minimizar nuestra función ​que queda de la siguiente forma (Hemos omitido aquí el cuerpo de la función para mejorar la legibilidad):​+Es deciral 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> <sxh js>
Línea 120: Línea 121:
 </​sxh>​ </​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.+Tras minimizar el códigolos 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'' ​fallará nuestro código.
  
-Los creadores de AngularJS ​sabiendo ​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.+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 como debería ser nuestro código:+Veamos ahora cómo debería ser nuestro código:
  
 <sxh js> <sxh js>
Línea 131: Línea 132:
 </​sxh>​ </​sxh>​
  
-Vemos como 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.+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.
  
-**Notar que ahora hay que cerrar el corchete del array al acabar la función**+**Nótese ​que ahora hay que cerrar el corchete del array al acabar la función**
  
-Si ahora minimizaramos ​el código quedaría de la siguiente forma:+Si ahora minimizáramos ​el código quedaría de la siguiente forma:
  
 <sxh js> <sxh js>
Línea 142: Línea 143:
 </​sxh>​ </​sxh>​
  
-Los parámetros al minimizarlos se llaman ''​a''​ y ''​b''​. Pero ahora eso 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.+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 corresponde ​es el nombre de lo que queremos inyectar en la función del controlador.+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> <note warning>
Línea 189: Línea 190:
   * 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 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 ''​]''​   * 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 "​)"​.
 +
 +Es decir que acabará siempre con "​}]);"​
 +</​note>​
 +
  
 {{url>​http://​embed.plnkr.co/​EaejAg}} {{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.
 +
 +==== Servicios propios de Angular ====
 +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. Sin embargo en internet hay muchas veces que para hacer cosas que no permite angular se recurre a artefactos que empiezan por "​$$"​.
 ===== Referencias ===== ===== Referencias =====
   * [[https://​docs.angularjs.org/​guide/​services|Developer Guide / Services]]   * [[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]]   * [[https://​docs.angularjs.org/​api/​ng/​service/​$log|$log]]
unidades/03_servicios/01_servicios.1406195436.txt.gz · Última modificación: 2014/07/24 11:50 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