Crear un nuevo proyecto Angular - Tecnología y mucho más

Angular, un marco de desarrollo front-end robusto, es una excelente opción para construir aplicaciones web dinámicas. Este tutorial paso a paso está diseñado para principiantes, guiándote en cómo crear un nuevo proyecto Angular y mostrándote cómo levantar una aplicación.

Instalación de Node.js y npm

Antes de comenzar con Angular, asegúrate de tener Node.js y npm instalados en tu máquina. Descárgalos desde el sitio oficial de Node.js, ya que Angular utiliza npm para gestionar las dependencias.

Si quieres saber como levantar un proyecto nodejs te dejo un enlace el cual te puede interesar

https://tenocode.com/crear-un-nuevo-proyecto-con-nodejs/

Instalación de Angular CLI

Angular CLI (Command Line Interface) simplifica la creación y gestión de proyectos. Instálalo globalmente ejecutando el siguiente comando en tu terminal

npm install -g @angular/cli

Creación de un Nuevo Proyecto Angular

En tu terminal, navega hasta la ubicación donde desees crear el proyecto y ejecuta:

ng new mi-primer-proyecto-angular

Al ejecutar la orden anterior, angular nos presentará una serie de opciones que debemos configurar. Aquúi te explicaré cada una de estas opciones

Would you like to add Angular routing? (y/N): Decide si deseas incluir el enrutamiento en tu aplicación. Esto es útil para navegar entre diferentes partes de tu aplicación de manera eficiente. En resumidas cuentas se creará un archivo de forma global el cual contendrá las principales url de tu proyecto. Yo recomiendo siempre incluir este archivo.

Which stylesheet format would you like to use? (Use arrow keys): Elige el formato de hoja de estilos que prefieras (CSS, SCSS, SASS, LESS). Esto determinará cómo se gestionan los estilos en tu aplicación. Solo debes elegir cual será la extención de tus archivos de stylos, en lo personal siempre uso scss

Si necesitas saber más sobre estos tipos de stilo, te invito a hechar un vistaso a este link el cual explica de una manera sencilla y rápida lo que son estos tipos

https://tenocode.com/hojas-de-estilo-css-scss-sass-less/

Navegando al Proyecto

Entra al directorio del proyecto recién creado, usaremos el editor de texto preferido de los programadores, Visual Studio.

Deberíamos tener algo parecido a esto

En donde dentro de la carpeta app, deberemos desarrollar nuestro proyecto.

Creando la estructura de tu proyecto(opcional)

Abrimos a nuestro archivo tsconfig.json y justo despues de “baseUrl”: “./”, pegamos las siguientes rutas

"paths": {
      "@modules/*": [
        "src/app/modules/*"
      ],
      "@models/*": [
        "src/app/core/models/*"
      ],
      "@services/*": [
        "src/app/core/services/*"
      ],
      "@interceptor/*": [
        "src/app/core/interceptor/*"
      ],
      "@directives/*": [
        "src/app/core/directives/*"
      ],
      "@pipes/*": [
        "src/app/core/pipes/*"
      ]

Lo anterior es para ordenar tu proyecto y acortar las rutas de importación. Luego creas las carpetas descritas en estas rutas. La carpeta padre sería core.

Ambientes desarrollo y Producción (opcional)

Crearemos nustros archivos de ambiente, en caso de que nuestra instalación no lo contenga.

Creamos la carpeta src/environments/ luego dentro de esta carpeta creamos manualmente los archivos

environment.ts
environment.prod.ts

Ahora abrimos nuestro archivo angular.js y copiamos estas lineas dentro de configurations: { production y despues de budgets[]

"fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

Levantamiento del servidor

Para levntar tu servidor local basta con que te posiciones en la raiz de tu proyecto, y en la consola de tu máquina escribas:

ng serve

Habre tu navegador e ingresa la url localhost:4200 deberías ver algo como esto:

Felicidades, has creado tu primer proyecto angular!!