viernes, 31 de agosto de 2018

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.

No hay comentarios:

Publicar un comentario