Angular es una de las tecnologías que han venido a cambiar la forma en que programamos para web, la creación de aplicaciones web fue completamente cambiada y definitivamente mejorada. Google ha aportado muchísimo al mundo de la programación al crear este Framework. Aprende como instalarlo en tu computador y cómo crear tu primer proyecto en este artículo. Si estás listo, comencemos.
Vamos a comenzar por el principio, antes de empezar a programar en Angular necesitas saber ¿Qué es Angular y para qué sirve?. Aquí no vamos a profundizar mucho en esta cuestión ya que anteriormente hice un artículo explicándolo y puedes ir a leerlo antes si te interesa saber más.
Aquí vamos a dar por hecho que ya sabes para qué sirve Angular y que has decidido comenzar a aprenderlo y por eso quieres instalarlo en tu computador. Vamos a comenzar a realizar este proceso de instalación de Angular para que puedas crear SPA con este fantástico Framework.
Requerimientos
Para programar en Angular hay varios requerimientos técnicos que son necesarios para hacer que Angular corra en te computador. Básicamente con un computador relativamente moderno podrías correrlo sin problemas. No es necesario tener el último modelo de iMac para esto, pero es recomendable contar con un mínimo de 8 GB de Ram para usarlo de forma fluida.
Si tienes un computador de pocos recursos podrás correr Angular, pero el procesamiento será mucho más lento. Debes tenerlo en cuenta.
El requerimiento que no puede faltar es tener Node JS instalado en tu computador. Si no lo tienes puedes descargarlo desde la página oficial de Node JS. Lo instalas como cualquier programa y listo. claro que va a depender de tu sistema operativo. Generalmente también este instalador incluye ya el NPM (o Node Packages Manager) que es necesario para trabajar con NodeJS. Si tienes Linux es muy posible que tengas que instalarlo por aparte. Si tienes algún problema, esta documentación puede ayudarlete.
En el caso de Windows y MAC el instalador de NodeJs ya trae incluído el NPM y no tendrás el menor inconvenientte. Ya has cumplido el primer paso de la instalación de Angular.
Podría interesarte: Uso de ngClass en Angular + Ejemplo práctico
Instalando Angular/CLI
Angular se instala con una interfaz de línea de comandos (CLI), es decir que cuando Angular este instalado en tu computador podrás usarlo escribiendo comandos específicos una consola de tu sistema. Esto lo usaremos mucho cuando estemos programando en Angular, así que mejor acostumbrate.
Irónicamente para instalar Angular/CLI usamos un comando de consola, así que abre una consola o PowerShell (preferiblemente de forma de Administrador ya que lo instalaremos de forma global en el sistema) y escribrimos el siguiente comando:
npm install -g @angular/cli
Si estar trabajando desde un Mac o un sistema Linux tendrás que usar el sudo al principio para que se pueda realizar la instalación de manera global (si no quieres realizar la instalación global y usarlo solo en el directorio específico, tienes que navegar hasta ese directorio y usar el mismo comando, solo debes quitar el tag -g ). Aunque no es recomendable, ya que solo podrás trabajar con angular en ese directorio, lo cual no tienen mucho sentido.
Cuando termine es recomendable cerrar la consola y abrirla de nuevo. Normalmente no hace falta, pero es correcto prevenir cualquier error. Además cuanto puedes tardar ¿20 segundos? Con esto ya tienes angular instalado en tu computador y puedes comenzar a usarlo. Veamos cómo.
Creando el primer proyecto en Angular
Como dije antes, cuando usamos Angular tenemos que usar la consola o línea de comandos para realizar acciones específicas, crear un proyecto nuevo es una de ellas. Vamos a crear nuestro HOLA MUNDO en Angular, para ellos vamos al directorio en el que queremos crear el proyecto y abrimos una consola en ese directorio y escribimos lo siguiente:
ng new hola_mundo
Este comando sirve para crear nuevos proyectos en Angular. La primer palabra ( ng ) hace referencia Angular instalado en nuestro computador, así es como Angular sabe que lo siguiente es un comando para él. El comando continúa con la palabra ( new ) que como sospecharás le dice a Angular que haga un nuevo proyecto.
La siguente palabra es ( hola_mundo ) y básicamente es el nombre de nuestro nuevo proyecto. Cuando le des ENTER, Angular comenzará a crear todos los archivos necesarios para un proyecto nuevo de Angular, también descargará de internet todas las dependencias necesarias para que funcioné. Esto puede tardar un poco dependiendo de tu conexión a internet, especialmente la primera vez.
Esto último es importante. Angular tiene un caché, pero siempre que vayas a crear un proyecto nuevo es recomendable (a mi parecer es indispensable) que te encuentres conectado a internet para que Angular pueda realizar el proceso lo mejor posible.
Al terminar el proceso tendrás una carpeta con el nombre del proyecto y dentro de ella todos los archivos necesario para que un proyecto básico de Angular corra sin problemas. Verás una carpeta llamada node_modules que es donde están todas las dependencias de NodeJs que Angular está usando.
Ejecutando nuestra aplicación en Angular
Para ver nuestra aplicación en funcionamiento tenemos que correr otro comando en la consola. Vamos ver cómo funciona. Antes que nada tenemos que estar dentro de la carpeta del proyecto. Si estás en el mismo lugar donde quedó la consola en el paso anterior, solo debes hacer cd hola_mundo para entrar a la carpeta del proyecto. Eso es así porque nuestro proyecto se llama hola_mundo.
Una vez estando en esa carpeta vamos a ejecutar el comando:
ng serve
Es un comando sencillo, lo único que hace es llamar a Angular con la palabra (ng) y luego decirse que levante un servidor. Esto del servidor es un tema aparte, pero es como si tuvieramos un servidor de internet interno. El dominio sería localhost.
Esta función la hacen muchos otros softwares de programación, Ionic, React JS, etc. En el caso de Angular, por defecto usar el nombre localhost y además el puerto 4200. Así que para ver el contenido de nuestro proyecto tenemos que abrir un navegador web e ir a la dirección web: localhost:4200
Al hacer esto estaremos accediendo al servidor que Angular levanto para esa aplicación y podremos ver los cambios que estemos ejecutando en vivo gracias al servidor levantado con Node Js.
Muy bien, eso fue todo por el artículo de hoy, si tienes alguna duda, si algo no te funciona como debería, puedes dejarme un comentario con el mensaje y con gusto te ayudaré a resolverlo. Espero que te haya gustado y sobre todo que te haya servido. Un abrazo y hasta la próxima.