Programando con Rupert

Cuando la programación es una forma vida...

Tag: App (page 1 of 2)

AngularJS: Peticiones por AJAX

¡Hola de nuevo! Tras un largo periodo en que mi vida personal y laboral ha dado un giro de 180º, es momento de desempolvar el blog y continuar escribiendo algo.

En el último artículo de AngularJS vimos una pequeña introducción a la Inyección de Dependencias. Esta vez, siguiendo el “hilo argumental”,  y antes de volver a la serie de Ionic Framework, vamos a ver cómo podemos realizar peticiones por AJAX desde un controlador de AngularJS.

Objetivo del ejemplo

En este sencillo ejemplo vamos a ver cómo realizar peticiones asíncronas por medio del servicio $http. Al hacer click sobre un botón, se lanzará una petición contra el servicio localizado en http://www.programandoconrupert.com/ws/servicio-gatos.php. Dicho servicio contiene el siguiente código:

Por lo tanto, recuperaremos un array en formato JSON, que nosostros mostraremos en nuestro HTML.

Preparación del ejemplo

Para comenzar con este ejemplo vamos a tener un módulo llamado AppGatos y un controlador llamado ControladorGatos. En el $scope de ese controlador tendremos una colección que llamaremos gatos, además de una función llamada obtenerGatos, que llamaremos desde un botón en el HTML.

Y este sería el HTML que utilizaremos para llamar a la función obtenerGatos y mostrar el modelo gatos:

Servicio $http

Para realizar la llamada por AJAX al servicio que devolverá el JSON con el array, utilizaremos el servicio de AngularJS $http. Se trata de una API que permite realizar peticiones asíncronas al servidor por medio de XMLHttpRequest o por medio de JSONP.

Para utilizarlo necesitamos inyectarlo al controlador:

Llamada explícita

Como en la mayoría de frameworks Javascript con soporte AJAX, disponemos de una función general donde se pueden específicar todas las peculiaridades de la petición, y por otro lado disponemos de métodos de abreviatura que nos permiten realizar llamadas más genéricas pero de una manera más rápida.

Para utilizar la función general, se le pasa un objeto de configuración con ciertas propiedades, entre las que pueden estar:

  • method – Método HTTP con el que se realiza la petición
  • url – URL a la que realizamos la petición
  • params – Listado de parámetros GET
  • data – Listado de parámetros que se envían en la petición
  • headers – Cabeceras de la petición
  • withCredentials – Indica si la petición requiere credenciales
  • responseType – Tipo de datos que se esperan en la respuesta

Mediante el método .then() especificamos los callbacks que recibirán la respuesta, bien de success o bien de error. El objeto que recibimos tiene estas propiedades:

  • data – Contenido de la respuesta
  • status – Código de estado HTTP
  • headers – Getter del Header
  • config – Objecto de configuración que se utilizó para crear la petición
  • statusText – Texto de estado

De esta manera, en nuestro ejemplo, la llamada para recibir el listado de gatos sería así:

Métodos abreviados

Por el lado contrario tenemos los métodos abreviados para realizar peticiones. Estos métodos ahorran bastante tiempo de desarrollo, permitiendo además añadir el objeto de configuración para especificaciones adicionales. Estos métodos son:

  • $http.get
  • $http.post
  • $http.put
  • $http.delete
  • $http.head
  • $http.jsonp

Con esto hemos visto lo básico para poder comunicarnos con el servidor desde nuestra aplicación Ionic mediante AngularJS.

¡Hasta la próxima!

Rupert.

AngularJS: Introducción a la Inyección de Dependencias

En artículos anteriores ya hemos visto cómo trabajar con controladores y ámbitos y cómo añadirles eventos. En este artículo vamos a ver cómo podemos comunicar esos controladores mediante la inyección de dependencias.

Para ello vamos a ver ciertos elementos de AngularJS (value, factory y service) que nos van a ayudar a publicar valores y funciones para “inyectarlas” a los diferentes controladores.

Preparación del ejemplo

Para las opciones que vamos a ver en este artículo voy a tomar como base el siguiente código. Básicamente es una página con el módulo AppGatos declarado con dos controladores. Por cada controlador vamos a tener un div que mostrará ciertos datos, un campo de texto y un botón al que le iremos asignando funcionalidad en cada acción:

Por lo tanto si ejecutamos esta página veremos que de momento sólo contamos con el $scope de cada uno de los controladores y, al ejecutar la acción, cada actualización será independiente entre los controladores.

Inyección Implícita vs Explícita

A partir de ahora vamos a empezar a jugar con la Inyección de Dependencias. En el código base, sin embargo, ya hemos empezado a utilizarla. El sistema es el siguiente: Los módulos de AngularJS van a exponer una serie de elementos que pueden ser “reclamados” o no por otros módulos de AngularJS.

En el código base que estamos utilizando ya estamos reclamando el objeto $scope. Y en este caso hemos utilizado la Inyección Implícita, ya que obtenemos el objeto mediante el nombre de variable:

En principio no hay mucho problema en utilizar este sistema (de hecho voy a utilizar el sistema implícito en este artículo) pero puede haber problema si estamos utilizando alguna tecnología que minimice el código. Por ejemplo, en vez de $scope, lo puede transformar en a, por lo tanto ya no reconoce el objeto $scope expuesto. Para solucionarlo lo más recomendable es utilizar la Inyección Explícita, que se basa en declarar un array donde se especifica por String los elementos que vamos a inyectar en el mismo orden en el que los necesitamos en la declaración de la función:

Value

El elemento value sirve para declarar valores  que utilizarán los controladores y se declara durante la configuración

Factory

Factory es una función que devuelve un objeto con sus atributos y funciones. Devuelve ese objeto cada vez que un controlador o un servicio lo pide. Lo que se devuelve en un factory es un objeto con todos los elementos del factory.

El objeto se crea al declarar el factory y es compartido por los servicios y controladores.

Service

Service es un objeto Javascript que contiene un conjunto de funciones que realizan ciertas tareas. Puede ser inyectado en un controlador o en otro servicio.

A diferencia de Factory, se crea un nuevo objeto cada vez que se inyecta en un controlador o en un servicio.

Con esto hemos visto una pequeña introducción a la Inyección de Dependencias, en otro artículo crearé un módulo completo de AngularJS para ver cómo aplicar todo lo que hemos visto hasta ahora.

¡Hasta la próxima!

Rupert.

AngularJS: Modelo y eventos

En el artículo anterior escribí un pequeño acercamiento al sistema de Módulos y Controladores de AngularJS. En este artículo vamos a introducir un nuevo concepto: el Modelo, y cómo podemos modificarlo mediante eventos de la vista.

Preparación del Ejemplo

En este ejemplo vamos a trabajar con una vista que llamará a un módulo llamado AppGatos, cuyo objetivo será mostrar los datos de un dueño o dueña de gatos y poder cambiar su nombre y apellidos.

Por otro lado,  se mostrará un listado de los gatos de esa persona y nos dará la posibilidad de añadir un nuevo gato al listado. ¡Vamos a ello!

Atributos ng-model y ng-bind

Como vimos en el anterior artículo, cada controlador de AngularJS va a tener como mínimo un parámetro $scope, que va a representar el modelo de dominio del módulo. Para conseguir editar el nombre y el apellido del dueño o dueña de los gatos, vamos a declarar el módulo y el controlador, incializando las variables nombre y apellido.

El atributo ng-model enlaza el elemento al que se aplique con la variable del modelo a la que se aplique. Este enlace es bidireccional (Two-Way-Binding), eso quiere decir que si se modifica el modelo, se actualizará el elemento y que si se modifica el elemento, se actualizará el modelo.

Para ver cómo funciona voy a crear dos inputs en el HTML para que gestionen el nombre y el apellido.

