Continuando con lo que llevaba del post anterior (introducción con Angular.js).
1 - Servicios
Un servicio es una instancia única de un objeto, creada para acceder desde varias partes de nuestra aplicación. A esto tipo de instancias únicas se les conoce como Singleton.
Además de esta definición de los servicios se tiene otra en la cual se cuenta con conjunto de funciones de ayuda. Accede aquí a la lista de servicios oficial de Angular.js.
A continuación les muestro un ejemplo usando los servicios.
Esta aplicación consiste en una pequeña calculadora que puede sumar y restar los valores de entrada. Para hacer el ejemplo más interesante se cuenta con una función que permite respaldar un resultado y luego podamos sumarlo con cualquier otro resultado, esto con el fin de usar la propiedad de los servicios para tener una única instancia.
Para crear un servicio usamos la función service desde nuestro módulo, a esta le damos un nombre y una función que la maneje, esto lo vemos en la línea 3 del archivo 1-servicios.js. Ya dentro de la función que maneja nuestro servicio podemos usar la variable this para agregar funciones y atributos. En el ejemplo el manejador tiene el atributo respaldo y las funciones de suma y resta.
Una vez que creemos el servicio podemos acceder a través de todos los controladores que tengamos en nuestro módulo, para esto solo necesitamos pasarlo como parámetro a nuestra función del controlador, tal y como esta en la línea 11 del archivo 1-servicios.js. Ya una vez dentro del controlador podemos acceder a las funciones y alterar el valor que tengamos de nuestro atributo respaldo. Luego dentro del HTML se hacen uso de las funciones del controlador, teniendo la garantía de que nuestro servicio se a creado una sola vez y podemos acceder al último estado siempre.
Esta página se ve como la siguiente imagen:
2 - Fábricas
Las fábricas son un tipo de servicio, donde devolvemos siempre un dato de cualquier tipo. Lo normal es que el dato que devolvemos es un objeto de tipo diccionario donde podremos encontrar atributos y funciones. Seguimos con la misma garantía de que el objeto creado sea único y por tanto se vuelve un gran candidato para manejar sesiones de usuarios, comunicación entre controladores, entre otros.
A continuación les muestro un ejemplo usando las fábricas.
Esta página se trata de un registro de tareas realizadas, en el cual aprovecho el poder de las fábricas con el objeto Singleton, haciendo uso de la función de agregar tareas.
Ahora bien crear una fábrica se hace con la función factory desde el módulo (línea 3 en 2-fabricas.js), le damos un nombre y una función (debe retornar un valor) que maneje el comportamiento de la fábrica.
Ya para usar la fábrica dentro del controlador se hace de forma similar a los servicios, pasamos el nombre de la fábrica como argumento a la función del controlador (línea 22 en 2-fabricas.js) y luego simplemente accedemos a los atributos y funciones.
Noten que con esta instrucción $scope.dato = FabricaBitacora; (línea 36 en 2-fabricas.js) estan ya conectados el objeto de la fábrica y nuestro atributo del controlador, obteniendo en tiempo real dentro del HTML la actualización de los mensajes.
Esta página se ve como la siguiente imagen:
Existen también los providers, los cuales son una versión simplificada de las fábricas que permiten ver el valor retornado como objeto que tiene sus funciones de get y set, permitiendo así trabajar con el modelo orientado a objeto de la manera acostumbrada. Puedes consultar más sobre estos últimos en la documentación oficial de Angular.js. También existe esta pregunta en Stackoverflow donde discuten las diferencias, similitudes entre los servicios, fábricas y los proveedores.
Nota gracias a Levi Velazquez: Las fábricas también son Singletons y que tanto como los servicios y estas son pasadas por referencia. Se puede compartir la misma instancia entre controladores y otros servicios.
3 - Formularios
Angular.js incluye dentro de sus funciones unas ayudas para validar formularios y lo primero que debemos hacer es darle nombre a nuestra forma con el atributo name (línea 12 en 3-formularios.html). Luego es muy importante no olvidar colocar un modelo a cada etiqueta de entrada. Después de esto estamos autorizados para indicarle a nuestros campos de entrada y botones que están o no disponibles.
Para validar podemos usar ng-class el cual tiene 2 posibles clases a heredar:
Esta página se ve como la siguiente imagen:
Por último tenemos funciones para CSS la cual cambia el color de los campos de acuerdo a la validez del valor. Las funciones que se tienen para esto son:
4 - Animaciones
Una animación en general tiene puntos claves que deseamos mostrar, punto inicial y punto final, por supuesto podemos agregar puntos intermedios de interés para animaciones más elaboradas, pero para este ejemplo solo nos interesará punto inicial y final.
Angular.js nos incluye una serie de funciones de ayuda para manejar animaciones, las cuales se modifican desde el CSS y Javascript para determinar el comportamiento de la animación.
A continuación les muestro un ejemplo donde tenemos 2 tipos de animaciones:
La primera animación la creo desde el archivo 4-animaciones.js a través de la función animation, la cual recibe el nombre de la clase o id de interés y la función que maneja el comportamiento, línea 9 en el archivo 4-animaciones.js. Ahora bien es muy importante devolver un objeto en esta función para especificar el comportamiento de la animación, en este caso tenemos:
Esta página se ve como la siguiente imagen:
Existen varias funciones de transiciones, en el ejemplo uso la ease-in-out para la animación 1 y cubic-bezier para la animación 2. Ambas tienen una duración de 1.618 segundos. Si deseas ver otras transiciones las puedes consultar W3Schools.
5 - Módulos
Los módulos en Angular.js son contenedores que nos permiten encapsular los controladores, servicios, filtros, entre otras funciones, es decir crear nuestras propias librerías y aún mas interesante usar otras que descarguemos.
Para crear un módulo basta con usar la función angular.module la cual recibe 2 parámetros:
NGModules es una página que contiene una gran cantidad de módulos que podemos usar. Y para mostrarles lo fácil que es usar un módulo descargado les hago un ejemplo con ngInfiniteScroll.
Esta módulo ngInfiniteScroll nos permite cargar contenido a medida que nos acerquemos a la parte inferior de la página. Por motivos de ejemplo no estoy cargando datos de una base de datos, simplemente avanzo en la cuenta dentro de una la lista numeros. Para usar este módulo es necesario como mínimo agregarlo a nuestro módulo como dependencia y proveer una función de carga de datos, ver el archivo 5-modulos.js
Luego dentro del HTML es necesario únicamente asignar la función de carga de datos a infinite-scroll y un valor que indique la distancia con respecto al inferior de la página en el atributo infinite-scroll-distance.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
1 - Servicios
Un servicio es una instancia única de un objeto, creada para acceder desde varias partes de nuestra aplicación. A esto tipo de instancias únicas se les conoce como Singleton.
Además de esta definición de los servicios se tiene otra en la cual se cuenta con conjunto de funciones de ayuda. Accede aquí a la lista de servicios oficial de Angular.js.
A continuación les muestro un ejemplo usando los servicios.
Esta aplicación consiste en una pequeña calculadora que puede sumar y restar los valores de entrada. Para hacer el ejemplo más interesante se cuenta con una función que permite respaldar un resultado y luego podamos sumarlo con cualquier otro resultado, esto con el fin de usar la propiedad de los servicios para tener una única instancia.
Para crear un servicio usamos la función service desde nuestro módulo, a esta le damos un nombre y una función que la maneje, esto lo vemos en la línea 3 del archivo 1-servicios.js. Ya dentro de la función que maneja nuestro servicio podemos usar la variable this para agregar funciones y atributos. En el ejemplo el manejador tiene el atributo respaldo y las funciones de suma y resta.
Una vez que creemos el servicio podemos acceder a través de todos los controladores que tengamos en nuestro módulo, para esto solo necesitamos pasarlo como parámetro a nuestra función del controlador, tal y como esta en la línea 11 del archivo 1-servicios.js. Ya una vez dentro del controlador podemos acceder a las funciones y alterar el valor que tengamos de nuestro atributo respaldo. Luego dentro del HTML se hacen uso de las funciones del controlador, teniendo la garantía de que nuestro servicio se a creado una sola vez y podemos acceder al último estado siempre.
Esta página se ve como la siguiente imagen:
2 - Fábricas
Las fábricas son un tipo de servicio, donde devolvemos siempre un dato de cualquier tipo. Lo normal es que el dato que devolvemos es un objeto de tipo diccionario donde podremos encontrar atributos y funciones. Seguimos con la misma garantía de que el objeto creado sea único y por tanto se vuelve un gran candidato para manejar sesiones de usuarios, comunicación entre controladores, entre otros.
A continuación les muestro un ejemplo usando las fábricas.
Esta página se trata de un registro de tareas realizadas, en el cual aprovecho el poder de las fábricas con el objeto Singleton, haciendo uso de la función de agregar tareas.
Ahora bien crear una fábrica se hace con la función factory desde el módulo (línea 3 en 2-fabricas.js), le damos un nombre y una función (debe retornar un valor) que maneje el comportamiento de la fábrica.
Ya para usar la fábrica dentro del controlador se hace de forma similar a los servicios, pasamos el nombre de la fábrica como argumento a la función del controlador (línea 22 en 2-fabricas.js) y luego simplemente accedemos a los atributos y funciones.
Noten que con esta instrucción $scope.dato = FabricaBitacora; (línea 36 en 2-fabricas.js) estan ya conectados el objeto de la fábrica y nuestro atributo del controlador, obteniendo en tiempo real dentro del HTML la actualización de los mensajes.
Esta página se ve como la siguiente imagen:
Existen también los providers, los cuales son una versión simplificada de las fábricas que permiten ver el valor retornado como objeto que tiene sus funciones de get y set, permitiendo así trabajar con el modelo orientado a objeto de la manera acostumbrada. Puedes consultar más sobre estos últimos en la documentación oficial de Angular.js. También existe esta pregunta en Stackoverflow donde discuten las diferencias, similitudes entre los servicios, fábricas y los proveedores.
Nota gracias a Levi Velazquez: Las fábricas también son Singletons y que tanto como los servicios y estas son pasadas por referencia. Se puede compartir la misma instancia entre controladores y otros servicios.
3 - Formularios
Angular.js incluye dentro de sus funciones unas ayudas para validar formularios y lo primero que debemos hacer es darle nombre a nuestra forma con el atributo name (línea 12 en 3-formularios.html). Luego es muy importante no olvidar colocar un modelo a cada etiqueta de entrada. Después de esto estamos autorizados para indicarle a nuestros campos de entrada y botones que están o no disponibles.
Para validar podemos usar ng-class el cual tiene 2 posibles clases a heredar:
- has-success: Recibe el parámetro que chequea como campo válido.
- has-error: Es el contrario al anterior ya que chequea la condición de error.
- 20: Solo se muestra si el email tiene un formato equivocado (forma.emailUsuario.$invalid) y el campo esta sucio (forma.emailUsuario.$dirty).
- 21: Chequea que se tenga un valor escrito, si no lo hay, entonces muestra el mensaje de que el campo es requerido.
- 22: Chequea que el campo tenga el formato corresponda a un Email.
Esta página se ve como la siguiente imagen:
Por último tenemos funciones para CSS la cual cambia el color de los campos de acuerdo a la validez del valor. Las funciones que se tienen para esto son:
- ng-valid: El modelo es válido.
- ng-invalid: El modelo no es válido.
- ng-pristine: El campo no se ha usado.
- ng-dirty: El campo ya se uso.
- ng-touched: El campo se ha tocado.
- ng-untouched: El campo no se ha tocado.
- ng-pending: El campo sigue a la espera de su uso.
4 - Animaciones
Una animación en general tiene puntos claves que deseamos mostrar, punto inicial y punto final, por supuesto podemos agregar puntos intermedios de interés para animaciones más elaboradas, pero para este ejemplo solo nos interesará punto inicial y final.
Angular.js nos incluye una serie de funciones de ayuda para manejar animaciones, las cuales se modifican desde el CSS y Javascript para determinar el comportamiento de la animación.
A continuación les muestro un ejemplo donde tenemos 2 tipos de animaciones:
La primera animación la creo desde el archivo 4-animaciones.js a través de la función animation, la cual recibe el nombre de la clase o id de interés y la función que maneja el comportamiento, línea 9 en el archivo 4-animaciones.js. Ahora bien es muy importante devolver un objeto en esta función para especificar el comportamiento de la animación, en este caso tenemos:
- leave: Comportamiento para desaparecer. En este caso se cambia el texto actual antes de desaparecer y luego se agrega la clase difuminar para desvanecer el texto.
- enter: Este especifica el comportamiento de aparecer. En este caso se cambia el texto y luego se agrega la clase difuminar, la cual a través de CSS hace que aparezca el elemento.
- Un atributo que determine el estado de la animación, lo cual logramos a través del controlador.
- Una especificación del CSS para la clase animada, en la que necesitamos especificar el efecto de transición y comportamiento de entrada-salida o agregar-remover. Notemos que la clase difuminar (archivo 4-animaciones.css) hace uso de funciones de Angular.js al tener dentro del comportamiento el nombre ng, donde el punto inicial de la animación se declara con ng-enter y ng-leave; y el punto final con las funciones ng-enter-active y ng-leave-active.
- ng-repeat: enter, leave y move.
- ng-view: enter y leave.
- ng-include: enter y leave.
- ng-switch: enter y leave.
- ng-show y ng-hide: add y remove.
Esta página se ve como la siguiente imagen:
Existen varias funciones de transiciones, en el ejemplo uso la ease-in-out para la animación 1 y cubic-bezier para la animación 2. Ambas tienen una duración de 1.618 segundos. Si deseas ver otras transiciones las puedes consultar W3Schools.
5 - Módulos
Los módulos en Angular.js son contenedores que nos permiten encapsular los controladores, servicios, filtros, entre otras funciones, es decir crear nuestras propias librerías y aún mas interesante usar otras que descarguemos.
Para crear un módulo basta con usar la función angular.module la cual recibe 2 parámetros:
- String: Este corresponde al nombre que deseemos darle a nuestro módulo.
- Lista de dependencias: Es una lista de strings que corresponden a los nombres de todos los módulos que queramos usar para nuestro módulo.
NGModules es una página que contiene una gran cantidad de módulos que podemos usar. Y para mostrarles lo fácil que es usar un módulo descargado les hago un ejemplo con ngInfiniteScroll.
Esta módulo ngInfiniteScroll nos permite cargar contenido a medida que nos acerquemos a la parte inferior de la página. Por motivos de ejemplo no estoy cargando datos de una base de datos, simplemente avanzo en la cuenta dentro de una la lista numeros. Para usar este módulo es necesario como mínimo agregarlo a nuestro módulo como dependencia y proveer una función de carga de datos, ver el archivo 5-modulos.js
Luego dentro del HTML es necesario únicamente asignar la función de carga de datos a infinite-scroll y un valor que indique la distancia con respecto al inferior de la página en el atributo infinite-scroll-distance.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
No hay comentarios:
Publicar un comentario