Formularios de datos en Angular2

ACTUALIZACIÓN: para una versión más reciente del contenido visita la página Formularios, tablas y modelos de datos en Angular


Los formularios en AngularJS fueron un éxito inicial debido entre otras coas al double binding. Otra cosa que no fue nunca simple es la validación de controles en los formularios. En Angular 2 y con la última versión RC3 la cosa mejora, pero es aún un Work in progress.

Leer más

CompartirComentarios

Comunicaciones http observables con Angular2

ACTUALIZACIÓN: para una versión más reciente del contenido visita la página Comunicaciones HTTP en Angular


En AngularJS, y en otros frameworks del lado cliente, la idea de fue simple desde el principio: dame plantillas estáticas y datos dinámicos. Las comunicaciones http son las arterias vitales de transporte de esos datos dinámicos. Y en Angular 2 se han revisado por completo, llevando las comunicaciones asíncronas al siguiente nivel.

Leer más

CompartirComentarios

Enrutador de componentes con Angular2 el nuevo SPA

ACTUALIZACIÓN: para una versión más reciente del contenido visita la página Páginas y rutas Angular SPA


Código asociado en angular2/6-routing/

La capacidad de gestionar las rutas en el cliente es una de las grandes ventajas de AngularJS. En la versión 1 nos ofrecían una solución demasiado simple que obligaba a usar librerías de terceros como la famosa ui-router. Hemos esperado años la promesa de un nuevo enrutador compatible con las versiones 1 y 2. El resultado es @angular/router.

De todo Angular2, este es el componente que más ha cambiado durante la fase Release Candidate. Actualmente confiamos en que las pequeñas dudas se resuelvan definitivamente y podamos relajarnos creando modernos desarrollos SPA.

Leer más

CompartirComentarios

Angular2 DI: Inyección de dependencias

ACTUALIZACIÓN: para una versión más reciente del contenido visita la página Servicios inyectables en Angular


Código asociado en angular2/4-injection/

AngularJS2 tiene vocación de framework para grandes aplicaciones de negocio. Los grandes desarrollos requieren modularidad en el código. En AngularJS se resuelve mediante la Inyección de Dependencias, siguiendo el conocido patrón Dependency Injection.

Los cambios en la versión 2 son sobre todo sintácticos, pero también conceptuales. Se mantiene el mismo objetivo, permitir hacer aplicaciones de negocio con HTML y JavaScript de manera controlable.

Leer más

CompartirComentarios

DataBinding el flujo de datos de Angular2

ACTUALIZACIÓN: para una versión más reciente del contenido visita la página Flujo de datos entre componentes Angular


Código asociado en angular2/3-databinding/

El doble binding o enlace vista controlador en ambos sentidos es una de las claves del éxito de AngularJS. Usando la célebre directiva ng-model enganchamos una propiedad del modelo con un control de la vista. De manera automágica Angular se suscribe a cambios en el DOM y observa el estado del modelo manteniéndolos en sincronía.

Pero esto tiene un coste en rendimiento que Angular2 supera con un patrón distinto para el control del flujo de datos entre la vista y el modelo. Este nuevo paradigma ofrece soluciones para distintos escenarios:

Flujo de datos

Leer más

CompartirComentarios

Componentes, los bloques de construcción de Angular2

ACTUALIZACIÓN: para una versión más reciente del contenido visita la página Base para una aplicación Angular


Código asociado en GitHub: angular2/2-modulos/

Los componentes son los bloques de construcción de la web moderna. En Angular 2 sustituyen al viejo par Vista-Controlador, el cual ya era opcional en las últimas versiones 1.x Ahora el componente es el rey.