El atributo ng-bind, al igual que ng-model, enlaza el elemento al que se aplique con la variable del modelo a la que se aplique. Pero hay una diferencia, y es que el enlace es de sólo lectura (Read-Only-Binding). Eso quiere decir que sólo se actualizará el elemento HTML si se modifica el modelo.

Siguiendo con el ejemplo, voy a imprimir el nombre y el apellido. El nombre lo imprimiré de la manera estándar de AngularJS ( {{ }} ) y el apellido mediante ng-bind.

Atributo ng-repeat

En muchas ocasiones nos encontramos con colecciones dinámicas que hay que imprimir en la vista respetando, lógicamente, la coherencia entre un elemento y el siguiente. Voy a añadir esta colección de gatos al modelo.

El atributo ng-repeat aplicado a un elemento HTML implica que se va a repetir dicho elemento por cada registro de la colección. Para ver cómo funciona, voy a crear una lista desordenada (ul) y por cada elemento de la colección imprimiré un li.

Atributo ng-click

El atributo ng-click permite añadir funcionalidad al evento click del elemento al que se aplique. Lo primero que voy a hacer es añadir una función al modelo con el que estamos trabajando.

Lo que me interesa es que se vacíen los campos en la vista, así que utilizo el método extend para realizar una copia del objeto. Si no lo hacemos al reiniciar los valores se vaciaría también el elemento de la lista, ya que en AngularJS se trabaja con referencias.

Para terminar voy a crear el formulario en HTML y voy a aplicar el atributo ng-click al botón Añadir Gato

Este es el ejemplo completo:

Pues con esto nos hemos metido un poco más en el funcionamiento del modelo y la creación de eventos. En siguientes tutoriales veremos qué es eso de la inyección de dependencias.

¡Hasta la próxima!

Rupert.

AngularJS: Módulos, Controladores y Scopes

¡Pero bueno! ¿Cuánto hace que no me pasaba por estos lares? ¡Ha comenzado ya el 2016 y con él estrenamos dominio y cambio de look! 😀

Voy a dar pistoletazo de salida a este nuevo año continuando los artículos de AngularJS, que va a ser imprescindible para trabajar con Ionic Framework. En este artículo escribiré sobre los Módulos, Controladores y los Scopes. Al lío.

Estructura de Módulos

Antes de pararnos a ver cada uno de estos tres elementos de manera individual, vamos a tomar un poco de perspectiva y veamos cómo interactúan estos elementos entre ellos.

Como vemos en el esquema, nosotros trabajaremos siempre sobre una vista. Esta vista hará referencia directamente a un módulo, que puede o no, necesitar funciones de otros módulos.

Cada módulo puede tener uno o varios controladores, cada uno de ellos con sus propios scopes y funcionalidades.

De tal manera que la vista, habiendo referenciado a un único módulo, tiene la funcionalidad de todos los módulos requeridos.

Módulos

Un módulo de AngularJS es básicamente lo que su nombre indica, una parte del total de la aplicación con un cometido en particular. Cada página (Vista) va a utilizar un módulo mediante el atributo ng-app.

Un módulo puede funcionar de manera independiente o requerir otros módulos existentes para su funcionamiento.

Para declarar un módulo desde Javascript utlizamos el método angular.module. Este método acepta dos parámetros, el primero es el nombre del módulo y el segundo es un array con los nombres de los módulos requeridos para que este módulo funcione.

En este caso se ha definido un módulo llamado AppGatos que requiere otro módulo llamado AppPerros. Este módulo devuelve una referencia al módulo, que puede ser empleada más adelante.

Si se aplica el método angular.module sobre el mismo nombre de módulo se estaría haciendo referencia al mismo módulo.

Por último para indicarle a una vista que va a utilizar el módulo creado, se utiliza el atributo ng-app

Controladores y Scopes

Todo módulo necesita como mínimo un controlador para funcionar. Un controlador es una parte funcional de un módulo, con sus propias variables, modelos y métodos.

Para declarar un controlador, se utiliza el método controller() del objeto module. Este método acepta como mínimo un parámetro llamado $scope.

