jairogarcíarincón

Instalación

Todos los pasos de este apartado se pueden realizar directamente en el terminal o consola de tu ordenador, no obstante, es necesario tener Node.js instalado para poder trabajar con Angular.

Si no lo tienes instalado, por favor revisa y ejecuta el capítulo de Instalación de la clase de Sass y SCSS antes de continuar.

Lo primero que debemos hacer es, si no lo hemos hecho antes, instalar desde la consola el paquete Angular CLI, que es el que nos permitirá después crear proyectos y ejecutar diferentes tareas relacionadas con el desarrollo de los mismos.

Para ello, ejecuta el siguiente comando en la consola y sigue las instrucciones que se muestran (es posible que necesites permisos de administrador para los comandos):

npm install -g @angular/cli

NOTA: Si estás trabajando con Windows, es posible que la ejecución de scripts de PowerShell esté deshabilitada por defecto. Para resolverlo, ejecuta el siguiente comando y ten en cuenta las posibles implicaciones de esta acción que se muestran en el mensaje:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Espacio de trabajo

Una vez instalado todo lo anterior, estaríamos en disposición de crear un nuevo proyecto de Angular.

Las aplicaciones de Angular se desarrollan en el contexto de un espacio de trabajo o workspace, y para crear un nuevo workspace y una aplicación inicial tan solo debemos ejecutar el comando:

ng new app-angular-sass

Siendo app-angular-sass el nombre de nuestro proyecto, que puedes personalizar a tu gusto.

Al ejecutar dicho comando, la primera pregunta que nos aparecerá será la siguiente:

Nosotros escogeremos la opción de Sass (SCSS) pues es la que utilziaremos en esta clase.

A continuación, se nos preguntará si queremos habilitar Server-Side Rendering y Static Site Generation, temas que en esta clase no vamos a tratar, con lo que se puede seleccionar que No:

Y con esto, y tras la instalación de todos los paquetes necesarios, ya tendríamos creada nuestra aplicación.

Instalación de Angular Material

Antes de ejecutar nuestra aplicación, vamos a realizar la instalación de la librería de componentes de Angular Material, de modo que nuestro proyecto ya tenga todo lo necesario para empezar a desarrollar nuestro sitio web.

Para ello, ejecuta el siguiente código para entrar a la carpeta de proyecto y comenzar la instalación de la librería:

cd app-angular-sass
ng add @angular/material

Al ejecutar el comando, además de confirmar que queremos instalar, tendremos que responder a una serie de cuestiones realtivas al tema a utilizar, la tipografía y las animaciones:

Puedes seleccionar el tema que desees, pero asegurate de que la en confguración de las tipografías de forma global seleccionas Yes y que incluyes y habilitas las animaciones de los componentes (Include and enable animations).

A título informativo, adicionalmente, el comando ng add habrá realizado las siguientes acciones en tu proyecto:

• Añadir dependencias del proyecto al package.json.
• Añadir la fuente Roboto al index.html.
• Añadir la fuente de iconos Material Design al index.html.
• Eliminar los margins en el body.
• Ajustar la altura en html y body a 100%.
• Configurar Roboto como la fuente por defecto del proyecto.

Ejecutar aplicación

Una vez terminada esta instalación, ya estaríamos listos para lanzar nuestra aplicación en modo desarrollo y mostrarla en el navegador.

Para ello dentro de la carpeta del proyecto, ejecuta el comando:

ng serve

Esto hará que se inicialize la aplicación en watch mode, lo que hará que se vayan refrescando todos los cambios que hagamos en nuestros componentes y estilos cada vez que guardemos los archivos, y que se refersque la vista en la mayoría de los casos.

Además, este comando lanza un servidor web de desarrollo para que podamos visualizar el sitio en la ruta http://localhost:4200/, de modo que si accedes a ella en cualquier navegador, deberías ver lo siguiente:

NOTA: Si estás trabajando en un servidor remoto con firewall habilitado, es posible que tengas problemas para visualizar el contenido en el navegador desde tu equipo local por una cuestión de permisos o de puertos no habilitados. Si necesitas ejecutar el proyecto en otro puerto abierto, por ejemplo el 3000, puedes usar el comando:

ng serve --host 0.0.0.0 --port 3000

Esto te permitirá visualizar el proyecto en el navegador de tu equipo local en la ruta http://IP_DEL_EQUIPO_REMOTO:3000.

Referencias

Setting up the local environment and workspace
Getting Started with Angular Material

---

Publicado el 17 de Enero de 2025

angular angular material material sass diseño responsive