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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
importar { Componente } de @angular/core; importar { ICompañía } de '../../entidadInterfaces.ts'; @Componente({ selector: Empresas, templateUrl: './app/components/empresas/empresas.html' }) exportar clase EmpresasComponente { público empresas : Matriz; público constructor() { este.cargaEmpresas(); } } |
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
en el plantillaUrl
@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
. 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.empresas
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
array, puedo generar una tabla para listar todas las empresas.empresas
1 2 3 4 5 6 7 8 9 10 |
<tabla> <tr><th>Nombre</th></tr> <tr *ngFor="deja compañía de compañías;"> <td>{{empresa.companyName}}</td> <td> <a href="#" (haga clic en)="delete(empresa.id)">Borrar</a> </div> </td> </tr> </tabla> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
importar { Componente } de @angular/core; importar { ICompañía } de '../../entidadInterfaces.ts'; @Componente({ selector: Empresas, templateUrl: './app/components/empresas/empresas.html' }) exportar clase EmpresasComponente { público empresas : Matriz; público constructor() { este.cargaEmpresas(); } público borrar(id: cadena) { consola.registro("Borrar empresa: " + id) este.eliminarEmpresa(id); // eliminar de la matriz de empresas para(deje i=0; i < este.empresas.longitud; i++) { si(este.empresas[i].id == id) { este.empresas.empalme(i, 1); romper; } } } } |
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:
- Escribir un mensaje en la consola (para depuración/ilustración)
- 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).
- 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
Angular2 se dará cuenta y actualizará automáticamente el HTML renderizado ejecutando el comando empresas
*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:
- TypeScript
- Angular
- Aplicación de ejemplo Angular2 para Visual Studio