MANUAL ANGULAR 2

...

npm install -g angular-cli

[pic 7]

De inmediato se iniciará la descarga, podrás ver la evolución de la misma en la terminal:

[pic 8]

También encontrarás una excelente ayuda si entras en la página de Angular CLI, navegando por sus secciones, o bien en el propio repositorio de GitHub angular-cli.

Crear el esqueleto de una aplicación Angular 2

Uno de los comandos que puedes lanzar con Angular CLI es el de creación de un nuevo proyecto Angular 2. Este comando se ejecuta mediante "new", seguido del nombre del proyecto que queramos crear.

ng new proyectoAngular

[pic 9]

Lanzado este comando se creará una carpeta igual que el nombre del proyecto indicado y dentro de ella se generarán una serie de subcarpetas y archivos que quizás por su número despisten a un desarrollador que se inicia en Angular 2. Poco a poco nos iremos familiarizando con el código generado.

[pic 10]

Además, como hemos dicho, se instalarán y se configurarán en el proyecto una gran cantidad de herramientas útiles para la etapa del desarrollo front-end. De hecho, gran cantidad de los directorios y archivos generados al crear un nuevo proyecto son necesarios para que estas herramientas funcionen. Entre otras cosas tendremos:

Un servidor para servir el proyecto por HTTP[pic 11]

Un sistema de live-reload, para que cuando cambiamos archivos de la aplicación se refresque el navegador[pic 12]

Herramientas para testing[pic 13]

Herramientas para despliegue del proyecto, etc.[pic 14]

Una vez creado el proyecto inicial podemos entrar en la carpeta de proyecto con el comando cd, o desde Archivo/Abrir carpeta y buscamos la carpeta que se creó por defecto en C:\

[pic 15]

Ya estamos dentro de nuestro proyecto:

[pic 16]

Verás que en la parte izquierda de nuestra pantalla, se encuentran una serie de carpetas y archivos similares a estos. Los iremos revisando en el proceso de nuestro proyecto.

[pic 17]

[pic 18]

Servir el proyecto desde un web server

Angular CLI lleva integrado un servidor web, lo que quiere decir que podemos visualizar y usar el proyecto sin necesidad de cualquier otro software. Para servir la aplicación lanzamos el comando "serve".

ng serve

[pic 19]

Esto lanzará el servidor web y lo pondrá en marcha. Además, en el terminal verás cómo salida del comando la ruta donde el servidor está funcionando. Generalmente será algo como esto (pero te sugerimos verificar el puerto en la salida de tu terminal):

http://localhost:4200/

En la siguiente imagen ves la salida del terminal:

[pic 20]

Podrías modificar el puerto perfectamente si lo deseas, simplemente indicando el puerto deseado con la opción --port:

ng serve --port 4201

Cargamos la URL asignada o que hayas elegido, en el navegador:

[pic 21]

Verás algo como esto:

[pic 22]

Notarás que tu servidor está arriba y te muestra el mensaje app Works! Este mensaje se encuentra dentro de tu proyecto en el componente principal (src/app/app.component.ts), el cual se creó automáticamente al generar el proyecto desde la terminal.

[pic 23]

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.

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

Todos los archivos del raíz: Seguro que muchos 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.

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".

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.

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