El elemento $scope representa el ámbito de variables, modelos y métodos del controlador.

Ya que tanto el método angular.module() como el método .controller() devuelven una referencia al módulo, es posible concatenar métodos.

Para especificar a un contenedor de HTML que va a utilizar un controlador, se utiliza el atributo ng-controller. En este ejemplo se ve todo lo que hemos visto:

Con lo cual el resultado debería ser algo parecido a esto

Hola Rupert ¡miau!
Hola Roy ¡guau!

Con esto ya nos hemos acercado un poco al sistema de módulos y controladores en AngularJS. En el siguiente artículo veremos cómo empezar a añadir funcionalidad a nuestra vista.

¡Hasta la próxima!

Rupert.

Ionic Framework: Primera aplicación

¡Hola de nuevo! En los dos últimos artículos escribí acerca de la instalación de Ionic Framework y pudimos ver la estructura de un proyecto. En este artículo vamos a crear la primera aplicación con Ionic.

Objetivo de la aplicación

La aplicación que vamos a desarrollar pedirá un nombre de usuario mediante una caja de texto. Si el nombre no está vacío y tiene más de cuatro caracteres imprimirá un mensaje en pantalla “El usuario [NombreDeUsuario] se ha registrado correctamente.“.

La aplicación tendrá un Footer que indicará “Primera Aplicación“.

NOTA: Los componentes que se utilizarán en los ejemplos se pueden examinar en la siguiente dirección: http://ionicframework.com/docs/components/

Creación del Proyecto

Para crear el proyecto abrimos la consola de Node.js y escribimos:

ionic start PrimeraAplicacion blank

Y en la carpeta de la aplicación ejecutamos la siguiente instrucción para manejar el archivo scss:

ionic setup sass

El archivo scss/ionic.app.scss

Este archivo indica las variables por defecto aplicadas a los estilos de la aplicación. Existen una serie de clases en Ionic (bar-stable, bar-royal, bar-positive…) que toman sus colores de este fichero. Nosotros, por supuesto, podemos sobrescribirlos.

La variable que indica el “color” de la aplicación es la variable $positive. Voy a establecer el color positivo a #026735.

El archivo www/index.html

En este fichero estableceremos el HTML de la aplicación. Lo primero va a ser añadir la cabecera y el footer a la pantalla. Después incluiremos los elementos de contenido de la pantalla.

Cabecera

Para añadir una cabecera, se ha de añadir una etiqueta ion-header-bar

<ion-header-bar class=”bar-positive”>
<h1 class=”title”>Programando con Rupert</h1>
</ion-header-bar>

Footer

El footer es un div que ha de tener la clase bar-footer junto con la clase de color que nos interese:

<div class=”bar bar-footer bar-dark”>
<div class=”title”>Primera Aplicación</div>
</div>

Contenido

El contenido de la pantalla se ha de establecer dentro de la etiqueta ion-content. A partir de aquí se puede establecer el HTML que queramos. Aunque Ionic ya incluye una serie de estilos que podemos encontrar en la URL mencionada anteriormente.

En este punto ya tenemos el HTML estructurado, es momento de añadirle funcionalidad

El archivo www/js/main.js

En este ejemplo voy a crear un fichero main.js para separar las funcionalidades de mi aplicación, pero se puede trabajar sin problemas sobre el fichero app.js

Por último, añadimos la referencia a main.js desde index.html

<script src=”js/main.js”></script>

Y añadimos el evento onclick al botón

<button class=”button button-positive” onclick=”Registrar()”>
Registrar
</button>

Probar la aplicación

Para probar la aplicación, desde la consola de Node.js, y ubicados en la carpeta del proyecto, ejecutamos:

ionic serve –lab

Con este artículo ya hemos metido un poco el hocico en el modo de trabajo con Ionic. En siguientes artículos nos centraremos en las diferentes características de Ionic Framework y sus componentes.

¡Hasta la próxima!
Rupert.

Entradas anteriores

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