Tutorial de primeros pasos en Angular
¡Bienvenido al tutorial de primeros pasos en Angular! En este tutorial, aprenderás los conceptos básicos de Angular y cómo comenzar a desarrollar aplicaciones web con este potente framework.
Puedes aprender y formarte mucho más en nuestro curso de Angular, donde te explicaremos todo lo que necesitas saber para convertirte en un gran desarrollador web.
Fundamentos de Angular
Si quieres más información sobre la última versión de Angular puedes consultar las novedades de Angular 17, nuestro listado de versiones de Angular o nuestro tutorial sobre cómo actualizar a la última versión.
Requisitos previos
Antes de comenzar, asegúrate de tener instalados los siguientes elementos:
- Node.JS: es necesario para ejecutar las herramientas de Angular y administrar las dependencias del proyecto. Puedes descargarlo desde la web oficial de NodeJS.
- Angular CLI: es una interfaz de línea de comandos que facilita la creación y gestión de proyectos de Angular. Para instalarlo, ejecuta el siguiente comando en tu terminal:
Esto instalará Angular CLI de forma global en tu sistema.
Creando un nuevo proyecto
El primer paso es crear un nuevo proyecto de Angular. Abre tu terminal y ejecuta el siguiente comando:
Este comando creará una nueva carpeta llamada "MiProyectoAngular" con la estructura básica de un proyecto de Angular. Durante la creación del proyecto, se te harán algunas preguntas, como el estilo de hoja de estilos a utilizar (CSS, SCSS, etc.) y si deseas agregar soporte para enrutamiento. Puedes elegir las opciones que mejor se adapten a tus necesidades.
Iniciando el servidor de desarrollo
Una vez que hayas creado el proyecto, debes iniciar el servidor de desarrollo para ver tu aplicación en funcionamiento. Navega hasta la carpeta de tu proyecto recién creado e ingresa el siguiente comando:
Este comando compilará tu aplicación y la servirá en un servidor local. Una vez que el servidor esté en funcionamiento, abre tu navegador web y ve a http:// localhost:4200. ¡Verás tu aplicación Angular recién creada!
El servidor de desarrollo también viene con la función de recarga automática, lo que significa que cualquier cambio que realices en tus archivos se reflejará automáticamente en el navegador sin necesidad de reiniciar el servidor.
Estructura del proyecto
El proyecto de Angular tiene una estructura organizada que te ayuda a mantener tus archivos ordenados. A continuación, se muestra una breve descripción de cada carpeta y archivo importante:
- src: Esta carpeta contiene todos los archivos fuente de tu aplicación. Aquí es donde escribirás la mayor parte de tu código.
- src/app: Esta carpeta es donde se encuentra el código principal de tu aplicación. Aquí es donde crearás componentes, servicios y otros elementos.
- src/assets: Puedes colocar recursos estáticos, como imágenes o archivos de datos, en esta carpeta. Estos archivos se pueden acceder desde tu aplicación.
- src/index.html: Este archivo es el punto de entrada de tu aplicación. Aquí es donde se carga tu aplicación Angular y donde puedes agregar enlaces a hojas de estilos o scripts externos.
Creando un componente
Los componentes son la unidad básica de construcción en Angular. Puedes crear un nuevo componente ejecutando el siguiente comando en tu terminal:
Esto generará automáticamente los archivos necesarios para tu nuevo componente en la carpeta
. El comando también agregará automáticamente la referencia a tu nuevo componente en el módulo principal de la aplicación.Un componente consta de tres archivos principales:
- mi-componente.component.ts: Este archivo contiene la lógica del componente. Aquí es donde puedes definir variables, funciones y realizar operaciones específicas para ese componente.
- mi-componente.component.html: Este archivo es la plantilla del componente. Aquí es donde defines la estructura y el diseño visual del componente utilizando HTML y las directivas de Angular.
- mi-componente.component.css: Este archivo es opcional y contiene los estilos CSS específicos para ese componente. Puedes agregar reglas CSS aquí para personalizar el aspecto de tu componente.
Añadiendo estilos
Para añadir estilos a tu componente, puedes editar el archivo
y agregar reglas CSS. Estos estilos se aplicarán únicamente al componente específico.Por ejemplo, si quieres cambiar el color de fondo de tu componente a azul, puedes agregar la siguiente regla CSS:
También puedes usar clases CSS y selectores para estilizar elementos específicos dentro de tu componente.
Añadiendo lógica
El archivo
es donde puedes agregar la lógica de tu componente. Puedes importar otros módulos, definir variables y funciones, y manipular datos.Por ejemplo, si deseas mostrar un mensaje de bienvenida en tu componente, puedes agregar la siguiente variable y función en el archivo
:Luego, en la plantilla
, puedes mostrar el mensaje de bienvenida utilizando interpolación de Angular:Mostrando el componente en la aplicación
Para mostrar el componente en tu aplicación, debes editar el archivo
y agregar la etiqueta de tu componente. Por ejemplo, si deseas mostrar el componente , debes agregar lo siguiente:Cuando ejecutes la aplicación, verás el contenido del componente
renderizado en el lugar donde agregaste la etiqueta.Aprende Angular desde cero
En este tutorial, has aprendido los primeros pasos para comenzar a desarrollar con Angular. Desde la creación de un nuevo proyecto hasta la creación de componentes y la visualización de tu aplicación en el navegador. Ahora estás listo para explorar más sobre Angular y construir aplicaciones web increíbles.
Recuerda que puedes encontrar más información en la documentación oficial de Angular para profundizar en los conceptos y características avanzadas, o bien consultar nuestro curso de Angular con la última versión lanzada.