El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Angular 1 y 2: Uso de snippets y de la guía de estilos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
05:06
  Añadir a marcadores

Transcripción

Los snippets de código son algo así como código prefabricado, los cuales podemos usar cuando estamos escribiendo código en algún editor de texto como Visual Studio Code, Sublime Text o Atom. Incluso los IDES los tienen integrados y, en caso de no estar los snippets que necesitamos, será cuestión de buscarlos en su propio administrador de paquetes. Existen una gran variedad de paquetes de snippets para todo propósito, framework y lenguaje. Solo debes tener cuidado en qué paquete eliges. Generalmente, los paquetes no siguen un estándar, pero puedes guiarte por el número de estrellas que tienen lo cual significa que es un paquete al que se le da mantenimiento regular y que los desarrolladores usan mucho. Ahora, no solo des instalar porque des un vistazo y veas el número de estrellas. Tómate el tiempo y entra a leer la descripción de cada uno. Así podrás saber cómo se usan y en qué están basadas las plantillas que usarás. Si el paquete de snippets que eliges siguen alguna guía de estilos, mucho mejor, porque significa que hay una serie de buenas prácticas detrás de todo por lo que encontrarás código escrito correctamente que te será fácil de leer y que te permitirá crecer rápidamente tu desarrollo e, incluso, leer código de terceros de una forma más rápida, y así identificar cuando algo está bien hecho o no. Veamos el caso de trabajar con snippets para Angular 1 y 2 que siguen la guía de estilos de John Papa. Para hacer uso de este tipo de snippets, vamos a trabajar con Visual Studio Code. En este caso, se trabaja a través de una extensión. Acudimos al menú de Extensiones, y aquí vamos a escribir la palabra "Angular". Esto me va a filtrar todas las extensiones que tengan que ver con Angular. En este caso, aquí aparecen varias. Yo voy a filtrar y voy a tratar de ubicar las que yo necesito. En primer lugar, vamos a ubicar en esta sección una llamada Angular 1 JavaScript and TypeScript. Si tú ves, aquí tiene el nombre de John Papa, que es quien creó este tipo de extensiones. Vamos a pulsar en el botón Instalar y vamos a ubicar también, de la misma manera, la extensión para Angular 2 que se encuentra en esta sección. Verificamos que así sea, y pulsamos en el botón Instalar. Como puedes ver, ambas extensiones tienen aquí su documentación, es decir, te agregan un paquete de textos que tú puedes utilizar para poder tener acceso a esos bloques de código. Como ves, en este caso te dice que escribas ng1component y pulses Enter. Con esto te va a crear un componente o un controlador o directiva o factory, módulo, servicio o un filtro, todo depende de lo que tú necesites. De la misma manera, parece funcionar con Angular 2. Así que también vamos a revisar la documentación, y efectivamente solamente que para Angular 2 cambian obviamente los métodos porque para Angular 2 tenemos -bootstrap, -component, -http-get, etc., porque la forma de los componentes es muy distinta para Angular 2 que para Angular 1. Ahora, ya que estén descargadas e instaladas vamos a pulsar en este botón Reload, que lo que va a hacer es recargar como tal Visual Studio Code para que estas extensiones estén disponibles. Una vez que ya tenemos esto escrito, vamos a trabajar y vamos a seleccionar primero el tipo de dato. Para seleccionar el tipo de dato que va a estar manejando este archivo, vamos a esa sección donde dice Plain Text, y nos va a desplegar un menú. Vamos a escribir la palabra "JavaScript". Y aquí directamente donde tenemos esta parte de JavaScript vamos a comenzar con el primero. Si recordamos, decía que teníamos que escribir ng1 y alguno de los servicios. Como será crear un controlador como nos aparece aquí, ng1controller. Lo selecciono y ¡voilá! Tengo un controlador que ya puedo comenzar a utilizar. Así de sencillo fue crear toda la estructura de un controlador con buenas prácticas integradas. Ahora voy a eliminar esto y vamos a hacer la prueba con Angular 2. Si recordamos, decía ng2, pero parece que no me está saliendo aquí. Así que lo que haremos será regresar a la estructura que teníamos en las extensiones, y vamos a ubicar la extensión para ver cómo teníamos que escribirlo. En este caso, vamos a verificar que tenemos este título por aquí, pero este título solamente va a funcionar cuando estamos trabajando en archivos de tipo TypeScript. Entonces, tenemos que modificar nuestro archivo. Para poder hacer esto, regresamos a nuestro código y como este es un código de ejemplo, vamos a cambiar el tipo. Aquí donde dice JavaScript vamos a ponerle de tipo TypeScript para que estos snippets estén disponibles. Entonces ahora sí vemos cómo van a estar disponibles porque pulsamos ng2 y aquí simplemente elegimos lo que queremos. Como en este entorno no existen los controladores, yo puedo elegir el elemento que yo necesite. Entonces aquí, parte de los generales que podemos llegar a ocupar son los componentes. Así que elijo un componente, y listo, ya también tengo la estructura para comenzar a trabajar con un componente de Angular 2 Así de sencillo es. No importa también en qué editor de texto estés trabajando o qué ID estés utilizando. Verifica los paquetes que existen de snippets, según el lenguaje que estés utilizando, y seguramente te van a facilitar mucho la vida.