Logo DarkNavigate back to the homepage
Blog

Angular: Primeros pasos

Jorge G.Palacin
September 9th, 2018 · 2 min read

Buenas a todos, en el post de hoy daré comienzo a una nueva serie de publicaciones sobre el desarrollo web con Angular. Algunos que no estéis tan relacionados con el tema os preguntaréis, ¿Qué es angular?.

Angular es un framework MVC (Modelo-Vista-Controlador) desarrollado en Typescript, un superset de JavaScript, por Google a finales de 2016. Su principal función es la creacion de SPAs (Single Page Application). Otros frameworks similares son React y Vue.

Los SPAs son aplicaciones de una sola página, es decir, la navegación entre las diferentes secciones del sitio se realizan de forma dinámica, al instante y sin refrescar la página en el navegador en ningun momento. Estas caracteristicas han incrementado el uso de estas en los ultimos años.

¿Cómo comenzar?

Para comenzar a usar angular en nuestras computadoras necesitamos tener instalada al menos una versión de Node.js 8.x o superior y npm 5.x o superior.

Para comprobar si tenemos esa versión abrimos la terminal/consola de windows y tecleamos el siguiente comado.

1$ node -v
1$ npm -v

Si teneís una versión inferior, podeís descargaros la nueva versión de Node.js y npm.

Una vez cumplamos estos requisitos podemos comenzar con la instalación del CLI (Command Line Interface) de Angular. Esta consola nos ayudara mucho a la hora de crear los diferentes elementos de nuestra aplicación en angular. Para ello ejecutaremos el comando:

1$ npm install -g angular/cli

Perfecto, ahora ya estamos listos para crear nuestro proyecto.

Creando nuestro primer proyecto

Para generar un nuevo proyecto, ejecutaremos el comando:

1$ ng new primerProyecto

Mediante el comando ”ng new” seguido del nombre que le queramos dar a nuestro proyecto, en este caso ”primerProyecto”, el CLI de angular se encarga de instalar las dependencias y generar los ficheros necesarios de nuestro nuevo proyecto.

Una vez termine de ejecutarse el comando anterior, ya tendremos nuestra aplicación web creada.

Lanzamos el proyecto sobre un web server

Llegados a este punto, tendremos un directorio llamado “primerProyecto” que se nos creó en el paso anterior. Nos movemos dentro del directorio.

1$ cd primerProyecto

Una vez dentro del directorio, para lanzar el servidor y asi poder ver nuestra aplicación en el navegador ejecutaremos:

1$ ng serve --open

El comando ”ng serve” nos despliega un servidor sobre el puerto 4200, por defecto, y el parametro ”—open” nos abrira una ventana del navegador en la que podremos ver por primera vez la aplicación en marcha.

Nuestra aplicación
Nuestra aplicación "primerProyecto" - localhost:4200

Esta imagen es la que nos tendría que aparecer en el navegador si hemos seguido correctamente los pasos anteriores. Se trata del componente principal que trae angular por defecto.

En el proximo post de la serie, os explicare la estructura de directorios y modificaremos el componente principal.

Un saludo a todos y hasta la proxima 😃.

Más articulos de Jotagep

Front-End vs Back-End vs Full stack web developer

A la hora de iniciarse en el desarrollo web, debes elegir un camino a seguir, tienes que especializarte en un campo en concreto, ya que el “mundo” web engloba muchas y diversas tecnologías, y es imposible dominar todas.

September 5th, 2018 · 3 min read

¡Hello World! 🌎

Bienvenidos a la apasionante aventura del desarrollo web. Como no podía ser de otra manera, he decidido titular al primer post “Hello World”, cliché de la programación a la hora de iniciarse.

September 4th, 2018 · 1 min read
© 2018 Jotagep
Link to $https://twitter.com/Sir_JotaGLink to $https://github.com/jotagepLink to $https://www.youtube.com/channel/UCfEnVdbamDIjezK-22kXC9Q