Empecemos por definir que es angular: un framework de desarrollo web desarrollado y mantenido por Google, diseñado para crear aplicaciones web dinámicas y robustas. Angular utiliza un enfoque modular basado en componentes, lo que facilita la organización y mantenimiento de proyectos grandes.

La filosofía de Angular, es trabajar como una SPA (Single Page Application), de forma que la usabilidad y el performance sea lo mejor posible.

Preparando el ambiente

Instalar Node.js y npm

Angular se ejecuta sobre Node.js, que es un entorno de ejecución de JavaScript orientado a backend. Esto significa que para poder trabajar con Angular, primero necesitas tener Node.js instalado en tu computadora.

npm (Node Package Manager) es la herramienta que viene con Node.js y nos permite instalar paquetes y librerías necesarios para el desarrollo. A través de npm, también instalaremos Angular.

Instalación de Node.js:

Visita el sitio oficial de Node.js y descarga la versión recomendada (LTS - Long Term Support). Sigue las instrucciones para instalarlo en tu sistema operativo.

Una vez instalado, abre una terminal y verifica que Node.js y npm se hayan instalado correctamente ejecutando los siguientes comandos:

node -v
npm -v

Este comando muestra en la pantalla la versión instalada de Node.js y npm, con ello sabemos que tenemos lo necesario para iniciar el aprendizaje de Angular.

Conociendo a Angular CLI

Angular tiene una herramienta muy útil llamada Angular CLI (Command Line Interface). Esta herramienta permite crear y gestionar proyectos de Angular mediante comandos sencillos. Nos ayuda a generar la estructura del proyecto, añadir componentes, servicios, y mucho más.

Para instalar Angular CLI, ejecuta el siguiente comando en tu terminal:

npm install -g @angular/cli

Este comando descarga e instala Angular CLI de forma global en tu sistema, lo que significa que puedes usarlo desde cualquier carpeta en tu computadora.

Una vez completada la instalación, verifica que Angular CLI esté correctamente instalado ejecutando:

ng version

Esto mostrará la versión de Angular CLI y otras herramientas relacionadas.

En este enlace podrás encontrar la referencia completa de los comandos disponibles para ejecutar en Angular CLI: https://angular.dev/cli

Entiendo la estructura de la aplicación

Ahora que tienes Angular CLI instalado, ya estás listo para crear tu primer proyecto Angular. Vamos a hacerlo paso a paso.

  1. Abre la terminal en la carpeta donde quieras crear el proyecto.
  2. Ejecuta el siguiente comando para crear un nuevo proyecto Angular:
ng new nombre-del-proyecto

Angular CLI te hará algunas preguntas, como si deseas añadir un enrutador (router) y qué formato de estilos (CSS, SCSS, etc.) prefieres usar. Responde según tus preferencias.

Después de responder estas preguntas, Angular CLI generará toda la estructura del proyecto y descargará las dependencias necesarias.

Recuerda que el nombre del proyecto no debe llevar espacios en blanco, caracteres especiales o acentos.

Cuando Angular CLI crea un proyecto, organiza todo en carpetas y archivos. Algunos de los archivos clave incluyen:

  • src/app: Aquí es donde se encuentra el código de tu aplicación. Contiene componentes, módulos y servicios.
  • src/app/app.component.ts: Es el componente principal de la aplicación.
  • src/app/app.module.ts: Define los módulos de la aplicación.
  • angular.json: Archivo de configuración del proyecto Angular.

Ejecutar Tu Proyecto Angular

Una vez que el proyecto ha sido creado, es hora de ejecutarlo y ver tu primera aplicación Angular en acción. Angular CLI te permite correr un servidor de desarrollo para que puedas ver los cambios que haces en tiempo real.

Para iniciar el servidor, ejecuta el siguiente comando en la terminal desde la carpeta de tu proyecto:

ng serve

Angular comenzará a compilar el proyecto y luego te mostrará una URL que puedes abrir en tu navegador (por defecto es http://localhost:4200). Abre esa URL en tu navegador y deberías ver la página inicial de tu nueva aplicación Angular.

Cada vez que hagas un cambio en tu código, Angular recargará automáticamente la página para reflejar los cambios, lo que hace el desarrollo más eficiente y fluido.

Creando componentes

Sabiendo que Angular basa su funcionamiento en componentes, es natural que podamos crearlos de forma rápida y simple, usando a Angular CLI. Para ello ejecutamos el siguiente comando:

ng generate component nombre-componente

Con esto Angular CLI generará los siguientes archivos:

  1. .ts (TypeScript): Contiene la lógica del componente. Define la clase que controla su comportamiento.
  2. .html: Es la plantilla o vista, donde se define el contenido visual.
  3. .css: Aquí se especifican los estilos específicos del componente.
  4. .spec.ts: Es el archivo de pruebas unitarias, utilizado para verificar que el componente funcione como se espera.

Cada componente trabaja de manera modular, permitiendo reutilización y organización clara del código.

Ahora solo queda que practiques, para ello te dejó un video donde paso a paso damos estos primeros pasos e incluso iniciamos un proyecto, para poner la práctica los conceptos anteriormente revisados.

Si tienes alguna duda, me puedes mandar un mensaje a mi LinkedIn, con gusto te respondo.