Las aplicaciones en Angular2 se desarrollan como árboles de componentes. Estos árboles pueden llegar a ser muy frondosos y conviene dirigir su crecimiento agrupándolos en módulos para no perderse. Yo procuro estructurarlo en niveles para una mejor comprensión. En cada nivel se crea un módulo y dentro de él se declaran los componentes.

  • 1- Nivel Raíz:
    Toda aplicación parte de un componente raíz. Suele recibir el nombre de la aplicación desarrollada y el sufijo App o simplemente App.
  • 2- Nivel Troncal:
    Generalmente dos o tres componentes troncales para la estructura de las páginas. Es común el patrón Navegador-Contenedor, con algún elemento auxiliar para ayudas, mensajes, menús complejos…
  • 3- Nivel de Ramas:
    En este símil, las ramas equivalen a rutas o vistas de la aplicación. En un SPA cada ruta tiene una vista asociada que se carga dentro del componente troncal contenedor
  • 4- Nivel de Hojas:
    Cada una de las vistas está a su vez formada por múltiples componentes de negocio a modo de hojas.

Árbol de componentes en una aplicación Angular 2

Con la salvedad de que muchos de estos componentes los puedes reutilizar en distintas vistas.

Leer más

CompartirComentarios

Hola Mundo Angular 2

ACTUALIZACIÓN: para una versión más reciente del contenido visita la página Hola Angular CLI


Código asociado en GitHub: angular2/1-HolaMundo/

Qué lejanos aquellos tiempos dónde un Hola Mundo en AngularJS se hacía en 2 líneas de código. Ahora necesitaré miles de ficheros y media hora de explicación. Pero el resultado valdrá la pena. Estaremos en la pista de lanzamiento para crear aplicaciones de nivel empresarial con Angular 2.

Ya he explicado que Angular ha pasado de framework a plataforma, y que ya no es para aficionados. Grandes desarrollos en equipo requieren herramientas y procedimientos a la altura. La primera opción que te recomiendo es Angular CLI, un generador de aplicaciones trufado de buenas prácticas y procedimientos. Por raro que te parezca, cualquier otra opción es aún más compleja que la que te muestro.

Leer más

CompartirComentarios

Angular2, la evolución de la plataforma

Coincidiendo con la ngConf 2016 acaba de presentarse la esperada Release Candidate de Angular 2. Nunca antes una versión de una herramienta para desarrolladores había causado tal expectación. Hace ya 18 meses que se había anunciado como una evolución rupturista con respecto a AngularJS 1. Y ahora esa ruptura se ha materializado.

Los programadores somos muy conscientes de que lo único estable es el cambio. Asumimos, por experiencia, que los cambios en una tecnología son evoluciones graduales constantes. Pero esto no es así en Angular2, y lo sabemos desde su anuncio hace año y medio. Desde ese momento todos fuimos advertidos de que estábamos ante otra cosa. Algo nuevo que sólo comparte paternidad y nombre con la anterior versión.

Leer más

CompartirComentarios

Node 6.0.0 actualización con nvm

Acabamos de recibir la buena noticia de la versión 6 de NodeJS. En este caso con mejoras de rendimiento e incorporación de sintaxis de ES6. ¿Cómo obtener esta nueva versión?. Y sobretodo, ¿cómo manejar la convivencia de distintas versiones? La ayuda se llama nvm

Estos son los pasos que has de seguir para instalar la herramienta.

Se recomienda desinstalar las versiones de node y npm instaladas previamente. No es obligatorio.

LINUX & OS X

1- Comprobamos que tenemos instaladas las dependencias
1.1 - Dependencias Linux

1
2
sudo apt-get update
sudo apt-get install build-essential

1.2 -Dependencias OSX (herramientas de linea de comandos para XCode)

1
xcode-select --install

2- Descargamos y ejecutamos el script de instalación

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

3- Comprobamos que está instalado NVM

1
command -v nvm

debe devolver nvm

4- Instalamos la versión de Node que deseamos

1
nvm install 6.0.0

5- Elegimos la versión de Node instalada que deseamos usar

1
nvm use 6.0.0

WINDOWS

Para Windows no existe una versión nativa de nvm, pero si hay dos opciones para gestionar las versiones de node instaladas.

