{"id":2372,"date":"2016-08-17T14:59:45","date_gmt":"2016-08-17T14:59:45","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=2372"},"modified":"2023-09-11T00:43:22","modified_gmt":"2023-09-11T07:43:22","slug":"learning-angular2-for-the-cean-stack","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/es\/learning-angular2-for-the-cean-stack\/","title":{"rendered":"Aprendizaje de Angular2 para la pila CEAN"},"content":{"rendered":"
\n
\n
\n

La pila CEAN (pronunciado \"keen\") se utiliza para dise\u00f1ar aplicaciones web con una interfaz de usuario segregada (es como la pila MEAN, excepto que utiliza Servidor Couchbase<\/a>).<\/p>\n<\/div>\n

\n

Estoy aprendiendo y escribiendo Angular2 por primera vez este mes, as\u00ed que pens\u00e9 en tomarme un momento para bloguear sobre lo que he aprendido. Si ves algo que estoy haciendo mal o de manera sub\u00f3ptima, ahora es tu oportunidad de darme tu opini\u00f3n y ayudarme a aprender. Puedes dejar un comentario o env\u00edame un tweet<\/a>.<\/p>\n<\/div>\n

\n

Algunos antecedentes r\u00e1pidos: Nunca he usado ninguno de estos modernos frameworks de interfaz de usuario en ning\u00fan c\u00f3digo de producci\u00f3n (todav\u00eda). Esto incluye Angular, Angular2, Ember, React, etc. De donde vengo, todo estaba en JavaScript\/jQuery\/jQuery UI.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n

C\u00f3digo TypeScript<\/h2>\n
\n
\n

No tienes que usar TypeScript para usar Angular2, pero mi compa\u00f1ero de trabajo Nic Raboy lo ha estado usando por un tiempo, y eso es lo que me ha estado guiando a usar.<\/p>\n<\/div>\n

\n

TypeScript es un superconjunto de JavaScript (piensa en \u00e9l como JavaScript++) que se transpila a JavaScript plano. En Angular2, una p\u00e1gina (o vista) est\u00e1 acoplada a un archivo TypeScript (ts) (viniendo de un fondo ASP.NET, pienso en estos como \"archivos de c\u00f3digo detr\u00e1s\"). El archivo TS es responsable de cargar los datos que la vista puede utilizar, as\u00ed como de responder a los eventos de la vista.<\/p>\n<\/div>\n

\n

Un ejemplo muy sencillo de un archivo TS que carga empresas desde un punto final REST y las pone a disposici\u00f3n de la vista para su uso:<\/p>\n<\/div>\n

\n
\n
import { Component } from '@angular\/core';\r\nimport { ICompany } from '..\/..\/entityInterfaces.ts';\r\n\r\n@Component({\r\n  selector: 'companies',\r\n  templateUrl: '.\/app\/components\/companies\/companies.html'\r\n})\r\n\r\nexport class CompaniesComponent {\r\n\r\n    public companies : Array;\r\n\r\n    public constructor() {\r\n        this.loadCompanies();\r\n    }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
\n
En este ejemplo, he \"importado\" (esto es como un \"using\" en C#) un tipo de interfaz llamado ICompany. As\u00ed es, en TypeScript puedes declarar tipos de una forma mucho m\u00e1s expl\u00edcita que en JavaScript plano. El plantillaUrl<\/code><\/code> en el @Componente<\/code><\/code> le dice a este fichero TS a qu\u00e9 fichero HTML corresponde. Por \u00faltimo, estoy creando una clase con un constructor y un campo llamado empresas<\/code><\/code>. El constructor llama a un m\u00e9todo para cargar esas empresas (desde un punto final REST usando Ajax). En este punto, empresas<\/code><\/code> est\u00e1 disponible para que el archivo HTML haga referencia.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Vista Angular2<\/h2>\n
\n
\n
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\u00edficas de Angular2 para renderizar algo din\u00e1micamente.<\/p>\n<\/div>\n
\n
Por ejemplo, ahora que tengo el empresas<\/code><\/code> array, puedo generar una tabla para listar todas las empresas.<\/p>\n
<table>\r\n    <tr><th>Nombre<\/th><\/tr>\r\n    <tr *ngfor="let company of companies;">\r\n        <td>{{company.companyName}}<\/td>\r\n        <td>\r\n            <a href="#" (click)="delete(company.id)">Borrar<\/a>\r\n            <\/div>\r\n        <\/td>\r\n    <\/tr>\r\n<\/table><\/pre>\n
La mayor parte es HTML que no deber\u00edas tener problemas para leer.<\/p>\n<\/div>\n<\/div>\n
\n
Lo primero que no es HTML normal es el bot\u00f3n *ngPor<\/code><\/code> con un bucle especificado: dejar empresa de empresas<\/code><\/code>. Pienso en esto como foreach(var company in companies)<\/code><\/code> en t\u00e9rminos de C#. Dado que el ngPor<\/code><\/code> est\u00e1 en el\u00a0<tr>\u00a0<\/span><\/span>ese elemento (y sus hijos) se repetirá una vez por cada empresa de la matriz. Así, si hay 3 empresas, habrá tres <tr> filas.<\/p>\n<\/div>\n
\n
Lo siguiente fuera de lo com\u00fan es el {{company.companyName}}<\/code><\/code>. Si ha utilizado Bigote<\/a> u otras plantillas del lado del cliente, esto deber\u00eda resultarle familiar. Se trata simplemente de interpolar el valor de la variable nombre de la empresa<\/code><\/code> en el HTML. As\u00ed, si el primer empresa.nombreempresa<\/code><\/code> tiene el valor \"Couchbase\", la salida ser\u00e1 <td>Couchbase<\/td>.<\/span><\/span><\/p>\n<\/div>\n
\n
Por \u00faltimo, he creado un enlace \"eliminar\" en cada fila. Lo que es fuera de lo com\u00fan all\u00ed es el (clic)<\/code><\/code> atributo. Esto le dice a Angular que ejecute alg\u00fan TypeScript cuando se haga clic en el enlace de borrado. En este caso, es el atributo borrar<\/code><\/code> en el c\u00f3digo TS. Est\u00e1 pasando un par\u00e1metro a ese m\u00e9todo.<\/p>\n<\/div>\n
\n
Con el m\u00e9todo de borrado, el c\u00f3digo ser\u00eda el siguiente:<\/p>\n<\/div>\n
import { Component } from '@angular\/core';\r\nimport { ICompany } from '..\/..\/entityInterfaces.ts';\r\n@Component({ \r\n  selector: 'companies',\r\n  templateUrl: '.\/app\/components\/companies\/companies.html'\r\n})\r\n\r\nexport class CompaniesComponent {\r\n  public companies : Array; \r\n  public constructor() {\r\n    this.loadCompanies();\r\n  }\r\n  public delete(id: string) {\r\n    console.log(\"Deleting Company: \" + id) \r\n    this.deleteCompany(id); \r\n    \/\/ delete from the companies array\r\n    for(let i=0; i < this.companies.length; i++) {\r\n      if(this.companies[i].id == id) {\r\n        this.companies.splice(i, 1);\r\n        break;\r\n      }\r\n    }\r\n  }\r\n}<\/pre>\n
 <\/p>\n
\n
Obs\u00e9rvese que el borrar<\/code><\/code> tiene un par\u00e1metro, y como esto es TypeScript, es un par\u00e1metro mecanografiado<\/em> par\u00e1metro.<\/p>\n<\/div>\n
\n
Hay tres cosas que hago en ese m\u00e9todo de borrado:<\/p>\n<\/div>\n
\n
    \n
  1. Escribir un mensaje en la consola (para depuraci\u00f3n\/ilustraci\u00f3n)<\/li>\n
  2. Llamar a un m\u00e9todo que enviar\u00e1 una petici\u00f3n POST o DELETE a un endpoint HTTP (he omitido ese m\u00e9todo ya que los detalles no son importantes ahora. Tambi\u00e9n he omitido cualquier uso de Promise\/callback que ser\u00eda necesario en una situaci\u00f3n as\u00edncrona como esta).<\/li>\n
  3. Estoy eliminando la empresa del campo empresas (haciendo un bucle y eliminando la empresa con el id correspondiente). Alternativamente, podr\u00eda llamar a loadCompanies y actualizar toda la lista de nuevo, y eso significar\u00eda otro viaje a la base de datos.<\/li>\n<\/ol>\n<\/div>\n
    \n
    El paso 3 contiene algo de la magia de Angular2 que deber\u00edas conocer: cuando el bot\u00f3n empresas<\/code><\/code> Angular2 se dar\u00e1 cuenta y actualizar\u00e1 autom\u00e1ticamente el HTML renderizado ejecutando el comando *ngPor<\/code><\/code> bucle de nuevo.<\/p>\n<\/div>\n
    \n
    Otras cosas<\/h3>\n
    \n
    Algunas otras cosas que he estado haciendo que puedo bloguear m\u00e1s tarde:<\/p>\n<\/div>\n
    \n