Tutorial para instalar Angular

¿Quieres instalar la última versión de Angular para crear tus Single Page Applications?

Angular es un framework para desarrollo web que permite crear eficientes y sofisticadas aplicaciones de una sola página (SPA, por sus siglas en inglés).

Angular nos proporciona diversas herramientas que nos permiten optimizar nuestro desarrollo, incluso, sin hacerlo desde cero, permitiéndonos trabajar en un ambiente organizado y escalable.

¿Qué necesito para comenzar?

Para poder crear y trabajar sobre una aplicación en Angular, necesitamos instalar un editor de textos, Node.js y Angular CLI.

1. Visual Studio Code

Para agregar, modificar y eliminar código, necesitamos un editor de textos. Nosotros te recomendamos Visual Studio Code, pero puedes trabajar con el que más te guste.

El proceso de instalación de esta herramienta es bastante sencillo; puedes dejar las opciones marcadas por defecto que vienen en el instalador. Descárgalo totalmente gratis desde su sitio oficial: https://code.visualstudio.com/

2. Node.js

Node.js es un entorno de ejecución para JavaScript, el cual, cuenta con un manejador de paquetes (npm) que nos permite instalar Angular y gestionar sus dependencias.

La instalación, al igual que Visual Studio Code, es muy sencilla y puedes dejar marcadas las opciones por defecto. Descárgalo gratis desde su sitio oficial: https://nodejs.org/

3. Angular CLI

Ésta es una herramienta de interfaz de línea de comandos esencial para inicializar, desarrollar y mantener una aplicación en Angular.

Para instalarla, abriremos una terminal y, con ayuda de npm, ejecutaremos el siguiente comando:

¡Listo! De esta manera hemos instalado la última versión de Angular de manera global.

¿Cómo creo mi primera aplicación en Angular?

Una vez teniendo instaladas las herramientas antes mencionadas, podemos crear nuestra primera app. Para ello, nos debemos situar, a través de la terminal, en la carpeta donde deseemos crear el proyecto. Enseguida, ejecutaremos lo siguiente:

Donde:

• ng es el comando por defecto de Angular CLI.
• new crea un nuevo proyecto.
• whileuprogram es el nombre que le asignamos, en este caso, a nuestra app.

Enseguida se nos presentarán un par de preguntas:

Las respuestas dependen de tus metas, pero nosotros seleccionaremos sí a la primera pregunta, para que nos cree el módulo de routing. Después, seleccionaremos la opción CSS para trabajar con estos estilos.

Al finalizar el proceso de creación de la app, nos vamos a dirigir a la carpeta raíz del proyecto:

Ahora solo queda comprobar que nuestra primera app funciona. ¿Cómo? Ejecuta el siguiente comando desde la raíz:

Este comando ejecutará nuestro servidor web local y abrirá nuestro navegador con el contenido de la aplicación.

¡Genial! Hemos instalado y creado nuestra primera app en Angular. Ahora cuéntanos, ¿cómo luce en este momento tu primera aplicación creada en este framework?