1- nvm-windows
https://github.com/coreybutler/nvm-windows
Es un wrapper de npm para windows, el instalador se encuentra en la URL (https://github.com/coreybutler/nvm/releases).

Los comandos para instalar y la versión de Node son los mismos que en Linux y OSX.

2- nodist
Es un gestor de versiones parecido a NVM solo para Windows
La URL del instalador (https://github.com/marcelklehr/nodist/releases/download/v0.7.2/NodistSetup-v0.7.2.exe).
Los comandos se encuentran en la documentación. (https://github.com/marcelklehr/nodist)

CompartirComentarios

npm: de instalador a publicador

Seguro que estás harto de repetir la mítica instrucción npm install paquete-x Pero, ¿has pensado en publicar tus propios módulos?. Es muy recomendable crear soluciones distribuidas y muy fácil publicarlas en npm.

Sigue este proceso y te convertirás en un creador de paquetes para npm :

Programa

Todo empieza por tener una necesidad y resolverla encapsulando su código en un módulo. Por supuesto que ese módulo puede requerir paquetes externos. Y por supuesto que tu código puede, y debe, escribirse en varios módulos.

Antes de continuar vamos a fijar un par de conceptos:

- módulo: Fichero .js que exporta un funcionalidad y oculta su implementación.

- paquete: Uno o más módulos, con sus dependientes de otros paquetes que proponen una solución reutilizable.

Conocidos los ingredientes, la receta es sencilla:

  1. Debes crear un proyecto para el paquete que vas a publicar.
  2. Has de subir el código a un repositorio público.
  3. Y debes rellenar convenientemente el package.json de tu proyecto.

Este es un ejemplo que he creado y publicado en github que te puede servir de base.

Presta especial atención al nombrado de tu proyecto porque ha de ser único en el repositorio de npm. Para reducir riesgos de colisiones de nombre te recomiendo que utilices un prefijo con tus iniciales o las de tu empresa.

No te olvides de incluir un juego de pruebas y documentación necesaria para sus uso.

Publica

Puedes descargar librerías y herramienta desde el repositorio de npm de forma anónima. De hecho, eso es lo más corriente. Pero, como era de esperar, tienes que registrarte para poder publicar contenido. El proceso de registro vía web es sencillo y grátis.

Una vez verificado puedes hacer login en la web. Pero también en la terminal de tu ordenador: npm login te pedirá el nombre de usuario y contraseña. A partir de es momento estás identificado y puedes usar las herramientas de autor:

1
npm publish

Puedes encontrar más información acerca de este mega comando en la documentación de npmjs. Pero siguiendo la máxima de cuanto menos, mejor, la herramienta hará con sus valores por defecto un publicación y actualización limpias.

La clave está en que tu fichero de configuración package.json sea correcto y lo más completo posible. Escribe un completo readme.md que se convertirá en portada de tu paquete en el repositorio de npm. Mira en mi ejemplo cómo el contenido subido a github se transforma y se ve en la página de información de npm.

Comprueba en un directorio vacío que npm install nombre-de-tu-paquete descarga todo lo necesario… y tómate un café mientras ves crecer la hierba y las estadísticas de descargas.

Actualiza

Con el tiempo mejorarás y corregirás tu solución. Te recomiendo que sigas el patrón de nombrado de versiones semántico:

x.y.z = 1.2.3 = ruptura.mejora.parche

Es bueno que etiquetes tu repositorio con estas mismas versiones para que, una vez desplegadas, se encuentre con facilidad en github.

1
2
git tag 0.1.2
git push --tags

Disfruta

Finalmente podrás utilizar ese código en todas tus aplicaciones. Sería fantástico que además otros lo encontrasen útil. Y mejor aún si te ayudan o al menos te proponen mejoras. Pero en cualquier caso siempre habrás ganado. El esfuerzo analítico que requiere se cobra con creces: dividiendo el problema, creando micro soluciones eficientes y reutilizando código siempre es rentable.

CompartirComentarios