Programando con Rupert

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

Tag: iOS (page 1 of 2)

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.

Ionic Framework: IDE y Estructura de un Proyecto

¡Hola de nuevo! Hace unos días escribí una pequeña introducción a Ionic Framework, explicando el proceso de instalación y cómo probar un proyecto.

En este artículo os voy a hablar de uno de los entornos de desarrollo que se pueden utilizar para trabajar con Ionic y vamos a analizar la estructura de un proyecto.

Entorno de Desarrollo

Realmente se puede utilizar cualquier IDE que permita trabajar con proyectos Cordova. Entre otros, tenemos el Eclipse, el Android Studio, NetBeans, Visual Studio, PHPStorm

Para trabajar con estos artículos yo voy a utilizar el WebStorm, ya que estamos hablando de un IDE bastante robusto, completo e intuitivo.

Plantillas de Proyecto

A la hora de crear un proyecto, se le puede especificar una de las plantillas starter predefinidas que tiene Ionic para empezar a trabajar desde ahí.

ionic start ProgramandoConRupert blank

ionic start ProgramandoConRupert tabs

ionic start ProgramandoConRupert sidemenu

Estructura de un proyecto

A modo de introducción para los proyectos de Ionic Framework, vamos a analizar rápidamente los elementos más importantes que nos encontramos en un proyecto básico (blank)

Ficheros

  • bower.json – Dependencias de Bower
  • config.xml – Configuración de Apache Cordova
  • gulpfile.js – Tareas Gulp
  • ionic.project – Configuración de Ionic
  • package.json – Dependencias de Node.js

Carpetas

  • hooks – Hooks de Cordova para ejecutar comandos personalizados
  • plugins – Carpeta donde se instalarán los plugins de Cordova e Ionic
  • scss – Código scss, cuya salida escribirá en www/css
  • www – Archivos de la aplicación: HTML, Javascript y css

Y con esto que hemos visto ya conocemos un poquito más los proyectos de Ionic y los elementos más importantes que nos vamos a encontrar en los proyectos. En los siguientes artículos comenzaremos a trabajar con estos proyectos para empezar a crear aplicaciones móviles.

¡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' ↑