Aprendizaje de Angular2 para la pila CEAN

La pila CEAN (pronunciado "keen") se utiliza para diseñar aplicaciones web con una interfaz de usuario segregada (es como la pila MEAN, excepto que utiliza Servidor Couchbase).

Estoy aprendiendo y escribiendo Angular2 por primera vez este mes, así que pensé en tomarme un momento para bloguear sobre lo que he aprendido. Si ves algo que estoy haciendo mal o de manera subóptima, ahora es tu oportunidad de darme tu opinión y ayudarme a aprender. Puedes dejar un comentario o envíame un tweet.

Algunos antecedentes rápidos: Nunca he usado ninguno de estos modernos frameworks de interfaz de usuario en ningún código de producción (todavía). Esto incluye Angular, Angular2, Ember, React, etc. De donde vengo, todo estaba en JavaScript/jQuery/jQuery UI.

Código TypeScript

No tienes que usar TypeScript para usar Angular2, pero mi compañero de trabajo Nic Raboy lo ha estado usando por un tiempo, y eso es lo que me ha estado guiando a usar.

TypeScript es un superconjunto de JavaScript (piensa en él como JavaScript++) que se transpila a JavaScript plano. En Angular2, una página (o vista) está acoplada a un archivo TypeScript (ts) (viniendo de un fondo ASP.NET, pienso en estos como "archivos de código detrás"). El archivo TS es responsable de cargar los datos que la vista puede utilizar, así como de responder a los eventos de la vista.

Un ejemplo muy sencillo de un archivo TS que carga empresas desde un punto final REST y las pone a disposición de la vista para su uso:

En este ejemplo, he "importado" (esto es como un "using" en C#) un tipo de interfaz llamado ICompany. Así es, en TypeScript puedes declarar tipos de una forma mucho más explícita que en JavaScript plano. El plantillaUrl en el @Componente le dice a este fichero TS a qué fichero HTML corresponde. Por último, estoy creando una clase con un constructor y un campo llamado empresas. El constructor llama a un método para cargar esas empresas (desde un punto final REST usando Ajax). En este punto, empresas está disponible para que el archivo HTML haga referencia.

Vista Angular2

Una vista HTML en Angular2 es principalmente HTML, pero yo pienso en ella como una plantilla. Dentro de esta plantilla, utilizo varias etiquetas y sintaxis específicas de Angular2 para renderizar algo dinámicamente.

Por ejemplo, ahora que tengo el empresas array, puedo generar una tabla para listar todas las empresas.

La mayor parte es HTML que no deberías tener problemas para leer.

Lo primero que no es HTML normal es el botón *ngPor con un bucle especificado: dejar empresa de empresas. Pienso en esto como foreach(var company in companies) en términos de C#. Dado que el ngPor está en el <tr> ese elemento (y sus hijos) se repetirá una vez por cada empresa de la matriz. Así, si hay 3 empresas, habrá tres <tr> filas.

Lo siguiente fuera de lo común es el {{company.companyName}}. Si ha utilizado Bigote u otras plantillas del lado del cliente, esto debería resultarle familiar. Se trata simplemente de interpolar el valor de la variable nombre de la empresa en el HTML. Así, si el primer empresa.nombreempresa tiene el valor "Couchbase", la salida será <td>Couchbase</td>.

Por último, he creado un enlace "eliminar" en cada fila. Lo que es fuera de lo común allí es el (clic) atributo. Esto le dice a Angular que ejecute algún TypeScript cuando se haga clic en el enlace de borrado. En este caso, es el atributo borrar en el código TS. Está pasando un parámetro a ese método.

Con el método de borrado, el código sería el siguiente:

 

Obsérvese que el borrar tiene un parámetro, y como esto es TypeScript, es un parámetro mecanografiado parámetro.

Hay tres cosas que hago en ese método de borrado:

  1. Escribir un mensaje en la consola (para depuración/ilustración)
  2. Llamar a un método que enviará una petición POST o DELETE a un endpoint HTTP (he omitido ese método ya que los detalles no son importantes ahora. También he omitido cualquier uso de Promise/callback que sería necesario en una situación asíncrona como esta).
  3. Estoy eliminando la empresa del campo empresas (haciendo un bucle y eliminando la empresa con el id correspondiente). Alternativamente, podría llamar a loadCompanies y actualizar toda la lista de nuevo, y eso significaría otro viaje a la base de datos.

El paso 3 contiene algo de la magia de Angular2 que deberías conocer: cuando el botón empresas Angular2 se dará cuenta y actualizará automáticamente el HTML renderizado ejecutando el comando *ngPor bucle de nuevo.

Otras cosas

Algunas otras cosas que he estado haciendo que puedo bloguear más tarde:

  • Formularios en Angular2: me permitirían crear/editar empresas en el ejemplo anterior.
  • Bibliotecas/plugins JavaScript: para el borrar sería bueno tener un diálogo de confirmación. Estoy utilizando arranque...así que estaría bien si pudiera... introducir bootbox para usar en los diálogos de confirmación.
  • Promesas: son importantes cuando se trabaja de forma asíncrona (como cuando se realizan peticiones HTTP a puntos finales de API)

Conclusión

Sigo siendo un escéptico sobre los beneficios a largo plazo de estos frameworks JS y del propio TypeScript (pregúntame alguna vez en Twitter), pero estoy tomando medidas para aprender las herramientas. Si después de todo esto sigo siendo escéptico, al menos no seré un escéptico ignorante.

Algunos recursos para seguir explorando TypeScript y Angular2:

Comparte este artículo
Recibe actualizaciones del blog de Couchbase en tu bandeja de entrada
Este campo es obligatorio.

Autor

Publicado por Matthew Groves

A Matthew D. Groves le encanta programar. No importa si se trata de C#, jQuery o PHP: enviará pull requests para cualquier cosa. Lleva codificando profesionalmente desde que escribió una aplicación de punto de venta en QuickBASIC para la pizzería de sus padres, allá por los años noventa. Actualmente trabaja como Director de Marketing de Producto para Couchbase. Su tiempo libre lo pasa con su familia, viendo a los Reds y participando en la comunidad de desarrolladores. Es autor de AOP in .NET, Pro Microservices in .NET, autor de Pluralsight y MVP de Microsoft.

Deja un comentario

¿Listo para empezar con Couchbase Capella?

Empezar a construir

Consulte nuestro portal para desarrolladores para explorar NoSQL, buscar recursos y empezar con tutoriales.

Utilizar Capella gratis

Ponte manos a la obra con Couchbase en unos pocos clics. Capella DBaaS es la forma más fácil y rápida de empezar.

Póngase en contacto

¿Quieres saber más sobre las ofertas de Couchbase? Permítanos ayudarle.