{"id":1952,"date":"2023-11-23T11:41:34","date_gmt":"2023-11-23T14:41:34","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1952"},"modified":"2023-11-23T11:41:35","modified_gmt":"2023-11-23T14:41:35","slug":"capitulo-1-conceptos-basicos-de-angular","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-1-conceptos-basicos-de-angular\/","title":{"rendered":"Cap\u00edtulo 1: Conceptos B\u00e1sicos de Angular"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Introducci\u00f3n:<\/em> Este cap\u00edtulo es una introducci\u00f3n esencial a Angular, un framework de desarrollo web que te permitir\u00e1 construir aplicaciones web interactivas y din\u00e1micas. Exploraremos los conceptos fundamentales de Angular y aprender\u00e1s c\u00f3mo configurar tu entorno de desarrollo para comenzar a trabajar con este poderoso framework.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1.1. \u00bfQu\u00e9 es Angular?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Angular es un framework de desarrollo web de c\u00f3digo abierto creado por un equipo de ingenieros de Google. Inicialmente, fue desarrollado por un ingeniero llamado Misko Hevery, quien trabajaba en Google en ese momento. El desarrollo de Angular comenz\u00f3 en 2009, y se lanz\u00f3 la primera versi\u00f3n, conocida como \u00abAngularJS\u00bb o \u00abAngular 1.x\u00bb, en 2010. AngularJS introdujo un enfoque revolucionario para el desarrollo de aplicaciones web, popularizando el concepto de la arquitectura MVW (Model-View-Whatever) y el uso de directivas personalizadas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Posteriormente, en 2016, se lanz\u00f3 una reescritura completa del framework con el nombre \u00abAngular 2\u00bb, que marc\u00f3 una evoluci\u00f3n significativa en la arquitectura y el dise\u00f1o del framework. Desde entonces, Angular ha continuado evolucionando con nuevas versiones y ha mantenido su posici\u00f3n como un framework de desarrollo web de c\u00f3digo abierto ampliamente utilizado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A continuaci\u00f3n, te proporcionar\u00e9 una descripci\u00f3n m\u00e1s detallada:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00bfQu\u00e9 es un framework de JavaScript? <\/strong>Un framework de JavaScript es un conjunto de herramientas y bibliotecas predefinidas que proporciona una estructura para el desarrollo de aplicaciones web. Angular es uno de los frameworks de JavaScript m\u00e1s populares y se utiliza para construir aplicaciones web de una sola p\u00e1gina (SPA), donde la mayor parte del contenido se carga din\u00e1micamente sin recargar la p\u00e1gina.<\/li>\n\n\n\n<li><strong>Historia y evoluci\u00f3n de Angular <\/strong>Angular tuvo una primera versi\u00f3n conocida como AngularJS, que se lanz\u00f3 en 2010. Sin embargo, con Angular 2 y las versiones posteriores, se produjo un cambio significativo en la arquitectura y el dise\u00f1o del framework. Esto permiti\u00f3 que Angular se convirtiera en una herramienta m\u00e1s eficiente y poderosa para desarrollar aplicaciones web modernas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes una breve descripci\u00f3n de la caracter\u00edstica m\u00e1s relevante de cada una de las versiones de Angular junto con el a\u00f1o de su lanzamiento:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>AngularJS (Angular 1.x): <\/strong>Introducci\u00f3n de la arquitectura MVW (Model-View-Whatever) (2010)<\/li>\n\n\n\n<li><strong>Angular 2: <\/strong>Reescritura completa del framework con una arquitectura basada en componentes (2016)<\/li>\n\n\n\n<li><strong>Angular 4: <\/strong>Reducci\u00f3n del tama\u00f1o de los bundles y mejoras en la velocidad de carga (2017)<\/li>\n\n\n\n<li><strong>Angular 5: <\/strong>Soporte para Progressive Web Apps (PWAs) y mejoras en el rendimiento (2017)<\/li>\n\n\n\n<li><strong>Angular 6: <\/strong>Introducci\u00f3n de Angular Elements para la creaci\u00f3n de componentes reutilizables (2018)<\/li>\n\n\n\n<li><strong>Angular 7: <\/strong>Mejoras en el rendimiento y nuevas caracter\u00edsticas en Angular Material (2018)<\/li>\n\n\n\n<li><strong>Angular 8: <\/strong>Introducci\u00f3n de Angular Ivy, un nuevo motor de renderizado m\u00e1s r\u00e1pido (2019)<\/li>\n\n\n\n<li><strong>Angular 9: <\/strong>Introducci\u00f3n de Angular CLI Builders y mejoras en las bibliotecas compartidas (2019)<\/li>\n\n\n\n<li><strong>Angular 10: <\/strong>Actualizaci\u00f3n de las dependencias y mejoras en la detecci\u00f3n de cambios (2020)<\/li>\n\n\n\n<li><strong>Angular 11: <\/strong>Mejoras en la compatibilidad con TypeScript 4.0 y la eficiencia de la compilaci\u00f3n (2020)<\/li>\n\n\n\n<li><strong>Angular 12: <\/strong>Soporte para actualizaciones incrementales y mejoras en Angular CLI (2021)<\/li>\n\n\n\n<li><strong>Angular 13: <\/strong>Mejoras en la compilaci\u00f3n Ahead-of-Time (AOT) y en el rendimiento (2021)<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Cada versi\u00f3n de Angular ha aportado caracter\u00edsticas y mejoras significativas para facilitar el desarrollo de aplicaciones web, mejorar el rendimiento y mantener Angular como una opci\u00f3n s\u00f3lida para la creaci\u00f3n de aplicaciones modernas.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Caracter\u00edsticas y ventajas de Angular <\/strong>Angular ofrece varias caracter\u00edsticas clave, como una arquitectura basada en componentes, enlace de datos bidireccional (que permite una actualizaci\u00f3n autom\u00e1tica de la vista cuando los datos cambian), inyecci\u00f3n de dependencias (una forma de administrar las dependencias de un componente o servicio), facilidad para escribir pruebas unitarias y un s\u00f3lido respaldo por parte de Google. Estas caracter\u00edsticas hacen que Angular sea una elecci\u00f3n s\u00f3lida para desarrolladores que deseen construir aplicaciones web robustas.<\/li>\n\n\n\n<li><strong>Comparaci\u00f3n con otros frameworks <\/strong>Angular se compara con otros frameworks populares como React y Vue.js. La elecci\u00f3n entre estos frameworks depender\u00e1 de los requisitos del proyecto y de las preferencias del desarrollador. Angular es conocido por su estructura m\u00e1s completa y su conjunto de caracter\u00edsticas incorporadas, mientras que React se centra en la creaci\u00f3n de interfaces de usuario y Vue.js es apreciado por su simplicidad y facilidad de aprendizaje.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1.2. Configuraci\u00f3n del entorno de desarrollo<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Configurar el entorno de desarrollo es un paso crucial para trabajar con Angular:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Herramientas esenciales para el desarrollo de Angular <\/strong>Para comenzar a desarrollar aplicaciones Angular, necesitas ciertas herramientas esenciales:<ul><li><strong>Node.js y npm (Node Package Manager): <\/strong>Node.js es un entorno de ejecuci\u00f3n de JavaScript que te permite ejecutar JavaScript en el lado del servidor. npm es el gestor de paquetes de Node.js y se utiliza para instalar paquetes y dependencias de proyectos.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li><strong>Editor de c\u00f3digo: <\/strong>Necesitar\u00e1s un editor de c\u00f3digo, como Visual Studio Code, para escribir y editar tu c\u00f3digo de Angular.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Instalaci\u00f3n de Node.js y npm <\/strong>Puedes descargar e instalar Node.js desde el sitio web oficial (<a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">https:\/\/nodejs.org\/<\/a>). Junto con Node.js, npm se instalar\u00e1 autom\u00e1ticamente. Para verificar que Node.js y npm se instalaron correctamente, puedes abrir una terminal y ejecutar los siguientes comandos:<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">node -vnpm -v<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Configuraci\u00f3n de un editor de c\u00f3digo<\/strong><br>Un buen editor de c\u00f3digo es esencial. Visual Studio Code es una opci\u00f3n popular entre los desarrolladores de Angular. Puedes personalizarlo con extensiones para facilitar el desarrollo con Angular, como Angular Language Service.<\/li>\n\n\n\n<li><strong>Creaci\u00f3n del primer proyecto Angular con Angular CLI (Command Line Interface) <\/strong>Angular CLI es una herramienta que simplifica la creaci\u00f3n y gesti\u00f3n de proyectos Angular. Puedes crear tu primer proyecto Angular ejecutando el siguiente comando:<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">ng new nombre-del-proyecto<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Angular CLI te har\u00e1 una serie de preguntas para configurar el proyecto, como el estilo de hojas de estilo (CSS, SCSS, etc.), si deseas agregar enrutamiento y m\u00e1s.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1.3. Estructura de un proyecto Angular<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Exploraci\u00f3n de la estructura de directorios de un proyecto Angular generado <\/strong>Cuando creas un proyecto Angular con Angular CLI, se generan una serie de directorios y archivos. Estos incluyen \u00absrc\u00bb para el c\u00f3digo fuente de tu aplicaci\u00f3n, \u00abnode_modules\u00bb para las dependencias, \u00abangular.json\u00bb para la configuraci\u00f3n del proyecto, \u00abpackage.json\u00bb para las dependencias y scripts, y otros directorios y archivos relacionados con el desarrollo.<\/li>\n\n\n\n<li><strong>Archivos esenciales y su prop\u00f3sito <\/strong>Algunos archivos clave que encontrar\u00e1s en un proyecto Angular incluyen:<ul><li><strong>main.ts:<\/strong> Este es el punto de entrada de la aplicaci\u00f3n y se encarga de inicializar la aplicaci\u00f3n.<\/li><\/ul><ul><li><strong>app.module.ts:<\/strong> Define el m\u00f3dulo principal de la aplicaci\u00f3n y registra los componentes y servicios.<\/li><\/ul><ul><li><strong>app.component.ts:<\/strong> El primer componente de la aplicaci\u00f3n, que define la vista y la l\u00f3gica de la p\u00e1gina principal.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li><strong>index.html: <\/strong>La p\u00e1gina HTML principal de la aplicaci\u00f3n, que incluye las etiquetas <code>&lt;app-root&gt;&lt;\/app-root&gt; <\/code>donde se carga el contenido de la aplicaci\u00f3n.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Inicio de un servidor de desarrollo local <\/strong>Puedes iniciar un servidor de desarrollo local ejecutando el siguiente comando:<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">ng serve<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto compila la aplicaci\u00f3n y la sirve en un servidor web local. La aplicaci\u00f3n se actualiza autom\u00e1ticamente en tiempo real a medida que realizas cambios en el c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1.4. Creaci\u00f3n de un primer proyecto Angular<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de un componente b\u00e1sico <\/strong>Los componentes son los bloques de construcci\u00f3n fundamentales en Angular. Puedes crear un nuevo componente utilizando el siguiente comando:<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">ng generate component nombre-del-componente<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto generar\u00e1 archivos para el componente, incluyendo su plantilla, archivo TypeScript y hoja de estilo. Luego, puedes editar el componente y su plantilla para personalizarlo seg\u00fan tus necesidades.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Plantillas y vistas en Angular <\/strong>Las plantillas en Angular son archivos HTML que definen la estructura de las vistas. Las vistas en Angular se componen de plantillas y l\u00f3gica de componentes. Las plantillas se utilizan para representar la interfaz de usuario de la aplicaci\u00f3n.<\/li>\n\n\n\n<li><strong>Inserci\u00f3n de contenido din\u00e1mico <\/strong>Angular permite mostrar contenido din\u00e1mico en las plantillas utilizando interpolaci\u00f3n, que es la forma de mostrar valores de variables en la vista. Por ejemplo, puedes mostrar variables en la plantilla utilizando dobles llaves <code>{{ variable }}<\/code>.<\/li>\n\n\n\n<li><strong>Mostrar \u00abHola, Mundo\u00bb en tu navegador <\/strong>Despu\u00e9s de crear un componente simple y definir una plantilla que muestra \u00abHola, Mundo\u00bb, puedes ver tu primera aplicaci\u00f3n Angular en un navegador utilizando el servidor de desarrollo. El contenido din\u00e1mico se actualizar\u00e1 en tiempo real a medida que realices cambios en el componente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1.5. Componentes y M\u00f3dulos<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00bfQu\u00e9 son los componentes en Angular? <\/strong>Los componentes son elementos reutilizables en Angular que constan de una plantilla, l\u00f3gica y estilos. Cada componente tiene una funci\u00f3n espec\u00edfica en la interfaz de usuario de la aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Un ejemplo com\u00fan de componentes en Angular podr\u00eda ser un sistema de navegaci\u00f3n para una aplicaci\u00f3n web. Imagina que est\u00e1s construyendo una aplicaci\u00f3n con varias secciones, como \u00abInicio\u00bb, \u00abProductos\u00bb, \u00abAcerca de\u00bb y \u00abContacto\u00bb. Cada una de estas secciones puede ser un componente independiente. Aqu\u00ed hay un ejemplo de c\u00f3mo se podr\u00edan definir estos componentes en Angular:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Componente de Inicio:<\/strong>\n<ol class=\"wp-block-list\">\n<li>Este componente podr\u00eda mostrar informaci\u00f3n de bienvenida y contenido relacionado con la p\u00e1gina de inicio de la aplicaci\u00f3n.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Componente de Productos:<\/strong>\n<ol class=\"wp-block-list\">\n<li>El componente de Productos podr\u00eda mostrar una lista de productos disponibles para comprar y permitir a los usuarios navegar a las p\u00e1ginas de detalles de los productos.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Componente de Acerca de:<\/strong>\n<ol class=\"wp-block-list\">\n<li>En el componente de Acerca de, podr\u00edas mostrar informaci\u00f3n sobre la empresa o la aplicaci\u00f3n, su historia y su misi\u00f3n.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>Componente de Contacto:<\/strong>\n<ol class=\"wp-block-list\">\n<li>El componente de Contacto podr\u00eda incluir un formulario de contacto donde los usuarios puedan enviar consultas o comentarios.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Cada uno de estos componentes tendr\u00eda su propia plantilla HTML, su archivo TypeScript para la l\u00f3gica y, si es necesario, su hoja de estilo CSS o SCSS para el dise\u00f1o. Luego, estos componentes se pueden usar en la aplicaci\u00f3n principal para construir la estructura de navegaci\u00f3n y mostrar el contenido correspondiente en funci\u00f3n de la URL o las interacciones del usuario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los componentes en Angular se utilizan para dividir la interfaz de usuario en partes m\u00e1s peque\u00f1as y reutilizables, lo que facilita el desarrollo y el mantenimiento de aplicaciones web complejas.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de componentes personalizados <\/strong>Puedes crear componentes personalizados para dividir la interfaz de usuario en partes m\u00e1s peque\u00f1as y reutilizables. Cada componente se compone de un archivo TypeScript, una plantilla HTML y una hoja de estilo CSS o SCSS.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo b\u00e1sico de c\u00f3mo se ver\u00eda un componente personalizado en Angular con su archivo TypeScript, una plantilla HTML y una hoja de estilo CSS. Supongamos que estamos creando un componente llamado <code>ProductListComponent <\/code>que muestra una lista de productos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product-list.component.ts (archivo TypeScript):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-product-list', \/\/ Nombre del selector para usar el componente en la plantilla\r\n  templateUrl: '.\/product-list.component.html', \/\/ Ruta a la plantilla HTML\r\n  styleUrls: &#91;'.\/product-list.component.css'] \/\/ Ruta a la hoja de estilo CSS\r\n})\r\nexport class ProductListComponent {\r\n  \/\/ Aqu\u00ed puedes definir propiedades y l\u00f3gica relacionada con el componente\r\n  products = &#91;\r\n    { id: 1, name: 'Producto 1', price: 19.99 },\r\n    { id: 2, name: 'Producto 2', price: 29.99 },\r\n    { id: 3, name: 'Producto 3', price: 39.99 }\r\n  ];\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product-list.component.html (plantilla HTML):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- La plantilla HTML define la estructura visual del componente -->\r\n&lt;div>\r\n  &lt;h2>Lista de Productos&lt;\/h2>\r\n  &lt;ul>\r\n    &lt;li *ngFor=\"let product of products\">\r\n      {{ product.name }} - Precio: {{ product.price | currency: 'USD' }}\r\n    &lt;\/li>\r\n  &lt;\/ul>\r\n&lt;\/div>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product-list.component.css (hoja de estilo CSS):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* La hoja de estilo CSS define el aspecto visual del componente *\/\r\nh2 {\r\n  color: #333;\r\n}\r\n\r\nul {\r\n  list-style-type: none;\r\n  padding: 0;\r\n}\r\n\r\nli {\r\n  margin: 10px 0;\r\n  font-size: 18px;\r\n}\r\n\r\n\/* Puedes agregar m\u00e1s estilos seg\u00fan tus necesidades *\/\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este es un ejemplo b\u00e1sico de un componente personalizado en Angular. El archivo TypeScript (<code>product-list.component.ts<\/code>) define la l\u00f3gica del componente, la plantilla HTML (<code>product-list.component.html<\/code>) define la estructura visual y la hoja de estilo CSS (<code>product-list.component.css<\/code>) define los estilos para el componente. Puedes utilizar este componente en otras partes de tu aplicaci\u00f3n usando el selector <code>app-product-list<\/code>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Uso de m\u00f3dulos para organizar la aplicaci\u00f3n <\/strong>Los m\u00f3dulos en Angular se utilizan para organizar la aplicaci\u00f3n en unidades funcionales. El m\u00f3dulo principal es el <code>AppModule<\/code>, que importa y declara todos los componentes y servicios necesarios para la aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo b\u00e1sico del archivo <code>AppModule<\/code> en Angular. El <code>AppModule<\/code> es el m\u00f3dulo principal de tu aplicaci\u00f3n, y se encarga de importar y declarar los componentes y servicios necesarios para que tu aplicaci\u00f3n funcione. Aqu\u00ed te muestro un ejemplo simple:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HomeComponent } from '.\/home.component';\r\nimport { ProductsComponent } from '.\/products.component';\r\nimport { AboutComponent } from '.\/about.component';\r\nimport { ContactComponent } from '.\/contact.component';\r\n\r\n@NgModule({\r\n  declarations: &#91;\r\n    AppComponent,\r\n    HomeComponent,\r\n    ProductsComponent,\r\n    AboutComponent,\r\n    ContactComponent\r\n  ],\r\n  imports: &#91;\r\n    BrowserModule\r\n  ],\r\n  providers: &#91;],\r\n  bootstrap: &#91;AppComponent]\r\n})\r\nexport class AppModule { }\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Importamos m\u00f3dulos y componentes necesarios, como <code>BrowserModule <\/code>para aplicaciones web, el componente principal <code>AppComponent <\/code>y otros componentes que hemos creado, como <code>HomeComponent<\/code>, <code>ProductsComponent<\/code>, <code>AboutComponent <\/code>y <code>ContactComponent<\/code>.<\/li>\n\n\n\n<li>En el array <code>declarations<\/code>, listamos todos los componentes que este m\u00f3dulo utilizar\u00e1. Cada componente debe ser declarado aqu\u00ed para que Angular los reconozca.<\/li>\n\n\n\n<li>En el array <code>imports<\/code>, especificamos los m\u00f3dulos que se utilizan en este m\u00f3dulo. En este caso, estamos importando <code>BrowserModule <\/code>para las aplicaciones web. Puedes importar otros m\u00f3dulos seg\u00fan las necesidades de tu aplicaci\u00f3n.<\/li>\n\n\n\n<li>El array <code>providers <\/code>se utiliza para declarar los servicios que pueden ser inyectados en los componentes de este m\u00f3dulo. En este ejemplo, est\u00e1 vac\u00edo, pero normalmente se llenar\u00eda con servicios personalizados si los tuvieras.<\/li>\n\n\n\n<li>Finalmente, en el array <code>bootstrap<\/code>, especificamos el componente ra\u00edz de la aplicaci\u00f3n, que en este caso es <code>AppComponent<\/code>. El componente ra\u00edz se inyectar\u00e1 en el archivo HTML principal de la aplicaci\u00f3n para que se muestre en la p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este es un ejemplo simple, pero muestra c\u00f3mo se configura el <code>AppModule <\/code>en Angular para importar y declarar componentes, m\u00f3dulos y servicios necesarios para tu aplicaci\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Declaraci\u00f3n, exportaci\u00f3n e importaci\u00f3n de componentes en m\u00f3dulos <\/strong>Los componentes se declaran en un m\u00f3dulo espec\u00edfico y luego se exportan para que est\u00e9n disponibles para otros m\u00f3dulos. Otros m\u00f3dulos pueden importar estos componentes si es necesario.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de c\u00f3mo declarar, exportar e importar componentes en m\u00f3dulos en Angular. Supongamos que tenemos dos componentes llamados <code>ProductListComponent <\/code>y <code>ProductDetailComponent <\/code>que queremos declarar en un m\u00f3dulo llamado <code>ProductModule<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product-list.component.ts (archivo TypeScript):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-product-list',\r\n  templateUrl: '.\/product-list.component.html',\r\n})\r\nexport class ProductListComponent {\r\n  \/\/ Propiedades y l\u00f3gica del componente\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product-detail.component.ts (archivo TypeScript):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-product-detail',\r\n  templateUrl: '.\/product-detail.component.html',\r\n})\r\nexport class ProductDetailComponent {\r\n  \/\/ Propiedades y l\u00f3gica del componente\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product.module.ts (archivo TypeScript del m\u00f3dulo):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { NgModule } from '@angular\/core';\r\nimport { CommonModule } from '@angular\/common';\r\nimport { ProductListComponent } from '.\/product-list.component'; \/\/ Importamos el componente ProductListComponent\r\nimport { ProductDetailComponent } from '.\/product-detail.component'; \/\/ Importamos el componente ProductDetailComponent\r\n\r\n@NgModule({\r\n  declarations: &#91;\r\n    ProductListComponent, \/\/ Declaramos el componente ProductListComponent en este m\u00f3dulo\r\n    ProductDetailComponent, \/\/ Declaramos el componente ProductDetailComponent en este m\u00f3dulo\r\n  ],\r\n  imports: &#91;CommonModule],\r\n})\r\nexport class ProductModule {}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hemos creado dos componentes, <code>ProductListComponent <\/code>y <code>ProductDetailComponent<\/code>, cada uno con su archivo TypeScript y su plantilla HTML.<\/li>\n\n\n\n<li>Luego, creamos un m\u00f3dulo llamado <code>ProductModule <\/code>utilizando el decorador <code>NgModule<\/code>. En el array <code>declarations<\/code>, importamos y declaramos los componentes que deseamos utilizar en este m\u00f3dulo, es decir, <code>ProductListComponent <\/code>y <code>ProductDetailComponent<\/code>.<\/li>\n\n\n\n<li>Adem\u00e1s, hemos importado el m\u00f3dulo <code>CommonModule<\/code> de Angular en el array <code>imports<\/code>. Este m\u00f3dulo proporciona funcionalidades comunes utilizadas en aplicaciones web.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Al declarar los componentes en el m\u00f3dulo, los hacemos disponibles para su uso en cualquier componente o m\u00f3dulo que importe <code>ProductModule<\/code>. Esto facilita la organizaci\u00f3n y modularidad de la aplicaci\u00f3n, ya que puedes agrupar componentes relacionados en m\u00f3dulos espec\u00edficos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este cap\u00edtulo te proporciona una base s\u00f3lida para comprender los conceptos b\u00e1sicos de Angular, configurar tu entorno de desarrollo y comenzar a trabajar en tu primera aplicaci\u00f3n Angular. A medida que avances en el desarrollo de la aplicaci\u00f3n de comercio electr\u00f3nico, estos conceptos se ir\u00e1n expandiendo y aplicando en situaciones del mundo real.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n: Este cap\u00edtulo es una introducci\u00f3n esencial a Angular, un framework de desarrollo web que te permitir\u00e1 construir aplicaciones web interactivas y din\u00e1micas. Exploraremos los conceptos fundamentales de Angular y aprender\u00e1s c\u00f3mo configurar tu entorno de desarrollo para comenzar a trabajar con este poderoso framework. 1.1. \u00bfQu\u00e9 es Angular? Angular es un framework de desarrollo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1954,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Conceptos-Basicos-de-Angular-1.jpg",1000,662,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Conceptos-Basicos-de-Angular-1-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Conceptos-Basicos-de-Angular-1-300x199.jpg",300,199,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Conceptos-Basicos-de-Angular-1-768x508.jpg",768,508,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Conceptos-Basicos-de-Angular-1.jpg",1000,662,false],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Conceptos-Basicos-de-Angular-1.jpg",1000,662,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Conceptos-Basicos-de-Angular-1.jpg",1000,662,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Introducci\u00f3n: Este cap\u00edtulo es una introducci\u00f3n esencial a Angular, un framework de desarrollo web que te permitir\u00e1 construir aplicaciones web interactivas y din\u00e1micas. Exploraremos los conceptos fundamentales de Angular y aprender\u00e1s c\u00f3mo configurar tu entorno de desarrollo para comenzar a trabajar con este poderoso framework. 1.1. \u00bfQu\u00e9 es Angular? Angular es un framework de desarrollo&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1952"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1952\/revisions"}],"predecessor-version":[{"id":1955,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1952\/revisions\/1955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/1954"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}