Creación de un proyecto base Angular

Hoy vamos a ver paso a paso cómo habría que realizar la creación de un proyecto básico de Angular. Si es la primera vez que oyes este nombre, permíteme indicarte que se trata de un elegante framework para el desarrollo web. Fue concebido por los ingenieros de Google y nos brinda un amplio arsenal de herramientas y posibilidades para crear aplicaciones web de alto nivel. Básicamente, Angular es como una orquesta de programación que combina el poderoso lenguaje TypeScript con el patrón de diseño MVC (Modelo Vista Controlador). Este planteamiento nos permite construir aplicaciones web sólidas y escalables.

 

 

La potencia de Angular se despliega en su capacidad de crear aplicaciones de una sola página (SPA). Con este enfoque, puedes crear experiencias interactivas y fluidas para los usuarios, sin la necesidad de recargar la página constantemente. Es como si tus aplicaciones cobraran vida propia, capturando la atención de todos los que las experimentan. Pero ahí no termina la cosa. Esta herramienta te ofrece un conjunto de características y funcionalidades impresionantes. Puedes enlazar datos de forma bidireccional, gestionar formularios con facilidad, animar elementos de manera elegante y mucho más.

 

Además, Angular proporciona un sistema de inyección de dependencias, una verdadera joya para el desarrollo modular. Puedes crear componentes y servicios independientes, permitiendo una arquitectura flexible y fácil de mantener. Por otra parte, no debemos olvidar a la comunidad que rodea a Angular. Si alguna vez te encuentras en un aprieto, hay una comunidad de desarrolladores dispuesta a ayudarte y compartir su conocimiento. Los recursos y la documentación disponibles te permitirán subsanar los problemas que te vayas encontrando.

 

En líneas generales, Angular es una herramienta muy valorada en el mundo del desarrollo web. Con su enfoque en las SPAs, su arquitectura basada en componentes y su rico conjunto de características, este framework te permite crear aplicaciones web de alto rendimiento y dejar una huella memorable en el mundo digital. Mi recomendación es que comiences a utilizar Angular y así puedas dar vida a las proyectos web que tengas en mente.

 

Creación de un proyecto Angular

 

Dicho lo anterior, vamos a centrarnos ya en los pasos necesarios para realizar la creación de un proyecto base de Angular.

 

1º) En primer, debemos situarnos en la carpeta de nuestro equipo en la que hayamos pensado almacenar los diferentes proyectos Angular que vayamos desarrollando en el futuro. Abrimos el terminal de comandos de dicha carpeta. 

Debemos tener en cuenta que, aunque parezca obvio, es requisito indispensable tener instalado Angular en nuestro equipo. Para asegurarnos de ello, podemos ejecutar el comando:

ng version

En mi caso me aparece como instalada la versión "Angular CLI 16.0.0". En tu caso, lo más probable es que se trate de alguna versión más moderna.

2º) A continuación, para realizar la creación propiamente dicha del proyecto Angular, tendremos que ejecutar el siguiente comando. En mi ejemplo, voy a crearme un proyecto denominado "front-universo", pero tú puedes utilizar el nombre que más te guste...

ng new front-universo

Y comenzará la instalación de los paquetes requeridos.

 

3º) Una vez concluida la creación del proyecto y la inicialización del repositorio Git, nos aparecerá un mensaje similar al siguiente;

"Succesfully initialized git"

4º) A continuación, nos vamos al IDE en el que vamos a implementar nuestro proyecto web. En mi caso, voy a desplegar Visual Studio Code.

5º) A continuación, seleccionamos la opción FILE - OPEN FOLDER y seleccionamos la carpeta en la que nos acabamos de crear el proyecto Angular.

5º) Nos aparecerá una ventana en la que se nos preguntará si se trata de una carpeta de confianza o no. Pulsamos el botón "YES, I TRUST THE AUTHORS".

