Angular: 2. Creación de entorno de desarrollo y nuevo proyecto

Vamos a crear nuestro entorno de desarrollo y una primera aplicación de ejemplo en Angular.

Primero creamos la carpeta donde queremos tener el entorno de desarrollo. En nuestro caso, creamos una carpeta nueva en el escritorio y la llamamos "Angular".

Para crear nuestro entorno de desarrollo en ésa carpeta, debemos abrir la consola de comandos, situarnos en ella, y ejecutar el comando "ng new my-app", donde "my-app" será el nombre que le queramos dar a nuestra aplicación. Nosotros vamos a dejarlo así, dado que el nombre de la aplicación puede cambiarse luego:

Al ser la primera vez que ejecutamos el comando, nos aparece el error de que tenemos que indicarle a GIT un usuario y un correo electrónico, así que ejecutamos los comandos que nos indica la pantalla:
git config --global user.email email
git config --global user.name name

Una vez ejecutado esos dos comandos, eliminamos la carpeta Angular (porque contendrá los errores del paso anterior) y la volvemos a crear para, ahora sí, ejecutar el comando "ng new my-app" y que termine correctamente:

Si entramos en la carpeta "Angular" ahora, veremos que nos ha creado la carpeta "my-app", que es el nombre del proyecto que le pasamos al comando. Podemos cambiarle el nombre a esa carpeta tranquilamente. Por ejemplo, la renombramos a "01-hola-mundo":

Ya tenemos creada nuestra primera aplicación en Angular.
Ahora abrimos el editor de texto que queramos (Atom en nuestro caso) y arrastramos la carpeta de nuestra aplicación a él:

Para ejecutar nuestra aplicación y probar que funciona correctamente, debemos entrar en la cosola de comandos, ubicarnos dentro de la carpeta de nuestra aplicación, y ejecutar el comando "ng serve -o".
Con éste comando, se levanta un servidor en el puerto 4200 que contiene nuestra aplicación.
Se puede modificar el puerto por defecto añadiendo un "-p" y el puerto que elijamos.
La parte "-o" del comando sirve para que al terminar de montar la aplicación se abra automáticamente un navegador web con la aplicación cargada:

Si todo ha ido bien, se nos debería abrir un navegador web con la aplicación cargada:

Podemos modificar el archivo "app.component.html" de nuestra aplicación, eliminando todo el contenido y sustituyéndolo por un "<h1>Hola Mundo</h1>":

Al guardar el archivo modificado, automáticamente se actualizan los cambios en la web:

Para parar el servidor local y que dejen de actualizarse los cambios, volvemos a la consola de comandos y pulsamos la combinación de teclas "Control + c". Nos pedirá confirmación, en la que tenemos que pulsar la tecla "s" y luego pulsar la tecla "Enter", y nos parará el servidor:

Y con esto ya podemos empezar a trabajar en nuestra aplicación como nos plazca.

Angular: 1. Instalaciones necesarias

Instalaciones necesarias para empezar a trabajar con Angular:

1. Google Chrome. Navegador web donde probaremos las aplicaciones. Normalmente ya lo tendremos instalado.
https://www.google.es/chrome/browser/desktop/

2. NodeJS.
https://nodejs.org/es/

3. TypeScript.
http://www.typescriptlang.org/

4. Angular CLI.
https://cli.angular.io/
https://github.com/angular/angular-cli

5. Ionic.
http://ionicframework.com/getting-started/

6. GIT. Opcional. Herramienta de manejo de versiones y repositorios para proyectos.
https://git-scm.com/downloads

7. Editores de Texto. Los utilizaremos para escribir nuestro código. Sólo nos hace falta uno, pero ponemos 2 opciones:

Atom (https://atom.io/) o Visual Studio Code  (https://code.visualstudio.com/).



Para estos editores de texto también resulta útil instalar los siguientes plugins:

Atom
• Angular 2 Type Script Snippets
• Atom Bootstrap3
• Atom Typescript
• File Icons
• Platformio Ide Terminal
• V Bootstrap4

Visual Studio Code
• Angular 2 TypeScript Emmet
• Angular 5 Snippets – TypeScript, Html, Angular Material...
• Angular Language Service
• Angular v5 Snippets
• Angular2-inline
• Bootstrap 4 & Font Awesome snippets
• HTML CSS Support
• JavaScript (ES6) code snippets
• JS-CSS-HTML Formatter
• JSHint
• Material Icon Theme
• Prettier – Code Formatter

Ahora veamos cómo instalar cada una de éstas herramientas:

Google Chrome

No creo que sea necesario indicar cómo se instala Google Chrome...

NodeJS

Para instalar NodeJS, nos vamos a su url y descargamos la versión actual. La instalación es de tipo "Siguiente --> Siguiente" así que no va a haber problemas:

Una vez instalado, para comprobar que se ha ejecutado correctamente, abrimos la consola de Windows y ejecutamos el comando "node -v", que nos indicará la versión instalada.

Al instalar el NodeJS también hemos instalado el npm (Node Package Manager), que utilizaremos para instalar el resto de herramientas. También podemos comprobar su versión con el comando "npm -v":

TypeScript

Para instalar TypeScript, nos vamos a su url y nos indica un comando que debemos ejecutar por consola para instalarlo:

El comando tiene un "-g", lo que significa que debemos ejecutarlo con permisos de administrador. Para ello, nos vamos a la consola de Windows escribiendo "cmd", hacemos click derecho y lo ejecutamos como Administrador:

Una vez en la consola, escribimos el comando indicado y pulsamos "enter":

Para comprobar que se ha instalado correctamente, ejecutamos el siguiente comando, que nos deberá indicar la versión que hemos instalado:

Angular CLI

Al igual que con TypeScript, nos vamos a la url y ejecutamos por consola el comando indicado:

Comprobamos la versión instalada con el siguiente comando:

Ionic

Igual, accedemos a la url y ejecutamos el comando indicado por la consola:

GIT

Para instalar GIT, entramos en su url y descargamos el instalador:

Una vez descargado, lo ejecutamos. Nos van a aparecer muchas opciones diferentes, pero simplemente pulsamos en "Siguiente - Siguiente" hasta terminar.

Atom

Para instalar Atom, únicamente debemos acceder a su web y descargar el instalador, que ejecutaremos después, y listo, no tiene más complicación:

Visual Studio Code

Para instalar Visual Studio Code el procedimiento es el mismo que con Atom, únicamente descargar el instalador y ejecutar:

Plugins Atom

Para instalar los plugins en Atom, simplemente seguimos la ruta indicada:

En la pestaña Install, escribimos el nombre del plugin y lo instalamos sin más:

Plugins Visual Studio Code

Para instalar los plugins en Visual Studio Code, el procedimiento es parecido. Pulsamos en el icono de caja en la parte inferior izquierda, y aparecerá una caja de texto, en la que escribimos el nombre del plugin y lo instalamos sin más: