Angular 2 exige un marco de trabajo más concreto y avanzado. Vemos los archivos y carpetas que nos hacen falta para comenzar un proyecto básico.

En el pasado artículo abordamos la herramienta Angular CLI y ahora vamos a introducirnos en el resultado que obtenemos mediante el comando "ng new", que vimos servía para generar el esqueleto básico de una aplicación Angular 2.

No obstante, antes de entrar en materia, vamos a traer dos puntos interesantes. Uno de ellos es una reflexión previa sobre la complejidad de un proyecto "vacío" para una aplicación Angular 2. El otro es una de las preguntas típicas que se hacen cuando una persona se inicia con cualquier herramienta nueva: el editor que se recomienda usar.

Profesionalización

Todas las mejoras que nos ofrece Angular 2 tienen un coste a nivel técnico. Anteriormente (versiones 1.x) podíamos comenzar una aplicación de Angular con un código de inicio muy sencillo y sin necesidad de configurar diversas herramientas frontend. Básicamente podíamos enlazar Angular desde su CDN y con un script muy elemental empezar a usarlo.

Esto ya no es así. Con Angular 2 el número de piezas que necesitamos integrar, incluso en aplicaciones tan sencillas como un "hola mundo", es mucho mayor.

En aplicaciones grandes, donde existía un entorno bien definido por parte del equipo de desarrollo de esa aplicación (linter, transpiler, loader, tester, deployer…) se equilibra. Es decir, Angular no nos exige nada nuevo que ya no estuvieran usando equipos de desarrollo de aplicaciones grandes. Pero lo cierto es que aplicaciones pequeñas tendrán bastante más complejidad. Todo esto nos lleva a que desarrolladores ocasionales encontrarán más difícil el uso del framework en sus pasos iniciales, pero el esfuerzo sin duda merecerá la pena porque los pondrá a un nivel muy superior y eso redundará en su beneficio profesional.

¿Qué editor de código usar con Angular 2?

Se puede usar cualquier editor de código. Es una aplicación HTML y Javascript / TypeScript, por lo que puedes usar cualquIer editor de los que vienes usando para cualquiera de estos lenguajes.

Como recomendación se sugiere usar un editor ligero, pero que te facilite la programación. Entre los que encontramos de código libre y gratuitos para cualquier uso están Brackets, Atom o Visual Studio Code. Éste último es quizás el más indicado, porque ya viene configurado con una serie de herramientas útiles y clave para desarrollar con Angular 2 como es el "intellisense" de TypeScript. De todos modos, a través de plugins podrás hacer que tu editor preferido también sea capaz de mostrarte las ayudas en tiempo de programación del compilador de TypeScript.

Archivos y carpetas del proyecto

Impacta un poco que, recién creado un proyecto para Angular 2 por medio de Angular CLI, veamos en la carpeta de archivos varias subcarpetas, y varias de ellas con el contenido de cientos de ficheros. No obstante, no todo es código de tu aplicación, sino muchas veces son carpetas para crear la infraestructura de todo el tooling NodeJS incluido para gestionar una aplicación Angular 2.

Ahora conoceremos las partes que nos hacen falta para comenzar, aunque sin entrar en demasiados detalles.

Todos los archivos del raíz:
Seguro que muchos de los lectores reconocen muchos de los archivos que hay dentro, como package.json (descriptor de dependencias npm) o .gitignore (archivos y carpetas que git debería ignorar de este proyecto cuando se añada al repositorio). En resumen, todo lo que encontraremos en esta raíz no son más que archivos que definen nuestro proyecto y configuran el entorno para diversas herramientas.

Nota: Observarás que no hay un index.html, porque esta no es la carpeta raíz de los archivos que se deben servir por el servidor web.

src:
Es la carpeta más interesante para ti como desarrollador, ya que es el lugar donde colocarás el código fuente de tu proyecto. En realidad más en concreto la carpeta "app" que encontrarás dentro de "src" es donde tienes que programar tu aplicación. Observarás que ya viene con diversos contenidos, entre otras cosas el index.html que debe servir como página de inicio. No obstante, no es exactamente el directorio raíz de publicación, porque al desplegar el proyecto los resultados de compilar todos los archivos se llevarán a la carpeta "dist".

En la carpeta src es donde vas a realizar todo tu trabajo como desarrollador. Seguramente otros muchos archivos te resulten familiares, como el favicon.ico.

Verás además varios archivos .ts, que son código fuente TypeScript. Como quizás sepas, los archivos .ts solo existen en la etapa de desarrollo, es decir, en el proyecto que el navegador debe consumir no encontrarás archivos .ts, básicamente porque el navegador no entiende TypeScript. Esos archivos son los que se compilarán para producir el código .js que sí entienda el navegador.

Nota: Si todavía te encuentras reticente al uso de TypeScript no te preocupes, ya que cualquier código Javascript que pongas en ese fichero es código TypeScript válido. Por tanto tú podrías perfectamente escribir cualquier código Javascript dentro de los archivos .ts y todo irá perfectamente. Si además conoces algo de TypeScript y lo quieres usar para facilitarte la vida en tiempo de desarrollo, tanto mejor para ti.

dist:
Es la versión de tu aplicación que subirás al servidor web para hacer público el proyecto. En dist aparecerán todos los archivos que el navegador va a necesitar y nunca código fuente en lenguajes no interpretables por él. (Observa que no hay archivos .ts dentro de dist). Ojo, pues muy probablemente tengas que iniciar el servidor web integrado en Angular CLI para que aparezca la carpeta "dist" en el directorio de tu proyecto. Puedes obtener más información sobre cómo lanzar el servidor web en el artículo de Angular CLI.

Public:
Es donde colocas los archivos estáticos del proyecto, imágenes y cosas similares que se conocen habitualmente como "assets". Estos archivos también se moverán a "dist" para que estén disponibles en la aplicación una vez subida al servidor web desde donde se va a acceder.

e2e:
Es para el desarrollo de las pruebas. Viene de "end to end" testing.

node_modules:
Son los archivos de las dependencias que mantenemos vía npm. Por tanto, todas las librerías que se declaren como dependencias en el archivo package.json deben estar descargados en esta carpeta node_modules. Esta carpeta podría haber estado dentro de src, pero está colgando de la raíz porque vale tanto para las pruebas, como para la aplicación cuando la estás desarrollando.

tmp:
Es una carpeta que no tocaremos, con archivos temporales que generará Angular CLI cuando esté haciendo cosas.

Typings:
Esto son definiciones de tipos usados por las librerías que usa un proyecto en Angular 2. Estos tipos te sirven para que el editor, gracias a TypeScript, pueda informarte con el "intellisense" en el acto de escribir código, sobre las cosas relacionadas con esas librerías.

De momento eso es todo, esperamos que esta vista de pájaro te sirva de utilidad para reconocer la estructura básica de un proyecto a desarrollar con Angular 2. En el siguiente artículo entraremos en detalle ya sobre el código, analizando por dentro algunas de estas carpetas y archivos generados desde Angular CLI y realizando nuestras primeras pruebas.

Next up

Previous

VSCODE - Angular Extensions & complements

Description