6º) Hecho el paso anterior, a continuación se nos abrirá el proyecto base Angular dentro de una nueva perspectiva de Visual Studio Code.

Como se aprecia en la imagen, en la vista EXPLORER de la izquierda podemos ver la estructura recién creada del proyecto Angular.

Configuración de extensiones

7º) Nos vamos al apartado EXTENSIONS y buscamos la extensión "Angular". Nos aparecerá una lista de opciones con ese contenido.

Nos vamos a centrar en las dos primeras extensiones:

• Angular Languages Service
• Angular Snippets

 

8º) Seleccionamos la extensión "Angular Snippets", lo que nos llevará a la ventana que nos mostrará las características de dicho plugin.

La activación de esta extensión nos va a facilitar la vida como programadores, ya que nos servirá para autocompletar las sentencias codificadas. 

9º) Pulsamos el botón INSTALL y comenzará la instalación de la extensión en nuestro Visual Studio Code. 

Si no nos da ningún problema, nos aparecerán los botones DISABLE y UNINSTALL.

10º) A continuación, nos vamos a la extensión "Angular Language Service". Se nos desplegará la ventana con la información asociada a dicho plugin.

Esta extensión proporciona a los editores de código varias facilidades, como autocompletar código, mensajes de error, sugerencias y navegación dentro de las plantillas de Angular.

 

11º) Pulsamos el botón INSTALL y comenzará la instalación de la extensión en nuestro Visual Studio Code. 

Al igual que en el caso anterior, si no nos da ningún problema, nos aparecerán los botones DISABLE y UNINSTALL. 

Arranque del servidor integrado de Angular

12º) Para arrancar el servidor integrado de Angular, nos dirigimos a la ventana TERMINAL de nuestro Visual Studio Code.

13º) A continuación, en la línea de comandos del terminal escribimos la instrucción de arranque del servidor integrado.

ng serve -o

Hecho esto, el servidor comenzará a arrancar.

 

14º) Nos aparecerá una cuestión preguntándonos si queremos compartir con Google los datos de uso de nuestro proyecto Angular.

 

15º) Contestamos a la pregunta anterior (según deseemos compartir datos o no) y dará comienzo el arranque del servidor, junto con la compilación de nuestro proyecto Angular. Si todo va bien, nos aparecerá el siguiente resultado.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

16º) A continuación, se nos abrirá la ventana del servidor en nuestro navegador predeterminado. Si todo ha ido bien, debería aparecer un mensaje como este:

front-universo app is running!

 

Por cierto, si ahora quisieras parar el servidor integrado de Angular, podrías hacerlo desde Visual Studio Code haciendo uso de la combinación de teclas siguiente:  

CONTROL + C

Y en principio, eso sería todo. Si has seguido correctamente los pasos anteriormente mencionados, ya tendrás preparado tu proyecto base de Angular.

Error de ejecución de scripts desde Angular

Es posible que la primera vez que arranques el servidor de Angular te aparezca el siguiente mensaje de error si no tienes habilitada la ejecución de scripts en tu equipo.

 

ng : No se puede cargar el archivo C:\Users\alcau\AppData\Roaming\npm\ng.ps1 porque la ejecución de scripts está deshabilitada en este sistema. Para
obtener más información, consulta el tema about_Execution_Policies en https:/go.microsoft.com/fwlink/?LinkID=135170.
En línea: 1 Carácter: 1
+ ng serve -o
+ ~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess 

 

👉 Si os ocurre esto, en primer lugar debéis consultar la política de ejecución de scripts que hay definida en vuestro sistema.

Get-ExecutionPolicy -List

👉 Si os aparece como "Undefined", entonces es que debemos definir la política de ejecución de scripts. Para habilitar los permisos para nuestro usuario usaremos el comando:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Si ahora volvemos a revisar la política nos debería aparecer esto:

Como se aprecia, ahora nuestro usuario tiene permisos para realizar la ejecución de scripts en el sistema de nuestro equipo.

 CurrentUser    RemoteSigned

Hecho esto, a partir de ahora ya no deberíamos tener problemas con el lanzamiento de scripts, siempre y cuando lo hagamos con nuestro usuario.

Estructura de un proyecto base Angular

Dentro de la estructura de un proyecto base de Angular, encontramos varios elementos clave que desempeñan un papel fundamental en el desarrollo y la configuración de la aplicación. Estos incluyen la carpeta "node_modules", la carpeta "src", el archivo "angular.json" y el archivo "package.json". Veamos en qué consisten cada uno de ellos:

 

1. Carpeta "node_modules": La carpeta "node_modules" es donde se almacenan todas las dependencias de paquetes y módulos de Node.js que utiliza el proyecto de Angular. Cuando se crea un nuevo proyecto de Angular o se agregan nuevas dependencias, estas se descargan y se guardan en esta carpeta. Contiene todas las bibliotecas y herramientas que Angular y las dependencias del proyecto necesitan para funcionar correctamente. No se recomienda realizar modificaciones directamente en esta carpeta, ya que se genera automáticamente a partir de los archivos de configuración.

2. Carpeta "src": La carpeta "src" (abreviatura de "source") es donde se encuentra el código fuente de la aplicación Angular. Contiene todos los archivos TypeScript, plantillas HTML, hojas de estilo CSS y otros recursos necesarios para construir la aplicación. Dentro de esta carpeta, se suelen encontrar subdirectorios como "app" (donde se encuentra el código de la aplicación), "assets" (donde se almacenan los archivos estáticos, como imágenes), y "styles" (donde se encuentran los estilos globales de la aplicación).

3. Archivo "angular.json": El archivo "angular.json" es un archivo de configuración que define la estructura y las opciones de construcción del proyecto de Angular. Contiene información sobre los archivos de entrada y salida, las opciones de compilación, las rutas de los recursos y otras configuraciones relacionadas con la construcción y el despliegue de la aplicación. Se utiliza para personalizar el comportamiento de la compilación y el empaquetado de la aplicación Angular.

4. Archivo "package.json": El archivo "package.json" es otro archivo de configuración esencial en un proyecto de Angular. Contiene metadatos sobre el proyecto, como el nombre, la versión, las dependencias del proyecto y los scripts personalizados. También especifica las dependencias de paquetes de Node.js requeridas para el proyecto. Este archivo es crucial para la gestión de dependencias y permite instalar, actualizar y administrar fácilmente los paquetes utilizados en el proyecto mediante la ejecución de comandos npm.

 

En líneas generales, la carpeta "node_modules" almacena las dependencias del proyecto, la carpeta "src" contiene el código fuente de la aplicación, el archivo "angular.json" define la configuración de construcción y el archivo "package.json" gestiona las dependencias y las configuraciones del proyecto. Estos elementos trabajan juntos para crear y mantener una aplicación Angular sólida y funcional.

 

Conclusión

Como acabamos de ver, la creación de un proyecto base de Angular es una tarea sencilla y que no requiere de parametrizaciones complicadas. De hecho, esa es una de las grandes ventajas del framework Angular y, por qué no decirlo, una de las causas que ha provocado que su uso esté altamente extendido en la actualidad. Como hemos dicho al principio, Angular es una potente herramienta para el desarrollo de aplicaciones web modernas. Con su enfoque en las SPAs, su arquitectura basada en componentes y su amplio conjunto de características, el framework ofrece a los desarrolladores la capacidad de construir aplicaciones web rápidas, robustas y escalables.

Pues nada, eso es todo lo que quería comentarte hoy en relación con la creación de un proyecto base de Angular. Espero que no tengas demasiados problemas a la hora de repetir los pasos indicados en el post. En cualquier caso, ya sabes que aquí abajo puedes dejarme las dudas que te vayan surgiendo.

Saludos.