diff --git a/adev-es/src/content/tutorials/first-app/intro/README.en.md b/adev-es/src/content/tutorials/first-app/intro/README.en.md new file mode 100644 index 0000000..1b6d8c9 --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/intro/README.en.md @@ -0,0 +1,86 @@ +# Build your first Angular app + +This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular. + +You can do as many or as few as you would like and you can do them in any order. + +HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial! + + + +## Before you start + +For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful. + +### Your experience + +The lessons in this tutorial assume that you have experience with the following: + +1. Created an HTML web page by editing the HTML directly. +1. Programmed web site content in JavaScript. +1. Read Cascading Style Sheet (CSS) content and understand how selectors are used. +1. Used command-line instructions to perform tasks on your computer. + +### Your equipment + +These lessons can be completed using a local installation of the Angular tools or in our embedded editor. Local Angular development can be completed on Windows, MacOS or Linux based systems. + +NOTE: Look for alerts like this one, which call out steps that may only be for your local editor. + +## Conceptual preview of your first Angular app + +The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses. +This app uses features that are common to many Angular apps. + +Output of homes landing page + +## Local development environment + +NOTE: This step is only for your local environment! + +Perform these steps in a command-line tool on the computer you want to use for this tutorial. + + + + +Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json). + +From a **Terminal** window: + +1. Run the following command: `node --version` +1. Confirm that the version number displayed meets the requirements. + + + +If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/) + + + +With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development. + +From a **Terminal** window run the following command: `npm install -g @angular/cli`. + + + +You are free to use any tool you prefer to build apps with Angular. We recommend the following: + +1. [Visual Studio Code](https://code.visualstudio.com/) +2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) +3. [WebStorm](https://www.jetbrains.com/webstorm/) + + + + +In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai). + + + + + +For more information about the topics covered in this lesson, visit: + + + + + + diff --git a/adev-es/src/content/tutorials/first-app/intro/README.md b/adev-es/src/content/tutorials/first-app/intro/README.md index 1b6d8c9..5dbd024 100644 --- a/adev-es/src/content/tutorials/first-app/intro/README.md +++ b/adev-es/src/content/tutorials/first-app/intro/README.md @@ -1,86 +1,86 @@ -# Build your first Angular app +# Construye tu primera aplicación Angular -This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular. +Este tutorial consiste en lecciones que introducen los conceptos de Angular que necesitas conocer para comenzar a programar en Angular. -You can do as many or as few as you would like and you can do them in any order. +Puedes hacer tantas como quieras, o pocas, y puedes hacerlas en cualquier orden. -HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial! +ÚTIL: ¿Prefieres video? También tenemos un [curso completo en YouTube](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) para este tutorial. -## Before you start +## Antes de comenzar -For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful. +Para obtener la mejor experiencia con este tutorial, revisa estos requisitos para asegurarte de que tienes lo necesario para tener éxito. -### Your experience +### Tu experiencia -The lessons in this tutorial assume that you have experience with the following: +Las lecciones en este tutorial asumen que tienes experiencia con lo siguiente: -1. Created an HTML web page by editing the HTML directly. -1. Programmed web site content in JavaScript. -1. Read Cascading Style Sheet (CSS) content and understand how selectors are used. -1. Used command-line instructions to perform tasks on your computer. +1. Has creado una página web HTML editando el HTML directamente. +1. Has programado contenido de sitios web en JavaScript. +1. Has leído contenido de hojas de estilo en cascada (CSS) y entiendes cómo se usan los selectores. +1. Has usado instrucciones de línea de comandos para realizar tareas en tu computadora. -### Your equipment +### Tu equipo -These lessons can be completed using a local installation of the Angular tools or in our embedded editor. Local Angular development can be completed on Windows, MacOS or Linux based systems. +Estas lecciones se pueden completar usando una instalación local de las herramientas de Angular o en nuestro editor integrado. El desarrollo local de Angular se puede completar en sistemas Windows, MacOS o Linux. -NOTE: Look for alerts like this one, which call out steps that may only be for your local editor. +NOTA: Busca alertas como esta, que señalan pasos que pueden ser solo para tu editor local. -## Conceptual preview of your first Angular app +## Vista previa conceptual de tu primera aplicación Angular -The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses. -This app uses features that are common to many Angular apps. +Las lecciones en este tutorial crean una aplicación Angular que lista casas en renta y muestra los detalles de casas individuales. +Esta aplicación utiliza características que son comunes a muchas aplicaciones Angular. -Output of homes landing page +Resultado de la página de inicio de la aplicación de viviendas -## Local development environment +## Entorno de desarrollo local -NOTE: This step is only for your local environment! +NOTA: ¡Este paso es solo para tu entorno local! -Perform these steps in a command-line tool on the computer you want to use for this tutorial. +Realiza estos pasos en una herramienta de línea de comandos en la computadora que quieras usar para este tutorial. - -Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json). + +Angular requiere una versión LTS activa o LTS de mantenimiento de Node. Confirmemos tu versión de `node.js`. Para obtener información sobre los requisitos de versión específicos, consulta la propiedad engines en el [archivo package.json](https://unpkg.com/browse/@angular/core@15.1.5/package.json). -From a **Terminal** window: +Desde una ventana de **Terminal**: -1. Run the following command: `node --version` -1. Confirm that the version number displayed meets the requirements. +1. Ejecuta el siguiente comando: `node --version` +1. Confirma que el número de versión mostrado cumple con los requisitos. - -If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/) + +Si no tienes una versión de `node.js` instalada, sigue las [instrucciones de instalación en nodejs.org](https://nodejs.org/en/download/) - -With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development. + +Con `node.js` y `npm` instalados, el siguiente paso es instalar el [Angular CLI](tools/cli) que proporciona herramientas para el desarrollo efectivo de Angular. -From a **Terminal** window run the following command: `npm install -g @angular/cli`. +Desde una ventana de **Terminal** ejecuta el siguiente comando: `npm install -g @angular/cli`. - -You are free to use any tool you prefer to build apps with Angular. We recommend the following: + +Eres libre de usar cualquier herramienta que prefieras para construir aplicaciones con Angular. Recomendamos lo siguiente: 1. [Visual Studio Code](https://code.visualstudio.com/) -2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) +2. Como paso opcional pero recomendado, puedes mejorar aún más tu experiencia de desarrollo instalando el [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) 3. [WebStorm](https://www.jetbrains.com/webstorm/) - + -In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai). +En caso de que estés siguiendo este tutorial en tu IDE con IA preferido, [consulta las reglas de prompt y mejores prácticas de Angular](/ai/develop-with-ai). -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: - - - + + + diff --git a/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.en.md b/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.en.md new file mode 100644 index 0000000..33cd19a --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.en.md @@ -0,0 +1,122 @@ +# Hello world + +This first lesson serves as the starting point from which each lesson in this tutorial adds new features to build a complete Angular app. In this lesson, we'll update the application to display the famous text, "Hello World". + + + +## What you'll learn + +The updated app you have after this lesson confirms that you and your IDE are ready to begin creating an Angular app. + +NOTE: If you are working with the embedded editor, skip to [step four](#create-hello-world). +When working in the browser playground, you do not need to `ng serve` to run the app. Other commands like `ng generate` can be done in the console window to your right. + + + + +Start by clicking the "Download" icon in the top right pan of the code editor. This will download a `.zip` file containing the source code for this tutorial. Open this in your local Terminal and IDE then move on to testing the default app. + +At any step in the tutorial, you can click this icon to download the step's source code and start from there. + + + +In this step, after you download the default starting app, you build the default Angular app. +This confirms that your development environment has what you need to continue the tutorial. + +In the **Terminal** pane of your IDE: + +1. In your project directory, navigate to the `first-app` directory. +1. Run this command to install the dependencies needed to run the app. + + ```shell + npm install + ``` + +1. Run this command to build and serve the default app. + + ```shell + ng serve + ``` + + The app should build without errors. + +1. In a web browser on your development computer, open `http://localhost:4200`. +1. Confirm that the default web site appears in the browser. +1. You can leave `ng serve` running as you complete the next steps. + + + +In this step, you get to know the files that make up a default Angular app. + +In the **Explorer** pane of your IDE: + +1. In your project directory, navigate to the `first-app` directory. +1. Open the `src` directory to see these files. + 1. In the file explorer, find the Angular app files (`/src`). + 1. `index.html` is the app's top level HTML template. + 1. `styles.css` is the app's top level style sheet. + 1. `main.ts` is where the app starts running. + 1. `favicon.ico` is the app's icon, just as you would find in any web site. + 1. In the file explorer, find the Angular app's component files (`/app`). + 1. `app.ts` is the source file that describes the `app-root` component. + This is the top-level Angular component in the app. A component is the basic building block of an Angular application. + The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files. + + In this app, the styles are in a separate file while the component's code and HTML template are in this file. + + 1. `app.css` is the style sheet for this component. + 1. New components are added to this directory. + + 1. In the file explorer, find the image directory (`/assets`) that contains images used by the app. + 1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with. + 1. `.angular` has files required to build the Angular app. + 1. `.e2e` has files used to test the app. + 1. `.node_modules` has the node.js packages that the app uses. + 1. `angular.json` describes the Angular app to the app building tools. + 1. `package.json` is used by `npm` (the node package manager) to run the finished app. + 1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler. + +After you have reviewed the files that make up an Angular app project, continue to the next step. + + + +In this step, you update the Angular project files to change the displayed content. + +In your IDE: + +1. Open `first-app/src/index.html`. + NOTE: This step and the next are only for your local environment! + +1. In `index.html`, replace the `` element with this code to update the title of the app. + + <docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/> + + Then, save the changes you just made to `index.html`. + +1. Next, open `first-app/src/app/app.ts`. +1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component. + + <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/> + +1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title. + + <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/> + + Then, save the changes you made to `app.ts`. + +1. If you stopped the `ng serve` command from step 1, in the **Terminal** window of your IDE, run `ng serve` again. +1. Open your browser and navigate to `localhost:4200` and confirm that the app builds without error and displays _Homes_ in the title and _Hello world_ in the body of your app: + <img alt="browser frame of page displaying the text 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png"> + </docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you updated a default Angular app to display _Hello world_. +In the process, you learned about the `ng serve` command to serve your app locally for testing. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/components" title="Angular Components"/> + <docs-pill href="tools/cli" title="Creating applications with the Angular CLI"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md b/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md index 33cd19a..a0ae2ba 100644 --- a/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md @@ -1,122 +1,122 @@ -# Hello world +# Hola mundo -This first lesson serves as the starting point from which each lesson in this tutorial adds new features to build a complete Angular app. In this lesson, we'll update the application to display the famous text, "Hello World". +Esta primera lección sirve como punto de partida desde el cual cada lección en este tutorial agrega nuevas funcionalidades para construir una aplicación Angular completa. En esta lección, actualizaremos la aplicación para mostrar el famoso texto "Hello World". <docs-video src="https://www.youtube.com/embed/UnOwDuliqZA?si=uML-cDRbrxmYdD_9"/> -## What you'll learn +## ¿Qué aprenderás? -The updated app you have after this lesson confirms that you and your IDE are ready to begin creating an Angular app. +La aplicación actualizada que tendrás después de esta lección confirma que tú y tu IDE están listos para comenzar a crear una aplicación Angular. -NOTE: If you are working with the embedded editor, skip to [step four](#create-hello-world). -When working in the browser playground, you do not need to `ng serve` to run the app. Other commands like `ng generate` can be done in the console window to your right. +NOTA: Si estás trabajando con el editor integrado, salta al [paso cuatro](#crea-un-hello-world). +Cuando trabajas en el playground del navegador, no necesitas `ng serve` para ejecutar la aplicación. Otros comandos como `ng generate` se pueden hacer en la ventana de la consola a tu derecha. <docs-workflow> -<docs-step title="Download the default app"> -Start by clicking the "Download" icon in the top right pan of the code editor. This will download a `.zip` file containing the source code for this tutorial. Open this in your local Terminal and IDE then move on to testing the default app. +<docs-step title="Descarga la aplicación predeterminada"> +Comienza haciendo clic en el ícono "Download" en el panel superior derecho del editor de código. Esto descargará un archivo `.zip` que contiene el código fuente para este tutorial. Ábrelo en tu Terminal e IDE local, luego continúa con las pruebas de la aplicación predeterminada. -At any step in the tutorial, you can click this icon to download the step's source code and start from there. +En cualquier paso del tutorial, puedes hacer clic en este ícono para descargar el código fuente del paso y comenzar desde allí. </docs-step> -<docs-step title="Test the default app"> -In this step, after you download the default starting app, you build the default Angular app. -This confirms that your development environment has what you need to continue the tutorial. +<docs-step title="Prueba la aplicación predeterminada"> +En este paso, después de descargar la aplicación inicial predeterminada, construyes la aplicación Angular predeterminada. +Esto confirma que tu entorno de desarrollo tiene lo que necesitas para continuar el tutorial. -In the **Terminal** pane of your IDE: +En el panel de **Terminal** de tu IDE: -1. In your project directory, navigate to the `first-app` directory. -1. Run this command to install the dependencies needed to run the app. +1. En tu directorio del proyecto, navega al directorio `first-app`. +1. Ejecuta este comando para instalar las dependencias necesarias para ejecutar la aplicación. ```shell npm install ``` -1. Run this command to build and serve the default app. +1. Ejecuta este comando para construir y servir la aplicación predeterminada. ```shell ng serve ``` - The app should build without errors. + La aplicación debería construirse sin errores. -1. In a web browser on your development computer, open `http://localhost:4200`. -1. Confirm that the default web site appears in the browser. -1. You can leave `ng serve` running as you complete the next steps. +1. En un navegador web en tu computadora de desarrollo, abre `http://localhost:4200`. +1. Confirma que el sitio web predeterminado aparece en el navegador. +1. Puedes dejar `ng serve` ejecutándose mientras completas los siguientes pasos. </docs-step> -<docs-step title="Review the files in the project"> -In this step, you get to know the files that make up a default Angular app. - -In the **Explorer** pane of your IDE: - -1. In your project directory, navigate to the `first-app` directory. -1. Open the `src` directory to see these files. - 1. In the file explorer, find the Angular app files (`/src`). - 1. `index.html` is the app's top level HTML template. - 1. `styles.css` is the app's top level style sheet. - 1. `main.ts` is where the app starts running. - 1. `favicon.ico` is the app's icon, just as you would find in any web site. - 1. In the file explorer, find the Angular app's component files (`/app`). - 1. `app.ts` is the source file that describes the `app-root` component. - This is the top-level Angular component in the app. A component is the basic building block of an Angular application. - The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files. - - In this app, the styles are in a separate file while the component's code and HTML template are in this file. - - 1. `app.css` is the style sheet for this component. - 1. New components are added to this directory. - - 1. In the file explorer, find the image directory (`/assets`) that contains images used by the app. - 1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with. - 1. `.angular` has files required to build the Angular app. - 1. `.e2e` has files used to test the app. - 1. `.node_modules` has the node.js packages that the app uses. - 1. `angular.json` describes the Angular app to the app building tools. - 1. `package.json` is used by `npm` (the node package manager) to run the finished app. - 1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler. - -After you have reviewed the files that make up an Angular app project, continue to the next step. +<docs-step title="Revisa los archivos del proyecto"> +En este paso, conocerás los archivos que componen una aplicación Angular predeterminada. + +En el panel **Explorador** de tu IDE: + +1. En tu directorio del proyecto, navega al directorio `first-app`. +1. Abre el directorio `src` para ver estos archivos. + 1. En el explorador de archivos, encuentra los archivos de la aplicación Angular (`/src`). + 1. `index.html` es la plantilla HTML de nivel superior de la aplicación. + 1. `styles.css` es la hoja de estilos de nivel superior de la aplicación. + 1. `main.ts` es donde la aplicación comienza a ejecutarse. + 1. `favicon.ico` es el ícono de la aplicación, como encontrarías en cualquier sitio web. + 1. En el explorador de archivos, encuentra los archivos de componentes de la aplicación Angular (`/app`). + 1. `app.ts` es el archivo fuente que describe el componente `app-root`. + Este es el componente Angular de nivel superior en la aplicación. Un componente es el bloque de construcción básico de una aplicación Angular. + La descripción del componente incluye el código del componente, la plantilla HTML y los estilos, que pueden describirse en este archivo o en archivos separados. + + En esta aplicación, los estilos están en un archivo separado mientras que el código del componente y la plantilla HTML están en este archivo. + + 1. `app.css` es la hoja de estilos para este componente. + 1. Los nuevos componentes se agregan a este directorio. + + 1. En el explorador de archivos, encuentra el directorio de imágenes (`/assets`) que contiene las imágenes usadas por la aplicación. + 1. En el explorador de archivos, encuentra los archivos y directorios que una aplicación Angular necesita para construirse y ejecutarse, pero no son archivos con los que normalmente interactúas. + 1. `.angular` tiene archivos necesarios para construir la aplicación Angular. + 1. `.e2e` tiene archivos usados para probar la aplicación. + 1. `.node_modules` tiene los paquetes node.js que la aplicación usa. + 1. `angular.json` describe la aplicación Angular a las herramientas de construcción. + 1. `package.json` es usado por `npm` (el gestor de paquetes de node) para ejecutar la aplicación terminada. + 1. `tsconfig.*` son los archivos que describen la configuración de la aplicación al compilador de TypeScript. + +Después de haber revisado los archivos que componen un proyecto de aplicación Angular, continúa al siguiente paso. </docs-step> -<docs-step title="Create `Hello World`"> -In this step, you update the Angular project files to change the displayed content. +<docs-step title="Crea un `Hello World`"> +En este paso, actualizas los archivos del proyecto Angular para cambiar el contenido mostrado. -In your IDE: +En tu IDE: -1. Open `first-app/src/index.html`. - NOTE: This step and the next are only for your local environment! +1. Abre `first-app/src/index.html`. + NOTA: ¡Este paso y el siguiente son solo para tu entorno local! -1. In `index.html`, replace the `<title>` element with this code to update the title of the app. +1. En `index.html`, reemplaza el elemento `<title>` con este código para actualizar el título de la aplicación. - <docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/> + <docs-code header="Reemplazar en src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/> - Then, save the changes you just made to `index.html`. + Luego, guarda los cambios que acabas de hacer en `index.html`. -1. Next, open `first-app/src/app/app.ts`. -1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component. +1. A continuación, abre `first-app/src/app/app.ts`. +1. En `app.ts`, en la definición de `@Component`, reemplaza la línea `template` con este código para cambiar el texto en el componente de la aplicación. - <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/> + <docs-code language="angular-ts" header="Reemplazar en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/> -1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title. +1. En `app.ts`, en la definición de la clase `App`, reemplaza la línea `title` con este código para cambiar el título del componente. - <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/> + <docs-code header="Reemplazar en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/> - Then, save the changes you made to `app.ts`. + Luego, guarda los cambios que hiciste en `app.ts`. -1. If you stopped the `ng serve` command from step 1, in the **Terminal** window of your IDE, run `ng serve` again. -1. Open your browser and navigate to `localhost:4200` and confirm that the app builds without error and displays _Homes_ in the title and _Hello world_ in the body of your app: - <img alt="browser frame of page displaying the text 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png"> +1. Si detuviste el comando `ng serve` del paso 1, en la ventana de **Terminal** de tu IDE, ejecuta `ng serve` nuevamente. +1. Abre tu navegador y navega a `localhost:4200` y confirma que la aplicación se construye sin errores y muestra _Homes_ en el título y _Hello world_ en el cuerpo de tu aplicación: + <img alt="marco del navegador mostrando el texto 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png"> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you updated a default Angular app to display _Hello world_. -In the process, you learned about the `ng serve` command to serve your app locally for testing. +RESUMEN: En esta lección, actualizaste una aplicación Angular predeterminada para mostrar _Hello world_. +En el proceso, aprendiste sobre el comando `ng serve` para servir tu aplicación localmente para pruebas. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/components" title="Angular Components"/> - <docs-pill href="tools/cli" title="Creating applications with the Angular CLI"/> + <docs-pill href="guide/components" title="Componentes de Angular"/> + <docs-pill href="tools/cli" title="Creando aplicaciones con el CLI de Angular"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/02-Home/README.en.md b/adev-es/src/content/tutorials/first-app/steps/02-Home/README.en.md new file mode 100644 index 0000000..9af6c5e --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/02-Home/README.en.md @@ -0,0 +1,128 @@ +# Create Home component + +This tutorial lesson demonstrates how to create a new [component](guide/components) for your Angular app. + +<docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=OMVaw71EIa44yIOJ"/> + +## What you'll learn + +Your app has a new component: `Home`. + +## Conceptual preview of Angular components + +Angular apps are built around components, which are Angular's building blocks. +Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app. +In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components. + +In Angular, components have metadata that define its properties. +When you create your `Home`, you use these properties: + +- `selector`: to describe how Angular refers to the component in templates. +- `standalone`: to describe whether the component requires a `NgModule`. +- `imports`: to describe the component's dependencies. +- `template`: to describe the component's HTML markup and layout. +- `styleUrls`: to list the URLs of the CSS files that the component uses in an array. + +<docs-pill-row> + <docs-pill href="api/core/Component" title="Learn more about Components"/> +</docs-pill-row> + +<docs-workflow> + +<docs-step title="Create the `Home`"> +In this step, you create a new component for your app. + +In the **Terminal** pane of your IDE: + +1. In your project directory, navigate to the `first-app` directory. +1. Run this command to create a new `Home` + + ```shell + ng generate component home + ``` + +1. Run this command to build and serve your app. + + NOTE: This step is only for your local environment! + + ```shell + ng serve + ``` + +1. Open a browser and navigate to `http://localhost:4200` to find the application. + +1. Confirm that the app builds without error. + + HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet. + +1. Leave `ng serve` running as you complete the next steps. + </docs-step> + +<docs-step title="Add the new component to your app's layout"> +In this step, you add the new component, `Home` to your app's root component, `App`, so that it displays in your app's layout. + +In the **Edit** pane of your IDE: + +1. Open `app.ts` in the editor. +1. In `app.ts`, import `Home` by adding this line to the file level imports. + +<docs-code header="Import Home in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/> + +1. In `app.ts`, in `@Component`, update the `imports` array property and add `Home`. + +<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/> + +1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code. + +<docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/> + +1. Save your changes to `app.ts`. +1. If `ng serve` is running, the app should update. + If `ng serve` is not running, start it again. + _Hello world_ in your app should change to _home works!_ from the `Home`. +1. Check the running app in the browser and confirm that the app has been updated. + +<img alt="browser frame of page displaying the text 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png"> + +</docs-step> + +<docs-step title="Add features to `Home`"> + +In this step you add features to `Home`. + +In the previous step, you added the default `Home` to your app's template so its default HTML appeared in the app. +In this step, you add a search filter and button that is used in a later lesson. +For now, that's all that `Home` has. +Note that, this step just adds the search elements to the layout without any functionality, yet. + +In the **Edit** pane of your IDE: + +1. In the `first-app` directory, open `home.ts` in the editor. +1. In `home.ts`, in `@Component`, update the `template` property with this code. + +<docs-code language="angular-ts" header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/> + +1. Next, open `home.css` in the editor and update the content with these styles. + + NOTE: In the browser, these can go in `src/app/home/home.ts` in the `styles` array. + + <docs-code header="Replace in src/app/home/home.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/> + +1. Confirm that the app builds without error. + You should find the filter query box and button in your app and they should be styled. + Correct any errors before you continue to the next step. + +<img alt="browser frame of homes-app displaying logo, filter text input box and search button" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png"> +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you created a new component for your app and gave it a filter edit control and button. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="cli/generate/component" title="`ng generate component`"/> + <docs-pill href="api/core/Component" title="`Component` reference"/> + <docs-pill href="guide/components" title="Angular components overview"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md b/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md index 9af6c5e..1cbfe43 100644 --- a/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md @@ -1,128 +1,128 @@ -# Create Home component +# Crear el componente Home -This tutorial lesson demonstrates how to create a new [component](guide/components) for your Angular app. +Esta lección del tutorial demuestra cómo crear un nuevo [componente](guide/components) para tu aplicación Angular. <docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=OMVaw71EIa44yIOJ"/> -## What you'll learn +## ¿Qué aprenderás? -Your app has a new component: `Home`. +Tu aplicación tiene un nuevo componente: `Home`. -## Conceptual preview of Angular components +## Vista previa conceptual de los componentes de Angular -Angular apps are built around components, which are Angular's building blocks. -Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app. -In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components. +Las aplicaciones Angular se construyen alrededor de componentes, que son los bloques de construcción de Angular. +Los componentes contienen el código, el diseño HTML y la información de estilo CSS que proporcionan la función y apariencia de un elemento en la aplicación. +En Angular, los componentes pueden contener otros componentes. Las funciones y la apariencia de una aplicación se pueden dividir y particionar en componentes. -In Angular, components have metadata that define its properties. -When you create your `Home`, you use these properties: +En Angular, los componentes tienen metadatos que definen sus propiedades. +Cuando creas tu `Home`, usas estas propiedades: -- `selector`: to describe how Angular refers to the component in templates. -- `standalone`: to describe whether the component requires a `NgModule`. -- `imports`: to describe the component's dependencies. -- `template`: to describe the component's HTML markup and layout. -- `styleUrls`: to list the URLs of the CSS files that the component uses in an array. +- `selector`: para describir cómo Angular se refiere al componente en las plantillas. +- `standalone`: para describir si el componente requiere un `NgModule`. +- `imports`: para describir las dependencias del componente. +- `template`: para describir el marcado HTML y el diseño del componente. +- `styleUrls`: para listar las URLs de los archivos CSS que el componente usa en un arreglo. <docs-pill-row> - <docs-pill href="api/core/Component" title="Learn more about Components"/> + <docs-pill href="api/core/Component" title="Aprende más sobre Componentes"/> </docs-pill-row> <docs-workflow> -<docs-step title="Create the `Home`"> -In this step, you create a new component for your app. +<docs-step title="Crea el `Home`"> +En este paso, creas un nuevo componente para tu aplicación. -In the **Terminal** pane of your IDE: +En el panel de **Terminal** de tu IDE: -1. In your project directory, navigate to the `first-app` directory. -1. Run this command to create a new `Home` +1. En tu directorio del proyecto, navega al directorio `first-app`. +1. Ejecuta este comando para crear un nuevo `Home` ```shell ng generate component home ``` -1. Run this command to build and serve your app. +1. Ejecuta este comando para construir y servir tu aplicación. - NOTE: This step is only for your local environment! + NOTA: ¡Este paso es solo para tu entorno local! ```shell ng serve ``` -1. Open a browser and navigate to `http://localhost:4200` to find the application. +1. Abre un navegador y navega a `http://localhost:4200` para encontrar la aplicación. -1. Confirm that the app builds without error. +1. Confirma que la aplicación se construye sin errores. - HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet. + ÚTIL: Debería renderizar igual que en la lección anterior porque aunque agregaste un nuevo componente, aún no lo has incluido en ninguna de las plantillas de la aplicación. -1. Leave `ng serve` running as you complete the next steps. +1. Deja `ng serve` ejecutándose mientras completas los siguientes pasos. </docs-step> -<docs-step title="Add the new component to your app's layout"> -In this step, you add the new component, `Home` to your app's root component, `App`, so that it displays in your app's layout. +<docs-step title="Agrega el nuevo componente al diseño de tu aplicación"> +En este paso, agregas el nuevo componente `Home` al componente raíz de tu aplicación, `App`, para que se muestre en el diseño de tu aplicación. -In the **Edit** pane of your IDE: +En el panel de **Edición** de tu IDE: -1. Open `app.ts` in the editor. -1. In `app.ts`, import `Home` by adding this line to the file level imports. +1. Abre `app.ts` en el editor. +1. En `app.ts`, importa `Home` agregando esta línea a las importaciones a nivel de archivo. -<docs-code header="Import Home in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/> +<docs-code header="Importar Home en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/> -1. In `app.ts`, in `@Component`, update the `imports` array property and add `Home`. +1. En `app.ts`, en `@Component`, actualiza la propiedad del arreglo `imports` y agrega `Home`. -<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/> +<docs-code header="Reemplazar en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/> -1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code. +1. En `app.ts`, en `@Component`, actualiza la propiedad `template` para incluir el siguiente código HTML. -<docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/> +<docs-code language="angular-ts" header="Reemplazar en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/> -1. Save your changes to `app.ts`. -1. If `ng serve` is running, the app should update. - If `ng serve` is not running, start it again. - _Hello world_ in your app should change to _home works!_ from the `Home`. -1. Check the running app in the browser and confirm that the app has been updated. +1. Guarda tus cambios en `app.ts`. +1. Si `ng serve` se está ejecutando, la aplicación debería actualizarse. + Si `ng serve` no se está ejecutando, inícialo nuevamente. + _Hello world_ en tu aplicación debería cambiar a _home works!_ desde `Home`. +1. Verifica la aplicación en ejecución en el navegador y confirma que la aplicación se haya actualizado. -<img alt="browser frame of page displaying the text 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png"> +<img alt="marco del navegador mostrando el texto 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png"> </docs-step> -<docs-step title="Add features to `Home`"> +<docs-step title="Agrega funcionalidades a `Home`"> -In this step you add features to `Home`. +En este paso agregas funcionalidades a `Home`. -In the previous step, you added the default `Home` to your app's template so its default HTML appeared in the app. -In this step, you add a search filter and button that is used in a later lesson. -For now, that's all that `Home` has. -Note that, this step just adds the search elements to the layout without any functionality, yet. +En el paso anterior, agregaste el `Home` predeterminado a la plantilla de tu aplicación para que su HTML predeterminado apareciera en la aplicación. +En este paso, agregas un filtro de búsqueda y un botón que se usará en una lección posterior. +Por ahora, eso es todo lo que tiene `Home`. +Ten en cuenta que este paso solo agrega los elementos de búsqueda al diseño sin ninguna funcionalidad, todavía. -In the **Edit** pane of your IDE: +En el panel de **Edición** de tu IDE: -1. In the `first-app` directory, open `home.ts` in the editor. -1. In `home.ts`, in `@Component`, update the `template` property with this code. +1. En el directorio `first-app`, abre `home.ts` en el editor. +1. En `home.ts`, en `@Component`, actualiza la propiedad `template` con este código. -<docs-code language="angular-ts" header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/> +<docs-code language="angular-ts" header="Reemplazar en src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/> -1. Next, open `home.css` in the editor and update the content with these styles. +1. A continuación, abre `home.css` en el editor y actualiza el contenido con estos estilos. - NOTE: In the browser, these can go in `src/app/home/home.ts` in the `styles` array. + NOTA: En el navegador, estos pueden ir en `src/app/home/home.ts` en el arreglo `styles`. - <docs-code header="Replace in src/app/home/home.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/> + <docs-code header="Reemplazar en src/app/home/home.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/> -1. Confirm that the app builds without error. - You should find the filter query box and button in your app and they should be styled. - Correct any errors before you continue to the next step. +1. Confirma que la aplicación se construye sin errores. + Deberías encontrar el cuadro de consulta de filtro y el botón en tu aplicación y deberían tener estilo. + Corrige cualquier error antes de continuar al siguiente paso. -<img alt="browser frame of homes-app displaying logo, filter text input box and search button" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png"> +<img alt="marco del navegador de la aplicación de viviendas mostrando logo, cuadro de entrada de texto de filtro y botón de búsqueda" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png"> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you created a new component for your app and gave it a filter edit control and button. +RESUMEN: En esta lección, creaste un nuevo componente para tu aplicación y le diste un control de edición de filtro y un botón. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> <docs-pill href="cli/generate/component" title="`ng generate component`"/> - <docs-pill href="api/core/Component" title="`Component` reference"/> - <docs-pill href="guide/components" title="Angular components overview"/> + <docs-pill href="api/core/Component" title="Referencia de `Component`"/> + <docs-pill href="guide/components" title="Descripción general de componentes de Angular"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.en.md b/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.en.md new file mode 100644 index 0000000..d3c3ba6 --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.en.md @@ -0,0 +1,79 @@ +# Create the application’s HousingLocation component + +This tutorial lesson demonstrates how to add the `HousingLocation` component to your Angular app. + +<docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=U4ONEbPvtptdUHTt&start=440"/> + +## What you'll learn + +- Your app has a new component: `HousingLocation` and it displays a message confirming that the component was added to your application. + +<docs-workflow> + +<docs-step title="Create the `HousingLocation`"> +In this step, you create a new component for your app. + +In the **Terminal** pane of your IDE: + +1. In your project directory, navigate to the `first-app` directory. + +1. Run this command to create a new `HousingLocation` + + ```shell + ng generate component housingLocation + ``` + +1. Run this command to build and serve your app. + + ```shell + ng serve + ``` + + NOTE: This step is only for your local environment! + +1. Open a browser and navigate to `http://localhost:4200` to find the application. +1. Confirm that the app builds without error. + + HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet. + +1. Leave `ng serve` running as you complete the next steps. + </docs-step> + +<docs-step title="Add the new component to your app's layout"> +In this step, you add the new component, `HousingLocation` to your app's `Home`, so that it displays in your app's layout. + +In the **Edit** pane of your IDE: + +1. Open `home.ts` in the editor. +1. In `home.ts`, import `HousingLocation` by adding this line to the file level imports. + +<docs-code header="Import HousingLocation in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[2]"/> + +1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocation` to the array. + +<docs-code header="Add HousingLocation to imports array in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/> + +1. Now the component is ready for use in the template for the `Home`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag. + +<docs-code language="angular-ts" header="Add housing location to the component template in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/> + +</docs-step> + +<docs-step title="Add the styles for the component"> +In this step, you will copy over the pre-written styles for the `HousingLocation` to your app so that the app renders properly. + +1. Open `src/app/housing-location/housing-location.css`, and paste the styles below into the file: + + NOTE: In the browser, these can go in `src/app/housing-location/housing-location.ts` in the `styles` array. + + <docs-code header="Add CSS styles to housing location to the component in src/app/housing-location/housing-location.css" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.css"/> + +1. Save your code, return to the browser and confirm that the app builds without error. You should find the message "housing-location works!" rendered to the screen.Correct any errors before you continue to the next step. + +<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png"> + +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you created a new component for your app and added it to the app's layout. diff --git a/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md b/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md index d3c3ba6..a45d019 100644 --- a/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md @@ -1,79 +1,79 @@ -# Create the application’s HousingLocation component +# Crear el componente HousingLocation de la aplicación -This tutorial lesson demonstrates how to add the `HousingLocation` component to your Angular app. +Esta lección del tutorial demuestra cómo agregar el componente `HousingLocation` a tu aplicación Angular. <docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=U4ONEbPvtptdUHTt&start=440"/> -## What you'll learn +## ¿Qué aprenderás? -- Your app has a new component: `HousingLocation` and it displays a message confirming that the component was added to your application. +- Tu aplicación tiene un nuevo componente: `HousingLocation` y muestra un mensaje que confirma que el componente fue agregado a tu aplicación. <docs-workflow> -<docs-step title="Create the `HousingLocation`"> -In this step, you create a new component for your app. +<docs-step title="Crea el `HousingLocation`"> +En este paso, creas un nuevo componente para tu aplicación. -In the **Terminal** pane of your IDE: +En el panel de **Terminal** de tu IDE: -1. In your project directory, navigate to the `first-app` directory. +1. En tu directorio del proyecto, navega al directorio `first-app`. -1. Run this command to create a new `HousingLocation` +1. Ejecuta este comando para crear un nuevo `HousingLocation` ```shell ng generate component housingLocation ``` -1. Run this command to build and serve your app. +1. Ejecuta este comando para construir y servir tu aplicación. ```shell ng serve ``` - NOTE: This step is only for your local environment! + NOTA: ¡Este paso es solo para tu entorno local! -1. Open a browser and navigate to `http://localhost:4200` to find the application. -1. Confirm that the app builds without error. +1. Abre un navegador y navega a `http://localhost:4200` para encontrar la aplicación. +1. Confirma que la aplicación se construye sin errores. - HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet. + ÚTIL: Debería renderizar igual que en la lección anterior porque aunque agregaste un nuevo componente, aún no lo has incluido en ninguna de las plantillas de la aplicación. -1. Leave `ng serve` running as you complete the next steps. +1. Deja `ng serve` ejecutándose mientras completas los siguientes pasos. </docs-step> -<docs-step title="Add the new component to your app's layout"> -In this step, you add the new component, `HousingLocation` to your app's `Home`, so that it displays in your app's layout. +<docs-step title="Agrega el nuevo componente al diseño de tu aplicación"> +En este paso, agregas el nuevo componente `HousingLocation` al `Home` de tu aplicación, para que se muestre en el diseño de tu aplicación. -In the **Edit** pane of your IDE: +En el panel de **Edición** de tu IDE: -1. Open `home.ts` in the editor. -1. In `home.ts`, import `HousingLocation` by adding this line to the file level imports. +1. Abre `home.ts` en el editor. +1. En `home.ts`, importa `HousingLocation` agregando esta línea a las importaciones a nivel de archivo. -<docs-code header="Import HousingLocation in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[2]"/> +<docs-code header="Importar HousingLocation en src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[2]"/> -1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocation` to the array. +1. A continuación, actualiza la propiedad `imports` de los metadatos de `@Component` agregando `HousingLocation` al arreglo. -<docs-code header="Add HousingLocation to imports array in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/> +<docs-code header="Agregar HousingLocation al arreglo imports en src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/> -1. Now the component is ready for use in the template for the `Home`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag. +1. Ahora el componente está listo para usarse en la plantilla de `Home`. Actualiza la propiedad `template` de los metadatos de `@Component` para incluir una referencia a la etiqueta `<app-housing-location>`. -<docs-code language="angular-ts" header="Add housing location to the component template in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/> +<docs-code language="angular-ts" header="Agregar housing location a la plantilla del componente en src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/> </docs-step> -<docs-step title="Add the styles for the component"> -In this step, you will copy over the pre-written styles for the `HousingLocation` to your app so that the app renders properly. +<docs-step title="Agrega los estilos para el componente"> +En este paso, copiarás los estilos preescritos para `HousingLocation` a tu aplicación para que la aplicación se renderice correctamente. -1. Open `src/app/housing-location/housing-location.css`, and paste the styles below into the file: +1. Abre `src/app/housing-location/housing-location.css` y pega los siguientes estilos en el archivo: - NOTE: In the browser, these can go in `src/app/housing-location/housing-location.ts` in the `styles` array. + NOTA: En el navegador, estos pueden ir en `src/app/housing-location/housing-location.ts` en el arreglo `styles`. - <docs-code header="Add CSS styles to housing location to the component in src/app/housing-location/housing-location.css" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.css"/> + <docs-code header="Agregar estilos CSS al componente housing location en src/app/housing-location/housing-location.css" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.css"/> -1. Save your code, return to the browser and confirm that the app builds without error. You should find the message "housing-location works!" rendered to the screen.Correct any errors before you continue to the next step. +1. Guarda tu código, vuelve al navegador y confirma que la aplicación se construye sin errores. Deberías encontrar el mensaje "housing-location works!" renderizado en la pantalla. Corrige cualquier error antes de continuar al siguiente paso. -<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png"> +<img alt="marco del navegador de la aplicación de viviendas mostrando logo, cuadro de entrada de texto de filtro, botón de búsqueda y el mensaje 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png"> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you created a new component for your app and added it to the app's layout. +RESUMEN: En esta lección, creaste un nuevo componente para tu aplicación y lo agregaste al diseño de la aplicación. diff --git a/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.en.md b/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.en.md new file mode 100644 index 0000000..5d9f396 --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.en.md @@ -0,0 +1,99 @@ +# Creating an interface + +This tutorial lesson demonstrates how to create an interface and include it in a component of your app. + +<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=YkFSeUeV8Ixtz8pm"/> + +## What you'll learn + +- Your app has a new interface that it can use as a data type. +- Your app has an instance of the new interface with sample data. + +## Conceptual preview of interfaces + +[Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) are custom data types for your app. + +Angular uses TypeScript to take advantage of working in a strongly typed programming environment. +Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another. +Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE. + +In this lesson, you'll create an interface to define properties that represent data about a single housing location. + +<docs-workflow> + +<docs-step title="Create a new Angular interface"> +This step creates a new interface in your app. + +In the **Terminal** pane of your IDE: + +1. In your project directory, navigate to the `first-app` directory. +1. In the `first-app` directory, run this command to create the new interface. + + ```shell + + ng generate interface housinglocation + + ``` + +1. Run `ng serve` to build the app and serve it to `http://localhost:4200`. +1. In a browser, open `http://localhost:4200` to see your app. +1. Confirm that the app builds without error. + Correct any errors before you continue to the next step. + </docs-step> + +<docs-step title="Add properties to the new interface"> +This step adds the properties to the interface that your app needs to represent a housing location. + +1. In the **Terminal** pane of your IDE, start the `ng serve` command, if it isn't already running, to build the app and serve it to `http://localhost:4200`. +1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file. +1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example. + +<docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" /> + +1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step. + +At this point, you've defined an interface that represents data about a housing location including an `id`, `name`, and location information. +</docs-step> + +<docs-step title="Create a test house for your app"> +You have an interface, but you aren't using it yet. + +In this step, you create an instance of the interface and assign some sample data to it. +You won't see this sample data appear in your app yet. +There are a few more lessons to complete before that happens. + +1. In the **Terminal** pane of your IDE, run the `ng serve` command, if it isn't already running, to build the app and serve your app to `http://localhost:4200`. +1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`. +1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface. + +<docs-code language="angular-ts" header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/> + +1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component. + +<docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/> + +1. Confirm that your `home.ts` file matches this example. + + <docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" /> + + By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors. + +1. Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!" + +<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png"> + +1. Correct any errors before you continue to the next step. + </docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you created an interface that created a new data type for your app. +This new data type makes it possible for you to specify where `HousingLocation` data is required. +This new data type also makes it possible for your IDE and the TypeScript compiler can ensure that `HousingLocation` data is used where it's required. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="cli/generate/interface" title="ng generate interface"/> + <docs-pill href="cli/generate" title="ng generate"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md b/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md index 5d9f396..743c868 100644 --- a/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md @@ -1,33 +1,33 @@ -# Creating an interface +# Creando una interfaz -This tutorial lesson demonstrates how to create an interface and include it in a component of your app. +Esta lección del tutorial demuestra cómo crear una interfaz e incluirla en un componente de tu aplicación. <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=YkFSeUeV8Ixtz8pm"/> -## What you'll learn +## ¿Qué aprenderás? -- Your app has a new interface that it can use as a data type. -- Your app has an instance of the new interface with sample data. +- Tu aplicación tiene una nueva interfaz que puede usar como tipo de dato. +- Tu aplicación tiene una instancia de la nueva interfaz con datos de ejemplo. -## Conceptual preview of interfaces +## Vista previa conceptual de interfaces -[Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) are custom data types for your app. +Las [interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) son tipos de datos personalizados para tu aplicación. -Angular uses TypeScript to take advantage of working in a strongly typed programming environment. -Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another. -Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE. +Angular usa TypeScript para aprovechar el trabajo en un entorno de programación fuertemente tipado. +La comprobación estricta de tipos reduce la probabilidad de que un elemento en tu aplicación envíe datos con formato incorrecto a otro. +Dichos errores de desajuste de tipo son detectados por el compilador de TypeScript y muchos de esos errores también pueden detectarse en tu IDE. -In this lesson, you'll create an interface to define properties that represent data about a single housing location. +En esta lección, crearás una interfaz para definir propiedades que representan datos sobre una ubicación de vivienda. <docs-workflow> -<docs-step title="Create a new Angular interface"> -This step creates a new interface in your app. +<docs-step title="Crea una nueva interfaz de Angular"> +Este paso crea una nueva interfaz en tu aplicación. -In the **Terminal** pane of your IDE: +En el panel de **Terminal** de tu IDE: -1. In your project directory, navigate to the `first-app` directory. -1. In the `first-app` directory, run this command to create the new interface. +1. En tu directorio del proyecto, navega al directorio `first-app`. +1. En el directorio `first-app`, ejecuta este comando para crear la nueva interfaz. ```shell @@ -35,63 +35,63 @@ In the **Terminal** pane of your IDE: ``` -1. Run `ng serve` to build the app and serve it to `http://localhost:4200`. -1. In a browser, open `http://localhost:4200` to see your app. -1. Confirm that the app builds without error. - Correct any errors before you continue to the next step. +1. Ejecuta `ng serve` para construir la aplicación y servirla en `http://localhost:4200`. +1. En un navegador, abre `http://localhost:4200` para ver tu aplicación. +1. Confirma que la aplicación se construye sin errores. + Corrige cualquier error antes de continuar al siguiente paso. </docs-step> -<docs-step title="Add properties to the new interface"> -This step adds the properties to the interface that your app needs to represent a housing location. +<docs-step title="Agrega propiedades a la nueva interfaz"> +Este paso agrega las propiedades a la interfaz que tu aplicación necesita para representar una ubicación de vivienda. -1. In the **Terminal** pane of your IDE, start the `ng serve` command, if it isn't already running, to build the app and serve it to `http://localhost:4200`. -1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file. -1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example. +1. En el panel de **Terminal** de tu IDE, inicia el comando `ng serve`, si aún no se está ejecutando, para construir la aplicación y servirla en `http://localhost:4200`. +1. En el panel de **Edición** de tu IDE, abre el archivo `src/app/housinglocation.ts`. +1. En `housinglocation.ts`, reemplaza el contenido predeterminado con el siguiente código para que tu nueva interfaz coincida con este ejemplo. -<docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" /> +<docs-code header="Actualizar src/app/housinglocation.ts para que coincida con este código" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" /> -1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step. +1. Guarda tus cambios y confirma que la aplicación no muestre errores. Corrige cualquier error antes de continuar al siguiente paso. -At this point, you've defined an interface that represents data about a housing location including an `id`, `name`, and location information. +En este punto, has definido una interfaz que representa datos sobre una ubicación de vivienda, incluyendo un `id`, `name` e información de ubicación. </docs-step> -<docs-step title="Create a test house for your app"> -You have an interface, but you aren't using it yet. +<docs-step title="Crea una casa de prueba para tu aplicación"> +Tienes una interfaz, pero aún no la estás usando. -In this step, you create an instance of the interface and assign some sample data to it. -You won't see this sample data appear in your app yet. -There are a few more lessons to complete before that happens. +En este paso, creas una instancia de la interfaz y le asignas algunos datos de ejemplo. +No verás estos datos de ejemplo aparecer en tu aplicación todavía. +Quedan algunas lecciones más por completar antes de que eso suceda. -1. In the **Terminal** pane of your IDE, run the `ng serve` command, if it isn't already running, to build the app and serve your app to `http://localhost:4200`. -1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`. -1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface. +1. En el panel de **Terminal** de tu IDE, ejecuta el comando `ng serve`, si aún no se está ejecutando, para construir la aplicación y servir tu aplicación en `http://localhost:4200`. +1. En el panel de **Edición** de tu IDE, abre `src/app/home/home.ts`. +1. En `src/app/home/home.ts`, agrega esta declaración de importación después de las declaraciones `import` existentes para que `Home` pueda usar la nueva interfaz. -<docs-code language="angular-ts" header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/> +<docs-code language="angular-ts" header="Importar Home en src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/> -1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component. +1. En `src/app/home/home.ts`, reemplaza la definición vacía `export class Home {}` con este código para crear una única instancia de la nueva interfaz en el componente. -<docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/> +<docs-code language="angular-ts" header="Agregar datos de ejemplo a src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/> -1. Confirm that your `home.ts` file matches this example. +1. Confirma que tu archivo `home.ts` coincide con este ejemplo. <docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" /> - By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors. + Al agregar la propiedad `housingLocation` de tipo `HousingLocation` a la clase `Home`, podemos confirmar que los datos coinciden con la descripción de la interfaz. Si los datos no satisficieran la descripción de la interfaz, el IDE tiene suficiente información para darnos errores útiles. -1. Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!" +1. Guarda tus cambios y confirma que la aplicación no tenga errores. Abre el navegador y confirma que tu aplicación aún muestra el mensaje "housing-location works!" -<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png"> +<img alt="marco del navegador de la aplicación de viviendas mostrando logo, cuadro de entrada de texto de filtro, botón de búsqueda y el mensaje 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png"> -1. Correct any errors before you continue to the next step. +1. Corrige cualquier error antes de continuar al siguiente paso. </docs-step> </docs-workflow> -SUMMARY: In this lesson, you created an interface that created a new data type for your app. -This new data type makes it possible for you to specify where `HousingLocation` data is required. -This new data type also makes it possible for your IDE and the TypeScript compiler can ensure that `HousingLocation` data is used where it's required. +RESUMEN: En esta lección, creaste una interfaz que creó un nuevo tipo de dato para tu aplicación. +Este nuevo tipo de dato hace posible que especifiques dónde se requieren datos de `HousingLocation`. +Este nuevo tipo de dato también hace posible que tu IDE y el compilador TypeScript aseguren que los datos de `HousingLocation` se usen donde se requieren. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> <docs-pill href="cli/generate/interface" title="ng generate interface"/> diff --git a/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.en.md b/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.en.md new file mode 100644 index 0000000..df1d409 --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.en.md @@ -0,0 +1,53 @@ +# Add an input parameter to the component + +This tutorial lesson demonstrates how to create a component `input` and use it to pass data to a component for customization. + +<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=WvRGFSkW_7_zDIFD&start=241"/> + +NOTE: This video reflects an older syntax, but the main concepts remain valid. + +## What you'll learn + +Your app's `HousingLocation` template has a `HousingLocation` property to receive input. + +## Conceptual preview of Inputs + +[Inputs](api/core/input) allow components to specify data that can be passed to it from a parent component. + +In this lesson, you'll define an `input` property in the `HousingLocation` component that enables you to customize the data displayed in the component. + +Learn more in the [Accepting data with input properties](guide/components/inputs) and [Custom events with outputs](guide/components/outputs) guides. + +<docs-workflow> + +<docs-step title="Import the input() function"> +In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component. + +<docs-code header="Import input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/> + +</docs-step> + +<docs-step title="Add the Input property"> +Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`. + + <docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/> + +You have to invoke the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template. + +</docs-step> + +<docs-step title="Pass data to the input"> +Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component. + +<docs-code language="angular-ts" header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/> + +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you created a new `input` property. You also used the `.required` method to ensure the signal value is always defined. + +<docs-pill-row> + <docs-pill href="guide/components/inputs" title="Accepting data with input properties"/> + <docs-pill href="guide/components/outputs" title="Custom events with outputs"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md b/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md index df1d409..372f684 100644 --- a/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md @@ -1,53 +1,53 @@ -# Add an input parameter to the component +# Agregar un parámetro input al componente -This tutorial lesson demonstrates how to create a component `input` and use it to pass data to a component for customization. +Esta lección del tutorial demuestra cómo crear un `input` de componente y usarlo para pasar datos a un componente para personalización. <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=WvRGFSkW_7_zDIFD&start=241"/> -NOTE: This video reflects an older syntax, but the main concepts remain valid. +NOTA: Este video refleja una sintaxis anterior, pero los conceptos principales siguen siendo válidos. -## What you'll learn +## ¿Qué aprenderás? -Your app's `HousingLocation` template has a `HousingLocation` property to receive input. +La plantilla de `HousingLocation` de tu aplicación tiene una propiedad `HousingLocation` para recibir input. -## Conceptual preview of Inputs +## Vista previa conceptual de Inputs -[Inputs](api/core/input) allow components to specify data that can be passed to it from a parent component. +Los [Inputs](api/core/input) permiten a los componentes especificar datos que pueden pasarse desde un componente padre. -In this lesson, you'll define an `input` property in the `HousingLocation` component that enables you to customize the data displayed in the component. +En esta lección, definirás una propiedad `input` en el componente `HousingLocation` que te permite personalizar los datos mostrados en el componente. -Learn more in the [Accepting data with input properties](guide/components/inputs) and [Custom events with outputs](guide/components/outputs) guides. +Aprende más en las guías [Aceptando datos con propiedades input](guide/components/inputs) y [Eventos personalizados con outputs](guide/components/outputs). <docs-workflow> -<docs-step title="Import the input() function"> -In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component. +<docs-step title="Importa la función input()"> +En el editor de código, importa el método auxiliar `input` desde `@angular/core` en el componente `HousingLocation`. -<docs-code header="Import input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/> +<docs-code header="Importar input en housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/> </docs-step> -<docs-step title="Add the Input property"> -Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`. +<docs-step title="Agrega la propiedad Input"> +Agrega una propiedad requerida llamada `housingLocation` e inicialízala usando `input.required()` con el tipo `HousingLocationInfo`. - <docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/> + <docs-code header="Declarar la propiedad input en housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/> -You have to invoke the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template. +Tienes que invocar el método `required` en `input` para indicar que el componente padre debe proporcionar un valor. En nuestra aplicación de ejemplo, sabemos que este valor siempre se pasará — esto es por diseño. La llamada `.required()` asegura que el compilador TypeScript lo aplique y trate la propiedad como no anulable cuando este componente se usa en una plantilla. </docs-step> -<docs-step title="Pass data to the input"> -Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component. +<docs-step title="Pasa datos al input"> +Envía el valor de `housingLocation` desde el componente `Home` a la propiedad `housingLocation` del componente HousingLocation. -<docs-code language="angular-ts" header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/> +<docs-code language="angular-ts" header="Declarar la propiedad input para HousingLocation en home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you created a new `input` property. You also used the `.required` method to ensure the signal value is always defined. +RESUMEN: En esta lección, creaste una nueva propiedad `input`. También usaste el método `.required` para asegurar que el valor del signal esté siempre definido. <docs-pill-row> - <docs-pill href="guide/components/inputs" title="Accepting data with input properties"/> - <docs-pill href="guide/components/outputs" title="Custom events with outputs"/> + <docs-pill href="guide/components/inputs" title="Aceptando datos con propiedades input"/> + <docs-pill href="guide/components/outputs" title="Eventos personalizados con outputs"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.en.md b/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.en.md new file mode 100644 index 0000000..0bf9b0a --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.en.md @@ -0,0 +1,50 @@ +# Add a property binding to a component’s template + +This tutorial lesson demonstrates how to add property binding to a template and use it to pass dynamic data to components. + +<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=AsiczpWnMz5HhJqB&start=599"/> + +## What you'll learn + +- Your app has data bindings in the `Home` template. +- Your app sends data from the `Home` to the `HousingLocation`. + +## Conceptual preview of Inputs + +In this lesson, you'll continue the process of sharing data from the parent component to the child component by binding data to those properties in the template using property binding. + +Property binding enables you to connect a variable to an `Input` in an Angular template. The data is then dynamically bound to the `Input`. + +For a more in depth explanation, please refer to the [Property binding](guide/templates/property-binding) guide. + +<docs-workflow> + +<docs-step title="Update the `Home` template"> +This step adds property binding to the `<app-housing-location>` tag. + +In the code editor: + +1. Navigate to `src/app/home/home.ts` +1. In the template property of the `@Component` decorator, update the code to match the code below: + <docs-code language="angular-ts" header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[15,17]"/> + + When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value. + + The value on the right-hand side is the name of the property from the `Home`. + + </docs-step> + +<docs-step title="Confirm the code still works"> +1. Save your changes and confirm the app does not have any errors. +1. Correct any errors before you continue to the next step. +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you added a new property binding and passed in a reference to a class property. Now, the `HousingLocation` has access to data that it can use to customize the component's display. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="/guide/templates/property-binding" title="Property binding"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md b/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md index 0bf9b0a..c62876f 100644 --- a/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md @@ -1,50 +1,50 @@ -# Add a property binding to a component’s template +# Agregar un enlace de propiedad a la plantilla de un componente -This tutorial lesson demonstrates how to add property binding to a template and use it to pass dynamic data to components. +Esta lección del tutorial demuestra cómo agregar enlace de propiedad a una plantilla y usarlo para pasar datos dinámicos a componentes. <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=AsiczpWnMz5HhJqB&start=599"/> -## What you'll learn +## ¿Qué aprenderás? -- Your app has data bindings in the `Home` template. -- Your app sends data from the `Home` to the `HousingLocation`. +- Tu aplicación tiene enlaces de datos en la plantilla de `Home`. +- Tu aplicación envía datos desde `Home` a `HousingLocation`. -## Conceptual preview of Inputs +## Vista previa conceptual de Inputs -In this lesson, you'll continue the process of sharing data from the parent component to the child component by binding data to those properties in the template using property binding. +En esta lección, continuarás el proceso de compartir datos desde el componente padre al componente hijo vinculando datos a esas propiedades en la plantilla usando enlace de propiedad. -Property binding enables you to connect a variable to an `Input` in an Angular template. The data is then dynamically bound to the `Input`. +El enlace de propiedad te permite conectar una variable a un `Input` en una plantilla Angular. Los datos se vinculan dinámicamente al `Input`. -For a more in depth explanation, please refer to the [Property binding](guide/templates/property-binding) guide. +Para una explicación más detallada, consulta la guía de [Enlace de propiedad](guide/templates/property-binding). <docs-workflow> -<docs-step title="Update the `Home` template"> -This step adds property binding to the `<app-housing-location>` tag. +<docs-step title="Actualiza la plantilla de `Home`"> +Este paso agrega enlace de propiedad a la etiqueta `<app-housing-location>`. -In the code editor: +En el editor de código: -1. Navigate to `src/app/home/home.ts` -1. In the template property of the `@Component` decorator, update the code to match the code below: - <docs-code language="angular-ts" header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[15,17]"/> +1. Navega a `src/app/home/home.ts` +1. En la propiedad template del decorador `@Component`, actualiza el código para que coincida con el código a continuación: + <docs-code language="angular-ts" header="Agregar enlace de propiedad housingLocation" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[15,17]"/> - When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value. + Al agregar un enlace de propiedad a una etiqueta de componente, usamos la sintaxis `[atributo] = "valor"` para notificar a Angular que el valor asignado debe tratarse como una propiedad de la clase del componente y no como un valor string. - The value on the right-hand side is the name of the property from the `Home`. + El valor en el lado derecho es el nombre de la propiedad de `Home`. </docs-step> -<docs-step title="Confirm the code still works"> -1. Save your changes and confirm the app does not have any errors. -1. Correct any errors before you continue to the next step. +<docs-step title="Confirma que el código aún funciona"> +1. Guarda tus cambios y confirma que la aplicación no tenga errores. +1. Corrige cualquier error antes de continuar al siguiente paso. </docs-step> </docs-workflow> -SUMMARY: In this lesson, you added a new property binding and passed in a reference to a class property. Now, the `HousingLocation` has access to data that it can use to customize the component's display. +RESUMEN: En esta lección, agregaste un nuevo enlace de propiedad y pasaste una referencia a una propiedad de clase. Ahora, `HousingLocation` tiene acceso a datos que puede usar para personalizar la visualización del componente. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="/guide/templates/property-binding" title="Property binding"/> + <docs-pill href="/guide/templates/property-binding" title="Enlace de propiedad"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.en.md b/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.en.md new file mode 100644 index 0000000..a1654ec --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.en.md @@ -0,0 +1,60 @@ +# Add an interpolation to a component’s template + +This tutorial lesson demonstrates how to add interpolation to Angular templates in order to display dynamic data in a template. + +<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=IFAly3Ss8dwqFx8N&start=338"/> + +## What you'll learn + +- Your app will display interpolated values in the `HousingLocation` template. +- Your app will render a housing location data to the browser. + +## Conceptual preview of interpolation + +In this step you will display values read from `input` properties in a template using interpolation. + +Using the `{{ expression }}` in Angular templates, you can render values from properties, `inputs`, and valid JavaScript expressions. + +For a more in depth explanation, please refer to the [Displaying values with interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation) guide. + +<docs-workflow> + +<docs-step title="Update `HousingLocation` template to include interpolated values"> +This step adds new HTML structure and interpolated values in the `HousingLocation` template. + +In the code editor: + +1. Navigate to `src/app/housing-location/housing-location.ts` +1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code: + +<docs-code language="angular-ts" header="Update HousingLocation template in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/> + +In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image. + +You use interpolation to include the values for `name`, `city` and `state` of the `housingLocation` property. + +</docs-step> + +<docs-step title="Confirm the changes render in the browser"> +1. Save all changes. +1. Open the browser and confirm that the app renders the photo, city and state sample data. + <img alt="browser frame of homes-app displaying logo, filter text input box, search button and the same housing location UI card" src="assets/images/tutorials/first-app/homes-app-lesson-07-step-2.png"> +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you added a new HTML structure and used Angular template syntax to render values in the `HousingLocation` template. + +Now, you have two important skills: + +- passing data to components +- Interpolating values into a template + +With these skills, your app can now share data and display dynamic values in the browser. Great work so far. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/templates" title="Template syntax"/> + <docs-pill href="guide/templates/binding#render-dynamic-text-with-text-interpolation" title="Displaying values with interpolation"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md b/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md index a1654ec..0199862 100644 --- a/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md @@ -1,60 +1,60 @@ -# Add an interpolation to a component’s template +# Agregar interpolación a la plantilla de un componente -This tutorial lesson demonstrates how to add interpolation to Angular templates in order to display dynamic data in a template. +Esta lección del tutorial demuestra cómo agregar interpolación a las plantillas Angular para mostrar datos dinámicos en una plantilla. <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=IFAly3Ss8dwqFx8N&start=338"/> -## What you'll learn +## ¿Qué aprenderás? -- Your app will display interpolated values in the `HousingLocation` template. -- Your app will render a housing location data to the browser. +- Tu aplicación mostrará valores interpolados en la plantilla de `HousingLocation`. +- Tu aplicación renderizará datos de una ubicación de vivienda en el navegador. -## Conceptual preview of interpolation +## Vista previa conceptual de interpolación -In this step you will display values read from `input` properties in a template using interpolation. +En este paso mostrarás valores leídos de propiedades `input` en una plantilla usando interpolación. -Using the `{{ expression }}` in Angular templates, you can render values from properties, `inputs`, and valid JavaScript expressions. +Usando `{{ expresión }}` en las plantillas Angular, puedes renderizar valores de propiedades, `inputs` y expresiones JavaScript válidas. -For a more in depth explanation, please refer to the [Displaying values with interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation) guide. +Para una explicación más detallada, consulta la guía de [Mostrando valores con interpolación](guide/templates/binding#render-dynamic-text-with-text-interpolation). <docs-workflow> -<docs-step title="Update `HousingLocation` template to include interpolated values"> -This step adds new HTML structure and interpolated values in the `HousingLocation` template. +<docs-step title="Actualiza la plantilla de `HousingLocation` para incluir valores interpolados"> +Este paso agrega nueva estructura HTML y valores interpolados en la plantilla de `HousingLocation`. -In the code editor: +En el editor de código: -1. Navigate to `src/app/housing-location/housing-location.ts` -1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code: +1. Navega a `src/app/housing-location/housing-location.ts` +1. En la propiedad template del decorador `@Component`, reemplaza el marcado HTML existente con el siguiente código: -<docs-code language="angular-ts" header="Update HousingLocation template in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/> +<docs-code language="angular-ts" header="Actualizar plantilla de HousingLocation en housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/> -In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image. +En este código de plantilla actualizado has usado enlace de propiedad para vincular `housingLocation.photo` al atributo `src`. El atributo `alt` usa interpolación para dar más contexto al texto alternativo de la imagen. -You use interpolation to include the values for `name`, `city` and `state` of the `housingLocation` property. +Usas interpolación para incluir los valores de `name`, `city` y `state` de la propiedad `housingLocation`. </docs-step> -<docs-step title="Confirm the changes render in the browser"> -1. Save all changes. -1. Open the browser and confirm that the app renders the photo, city and state sample data. - <img alt="browser frame of homes-app displaying logo, filter text input box, search button and the same housing location UI card" src="assets/images/tutorials/first-app/homes-app-lesson-07-step-2.png"> +<docs-step title="Confirma que los cambios se renderizan en el navegador"> +1. Guarda todos los cambios. +1. Abre el navegador y confirma que la aplicación renderiza la foto, la ciudad y el estado de los datos de ejemplo. + <img alt="marco del navegador de la aplicación de viviendas mostrando logo, cuadro de entrada de texto de filtro, botón de búsqueda y la misma tarjeta de UI de ubicación de vivienda" src="assets/images/tutorials/first-app/homes-app-lesson-07-step-2.png"> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you added a new HTML structure and used Angular template syntax to render values in the `HousingLocation` template. +RESUMEN: En esta lección, agregaste una nueva estructura HTML y usaste la sintaxis de plantillas Angular para renderizar valores en la plantilla de `HousingLocation`. -Now, you have two important skills: +Ahora, tienes dos habilidades importantes: -- passing data to components -- Interpolating values into a template +- pasar datos a componentes +- interpolar valores en una plantilla -With these skills, your app can now share data and display dynamic values in the browser. Great work so far. +Con estas habilidades, tu aplicación ahora puede compartir datos y mostrar valores dinámicos en el navegador. Excelente trabajo hasta ahora. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/templates" title="Template syntax"/> - <docs-pill href="guide/templates/binding#render-dynamic-text-with-text-interpolation" title="Displaying values with interpolation"/> + <docs-pill href="guide/templates" title="Sintaxis de plantillas"/> + <docs-pill href="guide/templates/binding#render-dynamic-text-with-text-interpolation" title="Mostrando valores con interpolación"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.en.md b/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.en.md new file mode 100644 index 0000000..0628c9c --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.en.md @@ -0,0 +1,66 @@ +# Use @for to list objects in component + +This tutorial lesson demonstrates how to use `@for` block in Angular templates in order to display dynamically repeated data in a template. + +<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=MIl5NcRxvcLjYt5f&start=477"/> + +NOTE: This video reflects an older syntax, but the main concepts remain valid. + +## What you'll learn + +- You will have added a data set to the app +- Your app will display a list of elements from the new data set using `@for` + +## Conceptual preview of `@for` + +In Angular, `@for` is a specific type of [control flow block](/guide/templates/control-flow) used to dynamically repeat data in a template. In plain JavaScript you would use a for loop - `@for` provides similar functionality for Angular templates. + +You can utilize `@for` to iterate over arrays and even asynchronous values. In this lesson, you'll add a new array of data to iterate over. + +For a more in depth explanation, please refer to the [control flow](guide/templates/control-flow#repeat-content-with-the-for-block) guide. + +<docs-workflow> + +<docs-step title="Add housing data to the `Home`"> + +In the `Home` there is only a single housing location. In this step, you will add an array of `HousingLocation` entries. + +1. In `src/app/home/home.ts`, remove the `housingLocation` property from the `Home` class. +1. Update the `Home` class to have a property called `housingLocationList`. Update your code to match the following code: + <docs-code language="angular-ts" header="Add housingLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/> + + IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step. + +</docs-step> + +<docs-step title="Update the `Home` template to use `@for`"> +Now the app has a dataset that you can use to display the entries in the browser using the `@for` block. + +1. Update the `<app-housing-location>` tag in the template code to this: + <docs-code language="angular-ts" header="Add @for to Home template in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/> + + Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class. + +1. Save all changes. + +1. Refresh the browser and confirm that the app now renders a grid of housing locations. + +<section class="lightbox"> +<img alt="browser frame of homes-app displaying logo, filter text input box, search button and a grid of housing location cards" src="assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png"> +</section> + +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you used the `@for` block to repeat data dynamically in Angular templates. You also added a new array of data to be used in the Angular app. The application now dynamically renders a list of housing locations in the browser. + +The app is taking shape, great job. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/templates/control-flow" title="Control flow blocks"/> + <docs-pill href="guide/templates/control-flow#repeat-content-with-the-for-block" title="@for guide"/> + <docs-pill href="/api/core/@for" title="@for"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md b/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md index 0628c9c..63cbb5c 100644 --- a/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md @@ -1,66 +1,66 @@ -# Use @for to list objects in component +# Usar @for para listar objetos en el componente -This tutorial lesson demonstrates how to use `@for` block in Angular templates in order to display dynamically repeated data in a template. +Esta lección del tutorial demuestra cómo usar el bloque `@for` en plantillas Angular para mostrar datos repetidos dinámicamente en una plantilla. <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=MIl5NcRxvcLjYt5f&start=477"/> -NOTE: This video reflects an older syntax, but the main concepts remain valid. +NOTA: Este video refleja una sintaxis anterior, pero los conceptos principales siguen siendo válidos. -## What you'll learn +## ¿Qué aprenderás? -- You will have added a data set to the app -- Your app will display a list of elements from the new data set using `@for` +- Habrás agregado un conjunto de datos a la aplicación +- Tu aplicación mostrará una lista de elementos del nuevo conjunto de datos usando `@for` -## Conceptual preview of `@for` +## Vista previa conceptual de `@for` -In Angular, `@for` is a specific type of [control flow block](/guide/templates/control-flow) used to dynamically repeat data in a template. In plain JavaScript you would use a for loop - `@for` provides similar functionality for Angular templates. +En Angular, `@for` es un tipo específico de [bloque de control de flujo](/guide/templates/control-flow) usado para repetir datos dinámicamente en una plantilla. En JavaScript plano usarías un bucle for - `@for` proporciona funcionalidad similar para las plantillas Angular. -You can utilize `@for` to iterate over arrays and even asynchronous values. In this lesson, you'll add a new array of data to iterate over. +Puedes utilizar `@for` para iterar sobre arreglos e incluso valores asíncronos. En esta lección, agregarás un nuevo arreglo de datos para iterar. -For a more in depth explanation, please refer to the [control flow](guide/templates/control-flow#repeat-content-with-the-for-block) guide. +Para una explicación más detallada, consulta la guía de [control de flujo](guide/templates/control-flow#repeat-content-with-the-for-block). <docs-workflow> -<docs-step title="Add housing data to the `Home`"> +<docs-step title="Agrega datos de viviendas al `Home`"> -In the `Home` there is only a single housing location. In this step, you will add an array of `HousingLocation` entries. +En `Home` solo hay una única ubicación de vivienda. En este paso, agregarás un arreglo de entradas `HousingLocation`. -1. In `src/app/home/home.ts`, remove the `housingLocation` property from the `Home` class. -1. Update the `Home` class to have a property called `housingLocationList`. Update your code to match the following code: - <docs-code language="angular-ts" header="Add housingLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/> +1. En `src/app/home/home.ts`, elimina la propiedad `housingLocation` de la clase `Home`. +1. Actualiza la clase `Home` para que tenga una propiedad llamada `housingLocationList`. Actualiza tu código para que coincida con el siguiente código: + <docs-code language="angular-ts" header="Agregar propiedad housingLocationList en home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/> - IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step. + IMPORTANTE: No elimines el decorador `@Component`, actualizarás ese código en un próximo paso. </docs-step> -<docs-step title="Update the `Home` template to use `@for`"> -Now the app has a dataset that you can use to display the entries in the browser using the `@for` block. +<docs-step title="Actualiza la plantilla de `Home` para usar `@for`"> +Ahora la aplicación tiene un conjunto de datos que puedes usar para mostrar las entradas en el navegador usando el bloque `@for`. -1. Update the `<app-housing-location>` tag in the template code to this: - <docs-code language="angular-ts" header="Add @for to Home template in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/> +1. Actualiza la etiqueta `<app-housing-location>` en el código de la plantilla a esto: + <docs-code language="angular-ts" header="Agregar @for a la plantilla de Home en home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/> - Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class. + Nota, en el código `[housingLocation] = "housingLocation"` el valor `housingLocation` ahora se refiere a la variable usada en el bloque `@for`. Antes de este cambio, se refería a la propiedad de la clase `Home`. -1. Save all changes. +1. Guarda todos los cambios. -1. Refresh the browser and confirm that the app now renders a grid of housing locations. +1. Actualiza el navegador y confirma que la aplicación ahora renderiza una cuadrícula de ubicaciones de vivienda. <section class="lightbox"> -<img alt="browser frame of homes-app displaying logo, filter text input box, search button and a grid of housing location cards" src="assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png"> +<img alt="marco del navegador de la aplicación de viviendas mostrando logo, cuadro de entrada de texto de filtro, botón de búsqueda y una cuadrícula de tarjetas de ubicaciones de vivienda" src="assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png"> </section> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you used the `@for` block to repeat data dynamically in Angular templates. You also added a new array of data to be used in the Angular app. The application now dynamically renders a list of housing locations in the browser. +RESUMEN: En esta lección, usaste el bloque `@for` para repetir datos dinámicamente en plantillas Angular. También agregaste un nuevo arreglo de datos para usar en la aplicación Angular. La aplicación ahora renderiza dinámicamente una lista de ubicaciones de vivienda en el navegador. -The app is taking shape, great job. +La aplicación está tomando forma, excelente trabajo. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/templates/control-flow" title="Control flow blocks"/> - <docs-pill href="guide/templates/control-flow#repeat-content-with-the-for-block" title="@for guide"/> + <docs-pill href="guide/templates/control-flow" title="Bloques de control de flujo"/> + <docs-pill href="guide/templates/control-flow#repeat-content-with-the-for-block" title="Guía de @for"/> <docs-pill href="/api/core/@for" title="@for"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/09-services/README.en.md b/adev-es/src/content/tutorials/first-app/steps/09-services/README.en.md new file mode 100644 index 0000000..ed81640 --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/09-services/README.en.md @@ -0,0 +1,110 @@ +# Angular services + +This tutorial lesson demonstrates how to create an Angular service and use dependency injection to include it in your app. + +<docs-video src="https://www.youtube.com/embed/-jRxG84AzCI?si=rieGfJawp9xJ00Sz"/> + +## What you'll learn + +Your app has a service to serve the data to your app. +At the end of this lesson, the service reads data from local, static data. +In a later lesson, you'll update the service to get data from a web service. + +## Conceptual preview of services + +This tutorial introduces Angular services and dependency injection. + +### Angular services + +_Angular services_ provide a way for you to separate Angular app data and functions that can be used by multiple components in your app. +To be used by multiple components, a service must be made _injectable_. +Services that are injectable and used by a component become dependencies of that component. +The component depends on those services and can't function without them. + +### Dependency injection + +_Dependency injection_ is the mechanism that manages the dependencies of an app's components and the services that other components can use. + +<docs-workflow> + +<docs-step title="Create a new service for your app"> +This step creates an injectable service for your app. + +In the **Terminal** pane of your IDE: + +1. In your project directory, navigate to the `first-app` directory. +1. In the `first-app` directory, run this command to create the new service. + +```shell +ng generate service housing --skip-tests +``` + +1. Run `ng serve` to build the app and serve it to `http://localhost:4200`. +1. Confirm that the app builds without error. + Correct any errors before you continue to the next step. + </docs-step> + +<docs-step title="Add static data to the new service"> +This step adds some sample data to your new service. +In a later lesson, you'll replace the static data with a web interface to get data as you might in a real app. +For now, your app's new service uses the data that has, so far, been created locally in `Home`. + +In the **Edit** pane of your IDE: + +1. In `src/app/home/home.ts`, from `Home`, copy the `housingLocationList` variable and its array value. +1. In `src/app/housing.service.ts`: + 1. Inside the `HousingService` class, paste the variable that you copied from `Home` in the previous step. + 1. Inside the `HousingService` class, paste these functions after the data you just copied. + These functions allow dependencies to access the service's data. + + <docs-code header="Service functions in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/> + + You will need these functions in a future lesson. For now, it is enough to understand that these functions return either a specific `HousingLocation` by id or the entire list. + + 1. Add a file level import for the `HousingLocation`. + + <docs-code header="Import HousingLocation type in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[2]"/> + +1. Confirm that the app builds without error. + Correct any errors before you continue to the next step. + </docs-step> + +<docs-step title="Inject the new service into `Home`"> +This step injects the new service into your app's `Home` so that it can read the app's data from a service. +In a later lesson, you'll replace the static data with a live data source to get data as you might in a real app. + +In the **Edit** pane of your IDE, in `src/app/home/home.ts`: + +1. At the top of `src/app/home/home.ts`, add the `inject` to the items imported from `@angular/core`. This will import the `inject` function into the `Home` class. + +<docs-code language="angular-ts" header="Update to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[1]"/> + +1. Add a new file level import for the `HousingService`: + +<docs-code language="angular-ts" header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/> + +1. From `Home`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`. + +1. In `Home`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`. + +<docs-code language="angular-ts" header="Initialize data from service in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/> + +1. Save the changes to `src/app/home/home.ts` and confirm your app builds without error. + Correct any errors before you continue to the next step. + </docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you added an Angular service to your app and injected it into the `Home` class. +This compartmentalizes how your app gets its data. +For now, the new service gets its data from a static array of data. +In a later lesson, you'll refactor the service to get its data from an API endpoint. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/di/creating-injectable-service" title="Creating an injectable service"/> + <docs-pill href="guide/di" title="Dependency injection in Angular"/> + <docs-pill href="cli/generate/service" title="ng generate service"/> + <docs-pill href="cli/generate" title="ng generate"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/09-services/README.md b/adev-es/src/content/tutorials/first-app/steps/09-services/README.md index ed81640..9ca9f0d 100644 --- a/adev-es/src/content/tutorials/first-app/steps/09-services/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/09-services/README.md @@ -1,110 +1,110 @@ -# Angular services +# Servicios en Angular -This tutorial lesson demonstrates how to create an Angular service and use dependency injection to include it in your app. +Esta lección del tutorial demuestra cómo crear un servicio Angular y usar inyección de dependencias para incluirlo en tu aplicación. <docs-video src="https://www.youtube.com/embed/-jRxG84AzCI?si=rieGfJawp9xJ00Sz"/> -## What you'll learn +## ¿Qué aprenderás? -Your app has a service to serve the data to your app. -At the end of this lesson, the service reads data from local, static data. -In a later lesson, you'll update the service to get data from a web service. +Tu aplicación tiene un servicio para servir los datos a tu aplicación. +Al final de esta lección, el servicio lee datos de datos locales estáticos. +En una lección posterior, actualizarás el servicio para obtener datos de un servicio web. -## Conceptual preview of services +## Vista previa conceptual de servicios -This tutorial introduces Angular services and dependency injection. +Este tutorial introduce los servicios Angular y la inyección de dependencias. -### Angular services +### Servicios Angular -_Angular services_ provide a way for you to separate Angular app data and functions that can be used by multiple components in your app. -To be used by multiple components, a service must be made _injectable_. -Services that are injectable and used by a component become dependencies of that component. -The component depends on those services and can't function without them. +Los _servicios Angular_ proporcionan una forma de separar los datos y funciones de la aplicación Angular que pueden ser usados por múltiples componentes en tu aplicación. +Para ser usado por múltiples componentes, un servicio debe hacerse _inyectable_. +Los servicios que son inyectables y utilizados por un componente se convierten en dependencias de ese componente. +El componente depende de esos servicios y no puede funcionar sin ellos. -### Dependency injection +### Inyección de dependencias -_Dependency injection_ is the mechanism that manages the dependencies of an app's components and the services that other components can use. +La _inyección de dependencias_ es el mecanismo que gestiona las dependencias de los componentes de una aplicación y los servicios que otros componentes pueden usar. <docs-workflow> -<docs-step title="Create a new service for your app"> -This step creates an injectable service for your app. +<docs-step title="Crea un nuevo servicio para tu aplicación"> +Este paso crea un servicio inyectable para tu aplicación. -In the **Terminal** pane of your IDE: +En el panel de **Terminal** de tu IDE: -1. In your project directory, navigate to the `first-app` directory. -1. In the `first-app` directory, run this command to create the new service. +1. En tu directorio del proyecto, navega al directorio `first-app`. +1. En el directorio `first-app`, ejecuta este comando para crear el nuevo servicio. ```shell ng generate service housing --skip-tests ``` -1. Run `ng serve` to build the app and serve it to `http://localhost:4200`. -1. Confirm that the app builds without error. - Correct any errors before you continue to the next step. +1. Ejecuta `ng serve` para construir la aplicación y servirla en `http://localhost:4200`. +1. Confirma que la aplicación se construye sin errores. + Corrige cualquier error antes de continuar al siguiente paso. </docs-step> -<docs-step title="Add static data to the new service"> -This step adds some sample data to your new service. -In a later lesson, you'll replace the static data with a web interface to get data as you might in a real app. -For now, your app's new service uses the data that has, so far, been created locally in `Home`. +<docs-step title="Agrega datos estáticos al nuevo servicio"> +Este paso agrega algunos datos de ejemplo a tu nuevo servicio. +En una lección posterior, reemplazarás los datos estáticos con una interfaz web para obtener datos como lo harías en una aplicación real. +Por ahora, el nuevo servicio de tu aplicación usa los datos que, hasta ahora, se han creado localmente en `Home`. -In the **Edit** pane of your IDE: +En el panel de **Edición** de tu IDE: -1. In `src/app/home/home.ts`, from `Home`, copy the `housingLocationList` variable and its array value. -1. In `src/app/housing.service.ts`: - 1. Inside the `HousingService` class, paste the variable that you copied from `Home` in the previous step. - 1. Inside the `HousingService` class, paste these functions after the data you just copied. - These functions allow dependencies to access the service's data. +1. En `src/app/home/home.ts`, desde `Home`, copia la variable `housingLocationList` y su valor de arreglo. +1. En `src/app/housing.service.ts`: + 1. Dentro de la clase `HousingService`, pega la variable que copiaste de `Home` en el paso anterior. + 1. Dentro de la clase `HousingService`, pega estas funciones después de los datos que acabas de copiar. + Estas funciones permiten que las dependencias accedan a los datos del servicio. - <docs-code header="Service functions in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/> + <docs-code header="Funciones del servicio en src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/> - You will need these functions in a future lesson. For now, it is enough to understand that these functions return either a specific `HousingLocation` by id or the entire list. + Necesitarás estas funciones en una lección futura. Por ahora, es suficiente entender que estas funciones devuelven ya sea un `HousingLocation` específico por id o la lista completa. - 1. Add a file level import for the `HousingLocation`. + 1. Agrega una importación a nivel de archivo para `HousingLocation`. - <docs-code header="Import HousingLocation type in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[2]"/> + <docs-code header="Importar tipo HousingLocation en src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[2]"/> -1. Confirm that the app builds without error. - Correct any errors before you continue to the next step. +1. Confirma que la aplicación se construye sin errores. + Corrige cualquier error antes de continuar al siguiente paso. </docs-step> -<docs-step title="Inject the new service into `Home`"> -This step injects the new service into your app's `Home` so that it can read the app's data from a service. -In a later lesson, you'll replace the static data with a live data source to get data as you might in a real app. +<docs-step title="Inyecta el nuevo servicio en `Home`"> +Este paso inyecta el nuevo servicio en el `Home` de tu aplicación para que pueda leer los datos de la aplicación desde un servicio. +En una lección posterior, reemplazarás los datos estáticos con una fuente de datos en vivo para obtener datos como lo harías en una aplicación real. -In the **Edit** pane of your IDE, in `src/app/home/home.ts`: +En el panel de **Edición** de tu IDE, en `src/app/home/home.ts`: -1. At the top of `src/app/home/home.ts`, add the `inject` to the items imported from `@angular/core`. This will import the `inject` function into the `Home` class. +1. En la parte superior de `src/app/home/home.ts`, agrega `inject` a los elementos importados desde `@angular/core`. Esto importará la función `inject` en la clase `Home`. -<docs-code language="angular-ts" header="Update to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[1]"/> +<docs-code language="angular-ts" header="Actualizar src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[1]"/> -1. Add a new file level import for the `HousingService`: +1. Agrega una nueva importación a nivel de archivo para `HousingService`: -<docs-code language="angular-ts" header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/> +<docs-code language="angular-ts" header="Agregar importación a src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/> -1. From `Home`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`. +1. Desde `Home`, elimina las entradas del arreglo `housingLocationList` y asigna a `housingLocationList` el valor de un arreglo vacío (`[]`). En unos pasos actualizarás el código para obtener los datos desde `HousingService`. -1. In `Home`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`. +1. En `Home`, agrega el siguiente código para inyectar el nuevo servicio e inicializar los datos para la aplicación. El `constructor` es la primera función que se ejecuta cuando se crea este componente. El código en el `constructor` asignará a `housingLocationList` el valor devuelto por la llamada a `getAllHousingLocations`. -<docs-code language="angular-ts" header="Initialize data from service in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/> +<docs-code language="angular-ts" header="Inicializar datos desde el servicio en src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/> -1. Save the changes to `src/app/home/home.ts` and confirm your app builds without error. - Correct any errors before you continue to the next step. +1. Guarda los cambios en `src/app/home/home.ts` y confirma que tu aplicación se construye sin errores. + Corrige cualquier error antes de continuar al siguiente paso. </docs-step> </docs-workflow> -SUMMARY: In this lesson, you added an Angular service to your app and injected it into the `Home` class. -This compartmentalizes how your app gets its data. -For now, the new service gets its data from a static array of data. -In a later lesson, you'll refactor the service to get its data from an API endpoint. +RESUMEN: En esta lección, agregaste un servicio Angular a tu aplicación y lo inyectaste en la clase `Home`. +Esto compartmentaliza cómo tu aplicación obtiene sus datos. +Por ahora, el nuevo servicio obtiene sus datos de un arreglo estático de datos. +En una lección posterior, refactorizarás el servicio para obtener sus datos desde un endpoint de API. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/di/creating-injectable-service" title="Creating an injectable service"/> - <docs-pill href="guide/di" title="Dependency injection in Angular"/> + <docs-pill href="guide/di/creating-injectable-service" title="Creando un servicio inyectable"/> + <docs-pill href="guide/di" title="Inyección de dependencias en Angular"/> <docs-pill href="cli/generate/service" title="ng generate service"/> <docs-pill href="cli/generate" title="ng generate"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/10-routing/README.en.md b/adev-es/src/content/tutorials/first-app/steps/10-routing/README.en.md new file mode 100644 index 0000000..b0e5efd --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/10-routing/README.en.md @@ -0,0 +1,84 @@ +# Add routes to the application + +This tutorial lesson demonstrates how to add routes to your app. + +<docs-video src="https://www.youtube.com/embed/r5DEBMuStPw?si=H6Bx6nLJoMLaMxkx" /> + +IMPORTANT: We recommend using your local environment to learn routing. + +## What you'll learn + +At the end of this lesson your application will have support for routing. + +## Conceptual preview of routing + +This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In [Single Page Applications (SPA)](guide/routing), only parts of the page are updated to represent the requested view for the user. + +The [Angular Router](guide/routing) enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application. + +In this lesson, you will enable routing in your application to navigate to the details page. + +<docs-workflow> + +<docs-step title="Create a default details component "> +1. From the terminal, enter the following command to create the `Details`: + + ```shell + ng generate component details + ``` + + This component will represent the details page that provides more information on a given housing location. + +</docs-step> + +<docs-step title="Add routing to the application"> +1. In the `src/app` directory, create a file called `routes.ts`. This file is where we will define the routes in the application. + +2. In `main.ts`, make the following updates to enable routing in the application: + 1. Import the routes file and the `provideRouter` function: + + <docs-code header="Import routing details in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/> + 2. Update the call to `bootstrapApplication` to include the routing configuration: + + <docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/> + +3. In `src/app/app.ts`, update the component to use routing: + 1. Add file level imports for the router directives `RouterOutlet` and `RouterLink`: + + <docs-code language="angular-ts" header="Import router directives in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[3]"/> + 2. Add `RouterOutlet` and `RouterLink` to the `@Component` metadata imports + + <docs-code language="angular-ts" header="Add router directives to component imports in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/> + 3. In the `template` property, replace the `<app-home></app-home>` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code: + + <docs-code language="angular-ts" header="Add router-outlet in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/> + +</docs-step> + +<docs-step title="Add route to new component"> +In the previous step you removed the reference to the `<app-home>` component in the template. In this step, you will add a new route to that component. + +1. In `routes.ts`, perform the following updates to create a route. + 1. Add a file level imports for the `Home`, `Details` and the `Routes` type that you'll use in the route definitions. + + <docs-code header="Import components and Routes" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[1,3]"/> + 1. Define a variable called `routeConfig` of type `Routes` and define two routes for the app: + <docs-code header="Add routes to the app" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[5,18]"/> + + The entries in the `routeConfig` array represent the routes in the application. The first entry navigates to the `Home` whenever the url matches `''`. The second entry uses some special formatting that will be revisited in a future lesson. + +1. Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations. + </docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you enabled routing in your app as well as defined new routes. Now your app can support navigation between views. In the next lesson, you will learn to navigate to the "details" page for a given housing location. + +You are making great progress with your app, well done. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/routing" title="Routing in Angular Overview"/> + <docs-pill href="guide/routing/common-router-tasks" title="Common Routing Tasks"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md b/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md index b0e5efd..c7c5193 100644 --- a/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md @@ -1,84 +1,84 @@ -# Add routes to the application +# Agregar rutas a la aplicación -This tutorial lesson demonstrates how to add routes to your app. +Esta lección del tutorial demuestra cómo agregar rutas a tu aplicación. <docs-video src="https://www.youtube.com/embed/r5DEBMuStPw?si=H6Bx6nLJoMLaMxkx" /> -IMPORTANT: We recommend using your local environment to learn routing. +IMPORTANTE: Recomendamos usar tu entorno local para aprender routing. -## What you'll learn +## ¿Qué aprenderás? -At the end of this lesson your application will have support for routing. +Al final de esta lección tu aplicación tendrá soporte para routing. -## Conceptual preview of routing +## Vista previa conceptual de routing -This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In [Single Page Applications (SPA)](guide/routing), only parts of the page are updated to represent the requested view for the user. +Este tutorial introduce el routing en Angular. El routing es la capacidad de navegar de un componente en la aplicación a otro. En [Aplicaciones de Página Única (SPA)](guide/routing), solo partes de la página se actualizan para representar la vista solicitada por el usuario. -The [Angular Router](guide/routing) enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application. +El [Router de Angular](guide/routing) permite a los usuarios declarar rutas y especificar qué componente debe mostrarse en pantalla si esa ruta es solicitada por la aplicación. -In this lesson, you will enable routing in your application to navigate to the details page. +En esta lección, habilitarás el routing en tu aplicación para navegar a la página de detalles. <docs-workflow> -<docs-step title="Create a default details component "> -1. From the terminal, enter the following command to create the `Details`: +<docs-step title="Crea un componente de detalles predeterminado"> +1. Desde la terminal, ingresa el siguiente comando para crear el componente `Details`: ```shell ng generate component details ``` - This component will represent the details page that provides more information on a given housing location. + Este componente representará la página de detalles que proporciona más información sobre una ubicación de vivienda dada. </docs-step> -<docs-step title="Add routing to the application"> -1. In the `src/app` directory, create a file called `routes.ts`. This file is where we will define the routes in the application. +<docs-step title="Agrega routing a la aplicación"> +1. En el directorio `src/app`, crea un archivo llamado `routes.ts`. Este archivo es donde definiremos las rutas en la aplicación. -2. In `main.ts`, make the following updates to enable routing in the application: - 1. Import the routes file and the `provideRouter` function: +2. En `main.ts`, realiza las siguientes actualizaciones para habilitar el routing en la aplicación: + 1. Importa el archivo de rutas y la función `provideRouter`: - <docs-code header="Import routing details in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/> - 2. Update the call to `bootstrapApplication` to include the routing configuration: + <docs-code header="Importar detalles de routing en src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/> + 2. Actualiza la llamada a `bootstrapApplication` para incluir la configuración de routing: - <docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/> + <docs-code header="Agregar configuración del router en src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/> -3. In `src/app/app.ts`, update the component to use routing: - 1. Add file level imports for the router directives `RouterOutlet` and `RouterLink`: +3. En `src/app/app.ts`, actualiza el componente para usar routing: + 1. Agrega importaciones a nivel de archivo para las directivas del router `RouterOutlet` y `RouterLink`: - <docs-code language="angular-ts" header="Import router directives in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[3]"/> - 2. Add `RouterOutlet` and `RouterLink` to the `@Component` metadata imports + <docs-code language="angular-ts" header="Importar directivas del router en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[3]"/> + 2. Agrega `RouterOutlet` y `RouterLink` a los imports de los metadatos de `@Component` - <docs-code language="angular-ts" header="Add router directives to component imports in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/> - 3. In the `template` property, replace the `<app-home></app-home>` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code: + <docs-code language="angular-ts" header="Agregar directivas del router a los imports del componente en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/> + 3. En la propiedad `template`, reemplaza la etiqueta `<app-home></app-home>` con la directiva `<router-outlet>` y agrega un enlace de vuelta a la página de inicio. Tu código debería coincidir con este código: - <docs-code language="angular-ts" header="Add router-outlet in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/> + <docs-code language="angular-ts" header="Agregar router-outlet en src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/> </docs-step> -<docs-step title="Add route to new component"> -In the previous step you removed the reference to the `<app-home>` component in the template. In this step, you will add a new route to that component. +<docs-step title="Agrega ruta al nuevo componente"> +En el paso anterior eliminaste la referencia al componente `<app-home>` en la plantilla. En este paso, agregarás una nueva ruta a ese componente. -1. In `routes.ts`, perform the following updates to create a route. - 1. Add a file level imports for the `Home`, `Details` and the `Routes` type that you'll use in the route definitions. +1. En `routes.ts`, realiza las siguientes actualizaciones para crear una ruta. + 1. Agrega importaciones a nivel de archivo para `Home`, `Details` y el tipo `Routes` que usarás en las definiciones de ruta. - <docs-code header="Import components and Routes" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[1,3]"/> - 1. Define a variable called `routeConfig` of type `Routes` and define two routes for the app: - <docs-code header="Add routes to the app" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[5,18]"/> + <docs-code header="Importar componentes y Routes" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[1,3]"/> + 1. Define una variable llamada `routeConfig` de tipo `Routes` y define dos rutas para la aplicación: + <docs-code header="Agregar rutas a la aplicación" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[5,18]"/> - The entries in the `routeConfig` array represent the routes in the application. The first entry navigates to the `Home` whenever the url matches `''`. The second entry uses some special formatting that will be revisited in a future lesson. + Las entradas en el arreglo `routeConfig` representan las rutas en la aplicación. La primera entrada navega a `Home` cada vez que la url coincide con `''`. La segunda entrada usa un formato especial que se revisitará en una lección futura. -1. Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations. +1. Guarda todos los cambios y confirma que la aplicación funciona en el navegador. La aplicación debería seguir mostrando la lista de ubicaciones de vivienda. </docs-step> </docs-workflow> -SUMMARY: In this lesson, you enabled routing in your app as well as defined new routes. Now your app can support navigation between views. In the next lesson, you will learn to navigate to the "details" page for a given housing location. +RESUMEN: En esta lección, habilitaste el routing en tu aplicación y definiste nuevas rutas. Ahora tu aplicación puede soportar navegación entre vistas. En la próxima lección, aprenderás a navegar a la página de "detalles" para una ubicación de vivienda dada. -You are making great progress with your app, well done. +Estás progresando muy bien con tu aplicación, bien hecho. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/routing" title="Routing in Angular Overview"/> - <docs-pill href="guide/routing/common-router-tasks" title="Common Routing Tasks"/> + <docs-pill href="guide/routing" title="Descripción general de Routing en Angular"/> + <docs-pill href="guide/routing/common-router-tasks" title="Tareas Comunes de Routing"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.en.md b/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.en.md new file mode 100644 index 0000000..8b92116 --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.en.md @@ -0,0 +1,138 @@ +# Integrate details page into application + +This tutorial lesson demonstrates how to connect the details page to your app. + +<docs-video src="https://www.youtube.com/embed/-jRxG84AzCI?si=CbqIpmRpwp5ZZDnu&start=345"/> + +IMPORTANT: We recommend using your local environment to learn routing. + +## What you'll learn + +At the end of this lesson your application will have support for routing to the details page. + +## Conceptual preview of routing with route parameters + +Each housing location has specific details that should be displayed when a user navigates to the details page for that item. To accomplish this goal, you will need to use route parameters. + +Route parameters enable you to include dynamic information as a part of your route URL. To identify which housing location a user has clicked on you will use the `id` property of the `HousingLocation` type. + +<docs-workflow> + +<docs-step title="Using `routerLink` for dynamic navigation"> +In lesson 10, you added a second route to `src/app/routes.ts` which includes a special segment that identifies the route parameter, `id`: + +``` +'details/:id' +``` + +In this case, `:id` is dynamic and will change based on how the route is requested by the code. + +1. In `src/app/housing-location/housing-location.ts`, add an anchor tag to the `section` element and include the `routerLink` directive: + + <docs-code language="angular-ts" header="Add anchor with a routerLink directive to housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/> + + The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data. + + For the `routerLink` to work in the template, add a file level import of `RouterLink` and `RouterOutlet` from '@angular/router', then update the component `imports` array to include both `RouterLink` and `RouterOutlet`. + +1. At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "Learn More" button for a housing location. + +<img alt="details page displaying the text 'details works!'" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png"> + +</docs-step> + +<docs-step title="Get route parameters"> +In this step, you will get the route parameter in the `Details`. Currently, the app displays `details works!`. Next you'll update the code to display the `id` value passed using the route parameters. + +1. In `src/app/details/details.ts` update the template to import the functions, classes and services that you'll need to use in the `Details`: + +<docs-code header="Update file level imports" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[1,4]"/> + +1. Update the `template` property of the `@Component` decorator to display the value `housingLocationId`: + + ```angular-ts + template: `<p>details works! {{ housingLocationId }}</p>`, + ``` + +1. Update the body of the `Details` class with the following code: + + ```ts + export class Details { + route: ActivatedRoute = inject(ActivatedRoute); + housingLocationId = -1; + constructor() { + this.housingLocationId = Number(this.route.snapshot.params['id']); + } + } + ``` + + This code gives the `Details` access to the `ActivatedRoute` router feature that enables you to have access to the data about the current route. In the `constructor`, the code converts the `id` parameter acquired from the route from a string to a number. + +1. Save all changes. + +1. In the browser, click on one of the housing location's "Learn More" links and confirm that the numeric value displayed on the page matches the `id` property for that location in the data. + </docs-step> + +<docs-step title="Customize the `Details`"> +Now that routing is working properly in the application this is a great time to update the template of the `Details` to display the specific data represented by the housing location for the route parameter. + +To access the data you will add a call to the `HousingService`. + +1. Update the template code to match the following code: + + <docs-code language="angular-ts" header="Update the Details template in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[8,29]"/> + + Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash. + +1. Update the body of the `Details` class to match the following code: + + <docs-code language="angular-ts" header="Update the Details class in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[32,41]"/> + + Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function. + +1. Copy the following styles into the `src/app/details/details.css` file: + + <docs-code header="Add styles for the Details" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.css" visibleLines="[1,71]"/> + + and save your changes + +1. In `Details` use the just created `details.css` file as the source for the styles: + <docs-code language="angular-ts" header="Update details.ts to use the created css file" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/> + +1. In the browser refresh the page and confirm that when you click on the "Learn More" link for a given housing location the details page displays the correct information based on the data for that selected item. + +<img alt="Details page listing home info" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png"> + +</docs-step> + +<docs-step title="Check navigation in the `Home`"> +In a previous lesson you updated the `App` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `Home` whenever the logo is clicked. + +1. Confirm that your code matches the following: + + <docs-code language="angular-ts" header="Confirm the routerLink in app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/> + + Your code should already be up-to-date but confirm to be sure. + + </docs-step> + +</docs-workflow> + +SUMMARY: In this lesson you added routing to show details pages. + +You now know how to: + +- use route parameters to pass data to a route +- use the `routerLink` directive to use dynamic data to create a route +- use route parameter to retrieve data from the `HousingService` to display specific housing location information. + +Really great work so far. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/routing/common-router-tasks#accessing-query-parameters-and-fragments" title="Route Parameters"/> + <docs-pill href="guide/routing" title="Routing in Angular Overview"/> + <docs-pill href="guide/routing/common-router-tasks" title="Common Routing Tasks"/> + <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining" title="Optional Chaining Operator"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md b/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md index 8b92116..96a9dc6 100644 --- a/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md @@ -1,60 +1,60 @@ -# Integrate details page into application +# Integrar página de detalles en la aplicación -This tutorial lesson demonstrates how to connect the details page to your app. +Esta lección del tutorial demuestra cómo conectar la página de detalles a tu aplicación. <docs-video src="https://www.youtube.com/embed/-jRxG84AzCI?si=CbqIpmRpwp5ZZDnu&start=345"/> -IMPORTANT: We recommend using your local environment to learn routing. +IMPORTANTE: Recomendamos usar tu entorno local para aprender routing. -## What you'll learn +## ¿Qué aprenderás? -At the end of this lesson your application will have support for routing to the details page. +Al final de esta lección tu aplicación tendrá soporte para routing hacia la página de detalles. -## Conceptual preview of routing with route parameters +## Vista previa conceptual de routing con parámetros de ruta -Each housing location has specific details that should be displayed when a user navigates to the details page for that item. To accomplish this goal, you will need to use route parameters. +Cada ubicación de vivienda tiene detalles específicos que deberían mostrarse cuando un usuario navega a la página de detalles para ese elemento. Para lograr este objetivo, necesitarás usar parámetros de ruta. -Route parameters enable you to include dynamic information as a part of your route URL. To identify which housing location a user has clicked on you will use the `id` property of the `HousingLocation` type. +Los parámetros de ruta te permiten incluir información dinámica como parte de la URL de tu ruta. Para identificar qué ubicación de vivienda ha seleccionado un usuario, usarás la propiedad `id` del tipo `HousingLocation`. <docs-workflow> -<docs-step title="Using `routerLink` for dynamic navigation"> -In lesson 10, you added a second route to `src/app/routes.ts` which includes a special segment that identifies the route parameter, `id`: +<docs-step title="Usando `routerLink` para navegación dinámica"> +En la lección 10, agregaste una segunda ruta a `src/app/routes.ts` que incluye un segmento especial que identifica el parámetro de ruta, `id`: ``` 'details/:id' ``` -In this case, `:id` is dynamic and will change based on how the route is requested by the code. +En este caso, `:id` es dinámico y cambiará según cómo la ruta sea solicitada por el código. -1. In `src/app/housing-location/housing-location.ts`, add an anchor tag to the `section` element and include the `routerLink` directive: +1. En `src/app/housing-location/housing-location.ts`, agrega una etiqueta de anclaje al elemento `section` e incluye la directiva `routerLink`: - <docs-code language="angular-ts" header="Add anchor with a routerLink directive to housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/> + <docs-code language="angular-ts" header="Agregar anclaje con directiva routerLink a housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/> - The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data. + La directiva `routerLink` permite al router de Angular crear enlaces dinámicos en la aplicación. El valor asignado a `routerLink` es un arreglo con dos entradas: la parte estática de la ruta y los datos dinámicos. - For the `routerLink` to work in the template, add a file level import of `RouterLink` and `RouterOutlet` from '@angular/router', then update the component `imports` array to include both `RouterLink` and `RouterOutlet`. + Para que `routerLink` funcione en la plantilla, agrega una importación a nivel de archivo de `RouterLink` y `RouterOutlet` desde '@angular/router', luego actualiza el arreglo `imports` del componente para incluir tanto `RouterLink` como `RouterOutlet`. -1. At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "Learn More" button for a housing location. +1. En este punto puedes confirmar que el routing funciona en tu aplicación. En el navegador, actualiza la página de inicio y haz clic en el botón "Learn More" para una ubicación de vivienda. -<img alt="details page displaying the text 'details works!'" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png"> +<img alt="página de detalles mostrando el texto 'details works!'" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png"> </docs-step> -<docs-step title="Get route parameters"> -In this step, you will get the route parameter in the `Details`. Currently, the app displays `details works!`. Next you'll update the code to display the `id` value passed using the route parameters. +<docs-step title="Obtén los parámetros de ruta"> +En este paso, obtendrás el parámetro de ruta en el componente `Details`. Actualmente, la aplicación muestra `details works!`. A continuación, actualizarás el código para mostrar el valor `id` pasado usando los parámetros de ruta. -1. In `src/app/details/details.ts` update the template to import the functions, classes and services that you'll need to use in the `Details`: +1. En `src/app/details/details.ts` actualiza la plantilla para importar las funciones, clases y servicios que necesitarás usar en `Details`: -<docs-code header="Update file level imports" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[1,4]"/> +<docs-code header="Actualizar importaciones a nivel de archivo" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[1,4]"/> -1. Update the `template` property of the `@Component` decorator to display the value `housingLocationId`: +1. Actualiza la propiedad `template` del decorador `@Component` para mostrar el valor `housingLocationId`: ```angular-ts template: `<p>details works! {{ housingLocationId }}</p>`, ``` -1. Update the body of the `Details` class with the following code: +1. Actualiza el cuerpo de la clase `Details` con el siguiente código: ```ts export class Details { @@ -66,73 +66,73 @@ In this step, you will get the route parameter in the `Details`. Currently, the } ``` - This code gives the `Details` access to the `ActivatedRoute` router feature that enables you to have access to the data about the current route. In the `constructor`, the code converts the `id` parameter acquired from the route from a string to a number. + Este código le da a `Details` acceso a la funcionalidad del router `ActivatedRoute` que te permite tener acceso a los datos sobre la ruta actual. En el `constructor`, el código convierte el parámetro `id` adquirido de la ruta de string a número. -1. Save all changes. +1. Guarda todos los cambios. -1. In the browser, click on one of the housing location's "Learn More" links and confirm that the numeric value displayed on the page matches the `id` property for that location in the data. +1. En el navegador, haz clic en uno de los enlaces "Learn More" de una ubicación de vivienda y confirma que el valor numérico mostrado en la página coincide con la propiedad `id` para esa ubicación en los datos. </docs-step> -<docs-step title="Customize the `Details`"> -Now that routing is working properly in the application this is a great time to update the template of the `Details` to display the specific data represented by the housing location for the route parameter. +<docs-step title="Personaliza el componente `Details`"> +Ahora que el routing funciona correctamente en la aplicación, este es un buen momento para actualizar la plantilla de `Details` para mostrar los datos específicos representados por la ubicación de vivienda para el parámetro de ruta. -To access the data you will add a call to the `HousingService`. +Para acceder a los datos, agregarás una llamada a `HousingService`. -1. Update the template code to match the following code: +1. Actualiza el código de la plantilla para que coincida con el siguiente código: - <docs-code language="angular-ts" header="Update the Details template in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[8,29]"/> + <docs-code language="angular-ts" header="Actualizar la plantilla de Details en src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[8,29]"/> - Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash. + Observa que las propiedades de `housingLocation` se están accediendo con el operador de encadenamiento opcional `?`. Esto asegura que si el valor de `housingLocation` es nulo o indefinido, la aplicación no se bloquee. -1. Update the body of the `Details` class to match the following code: +1. Actualiza el cuerpo de la clase `Details` para que coincida con el siguiente código: - <docs-code language="angular-ts" header="Update the Details class in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[32,41]"/> + <docs-code language="angular-ts" header="Actualizar la clase Details en src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[32,41]"/> - Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function. + Ahora el componente tiene el código para mostrar la información correcta basada en la ubicación de vivienda seleccionada. El `constructor` ahora incluye una llamada a `HousingService` para pasar el parámetro de ruta como argumento a la función del servicio `getHousingLocationById`. -1. Copy the following styles into the `src/app/details/details.css` file: +1. Copia los siguientes estilos en el archivo `src/app/details/details.css`: - <docs-code header="Add styles for the Details" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.css" visibleLines="[1,71]"/> + <docs-code header="Agregar estilos para Details" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.css" visibleLines="[1,71]"/> - and save your changes + y guarda tus cambios -1. In `Details` use the just created `details.css` file as the source for the styles: - <docs-code language="angular-ts" header="Update details.ts to use the created css file" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/> +1. En `Details` usa el archivo `details.css` recién creado como fuente para los estilos: + <docs-code language="angular-ts" header="Actualizar details.ts para usar el archivo css creado" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/> -1. In the browser refresh the page and confirm that when you click on the "Learn More" link for a given housing location the details page displays the correct information based on the data for that selected item. +1. En el navegador, actualiza la página y confirma que cuando haces clic en el enlace "Learn More" para una ubicación de vivienda determinada, la página de detalles muestra la información correcta basada en los datos para ese elemento seleccionado. -<img alt="Details page listing home info" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png"> +<img alt="Página de detalles mostrando información de la casa" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png"> </docs-step> -<docs-step title="Check navigation in the `Home`"> -In a previous lesson you updated the `App` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `Home` whenever the logo is clicked. +<docs-step title="Verifica la navegación en `Home`"> +En una lección anterior actualizaste la plantilla de `App` para incluir un `routerLink`. Agregar ese código actualizó tu aplicación para habilitar la navegación de regreso a `Home` cada vez que se hace clic en el logo. -1. Confirm that your code matches the following: +1. Confirma que tu código coincide con lo siguiente: - <docs-code language="angular-ts" header="Confirm the routerLink in app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/> + <docs-code language="angular-ts" header="Confirmar el routerLink en app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/> - Your code should already be up-to-date but confirm to be sure. + Tu código ya debería estar actualizado, pero confírmalo para estar seguro. </docs-step> </docs-workflow> -SUMMARY: In this lesson you added routing to show details pages. +RESUMEN: En esta lección agregaste routing para mostrar páginas de detalles. -You now know how to: +Ahora sabes cómo: -- use route parameters to pass data to a route -- use the `routerLink` directive to use dynamic data to create a route -- use route parameter to retrieve data from the `HousingService` to display specific housing location information. +- usar parámetros de ruta para pasar datos a una ruta +- usar la directiva `routerLink` para usar datos dinámicos para crear una ruta +- usar parámetros de ruta para recuperar datos de `HousingService` para mostrar información específica de una ubicación de vivienda -Really great work so far. +Realmente un gran trabajo hasta ahora. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/routing/common-router-tasks#accessing-query-parameters-and-fragments" title="Route Parameters"/> - <docs-pill href="guide/routing" title="Routing in Angular Overview"/> - <docs-pill href="guide/routing/common-router-tasks" title="Common Routing Tasks"/> - <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining" title="Optional Chaining Operator"/> + <docs-pill href="guide/routing/common-router-tasks#accessing-query-parameters-and-fragments" title="Parámetros de Ruta"/> + <docs-pill href="guide/routing" title="Descripción general de Routing en Angular"/> + <docs-pill href="guide/routing/common-router-tasks" title="Tareas Comunes de Routing"/> + <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining" title="Operador de Encadenamiento Opcional"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/12-forms/README.en.md b/adev-es/src/content/tutorials/first-app/steps/12-forms/README.en.md new file mode 100644 index 0000000..249b2c1 --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/12-forms/README.en.md @@ -0,0 +1,106 @@ +# Adding a form to your Angular app + +This tutorial lesson demonstrates how to add a form that collects user data to an Angular app. +This lesson starts with a functional Angular app and shows how to add a form to it. + +The data that the form collects is sent only to the app's service, which writes it to the browser's console. +Using a REST API to send and receive the form's data is not covered in this lesson. + +<docs-video src="https://www.youtube.com/embed/kWbk-dOJaNQ?si=FYMXGdUiT-qh321h"/> + +IMPORTANT: We recommend using your local environment for this step of the tutorial. + +## What you'll learn + +- Your app has a form into which users can enter data that is sent to your app's service. +- The service writes the data from the form to the browser's console log. + +<docs-workflow> + +<docs-step title="Add a method to send form data"> +This step adds a method to your app's service that receives the form data to send to the data's destination. +In this example, the method writes the data from the form to the browser's console log. + +In the **Edit** pane of your IDE: + +1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition. + +<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/> + +1. Confirm that the app builds without error. + Correct any errors before you continue to the next step. + </docs-step> + +<docs-step title="Add the form functions to the details page"> +This step adds the code to the details page that handles the form's interactions. + +In the **Edit** pane of your IDE, in `src/app/details/details.ts`: + +1. After the `import` statements at the top of the file, add the following code to import the Angular form classes. + +<docs-code header="Forms imports in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[5]"/> + +1. In the `Details` decorator metadata, update the `imports` property with the following code: + +<docs-code header="imports directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[9]"/> + +1. In the `Details` class, before the `constructor()` method, add the following code to create the form object. + + <docs-code header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[52,56]"/> + + In Angular, `FormGroup` and `FormControl` are types that enable you to build forms. The `FormControl` type can provide a default value and shape the form data. In this example `firstName` is a `string` and the default value is empty string. + +1. In the `Details` class, after the `constructor()` method, add the following code to handle the **Apply now** click. + + <docs-code header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[62,68]"/> + + This button does not exist yet - you will add it in the next step. In the above code, the `FormControl`s may return `null`. This code uses the nullish coalescing operator to default to empty string if the value is `null`. + +1. Confirm that the app builds without error. + Correct any errors before you continue to the next step. + </docs-step> + +<docs-step title="Add the form's markup to the details page"> +This step adds the markup to the details page that displays the form. + +In the **Edit** pane of your IDE, in `src/app/details/details.ts`: + +1. In the `Details` decorator metadata, update the `template` HTML to match the following code to add the form's markup. + + <docs-code language="angular-ts" header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[10,45]"/> + + The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events. + +1. Confirm that the app builds without error. + Correct any errors before you continue to the next step. + +<img alt="details page with a form for applying to live at this location" src="assets/images/tutorials/first-app/homes-app-lesson-12-step-3.png"> + +</docs-step> + +<docs-step title="Test your app's new form"> +This step tests the new form to see that when the form data is submitted to the app, the form data appears in the console log. + +1. In the **Terminal** pane of your IDE, run `ng serve`, if it isn't already running. +1. In your browser, open your app at `http://localhost:4200`. +1. Right click on the app in the browser and from the context menu, choose **Inspect**. +1. In the developer tools window, choose the **Console** tab. + Make sure that the developer tools window is visible for the next steps +1. In your app: + 1. Select a housing location and click **Learn more**, to see details about the house. + 1. In the house's details page, scroll to the bottom to find the new form. + 1. Enter data into the form's fields - any data is fine. + 1. Choose **Apply now** to submit the data. +1. In the developer tools window, review the log output to find your form data. + </docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you updated your app to add a form using Angular's forms feature, and connect the data captured in the form to a component using an event handler. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/forms" title="Angular Forms"/> + <docs-pill href="guide/templates/event-listeners" title="Event Handling"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md b/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md index 249b2c1..cc54d18 100644 --- a/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md @@ -1,106 +1,106 @@ -# Adding a form to your Angular app +# Agregar un formulario a tu aplicación Angular -This tutorial lesson demonstrates how to add a form that collects user data to an Angular app. -This lesson starts with a functional Angular app and shows how to add a form to it. +Esta lección del tutorial demuestra cómo agregar un formulario que recopila datos del usuario a una aplicación Angular. +Esta lección comienza con una aplicación Angular funcional y muestra cómo agregar un formulario a ella. -The data that the form collects is sent only to the app's service, which writes it to the browser's console. -Using a REST API to send and receive the form's data is not covered in this lesson. +Los datos que el formulario recopila se envían solo al servicio de la aplicación, que los escribe en la consola del navegador. +El uso de una API REST para enviar y recibir los datos del formulario no se cubre en esta lección. <docs-video src="https://www.youtube.com/embed/kWbk-dOJaNQ?si=FYMXGdUiT-qh321h"/> -IMPORTANT: We recommend using your local environment for this step of the tutorial. +IMPORTANTE: Recomendamos usar tu entorno local para este paso del tutorial. -## What you'll learn +## ¿Qué aprenderás? -- Your app has a form into which users can enter data that is sent to your app's service. -- The service writes the data from the form to the browser's console log. +- Tu aplicación tiene un formulario en el que los usuarios pueden ingresar datos que se envían al servicio de tu aplicación. +- El servicio escribe los datos del formulario en el registro de la consola del navegador. <docs-workflow> -<docs-step title="Add a method to send form data"> -This step adds a method to your app's service that receives the form data to send to the data's destination. -In this example, the method writes the data from the form to the browser's console log. +<docs-step title="Agrega un método para enviar datos del formulario"> +Este paso agrega un método al servicio de tu aplicación que recibe los datos del formulario para enviarlos al destino de los datos. +En este ejemplo, el método escribe los datos del formulario en el registro de la consola del navegador. -In the **Edit** pane of your IDE: +En el panel de **Edición** de tu IDE: -1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition. +1. En `src/app/housing.service.ts`, dentro de la clase `HousingService`, pega este método al final de la definición de la clase. -<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/> +<docs-code header="Método submit en src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/> -1. Confirm that the app builds without error. - Correct any errors before you continue to the next step. +1. Confirma que la aplicación se construye sin errores. + Corrige cualquier error antes de continuar al siguiente paso. </docs-step> -<docs-step title="Add the form functions to the details page"> -This step adds the code to the details page that handles the form's interactions. +<docs-step title="Agrega las funciones del formulario a la página de detalles"> +Este paso agrega el código a la página de detalles que maneja las interacciones del formulario. -In the **Edit** pane of your IDE, in `src/app/details/details.ts`: +En el panel de **Edición** de tu IDE, en `src/app/details/details.ts`: -1. After the `import` statements at the top of the file, add the following code to import the Angular form classes. +1. Después de las declaraciones `import` en la parte superior del archivo, agrega el siguiente código para importar las clases de formulario de Angular. -<docs-code header="Forms imports in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[5]"/> +<docs-code header="Importaciones de formularios en src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[5]"/> -1. In the `Details` decorator metadata, update the `imports` property with the following code: +1. En los metadatos del decorador `Details`, actualiza la propiedad `imports` con el siguiente código: -<docs-code header="imports directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[9]"/> +<docs-code header="Directiva imports en src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[9]"/> -1. In the `Details` class, before the `constructor()` method, add the following code to create the form object. +1. En la clase `Details`, antes del método `constructor()`, agrega el siguiente código para crear el objeto del formulario. - <docs-code header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[52,56]"/> + <docs-code header="Directiva template en src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[52,56]"/> - In Angular, `FormGroup` and `FormControl` are types that enable you to build forms. The `FormControl` type can provide a default value and shape the form data. In this example `firstName` is a `string` and the default value is empty string. + En Angular, `FormGroup` y `FormControl` son tipos que te permiten construir formularios. El tipo `FormControl` puede proporcionar un valor predeterminado y dar forma a los datos del formulario. En este ejemplo, `firstName` es un `string` y el valor predeterminado es string vacío. -1. In the `Details` class, after the `constructor()` method, add the following code to handle the **Apply now** click. +1. En la clase `Details`, después del método `constructor()`, agrega el siguiente código para manejar el clic de **Apply now**. - <docs-code header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[62,68]"/> + <docs-code header="Directiva template en src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[62,68]"/> - This button does not exist yet - you will add it in the next step. In the above code, the `FormControl`s may return `null`. This code uses the nullish coalescing operator to default to empty string if the value is `null`. + Este botón aún no existe — lo agregarás en el siguiente paso. En el código anterior, los `FormControl`s pueden devolver `null`. Este código usa el operador de coalescencia nula para usar string vacío por defecto si el valor es `null`. -1. Confirm that the app builds without error. - Correct any errors before you continue to the next step. +1. Confirma que la aplicación se construye sin errores. + Corrige cualquier error antes de continuar al siguiente paso. </docs-step> -<docs-step title="Add the form's markup to the details page"> -This step adds the markup to the details page that displays the form. +<docs-step title="Agrega el marcado del formulario a la página de detalles"> +Este paso agrega el marcado a la página de detalles que muestra el formulario. -In the **Edit** pane of your IDE, in `src/app/details/details.ts`: +En el panel de **Edición** de tu IDE, en `src/app/details/details.ts`: -1. In the `Details` decorator metadata, update the `template` HTML to match the following code to add the form's markup. +1. En los metadatos del decorador `Details`, actualiza el HTML de `template` para que coincida con el siguiente código para agregar el marcado del formulario. - <docs-code language="angular-ts" header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[10,45]"/> + <docs-code language="angular-ts" header="Directiva template en src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[10,45]"/> - The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events. + La plantilla ahora incluye un manejador de eventos `(submit)="submitApplication()"`. Angular usa la sintaxis de paréntesis alrededor del nombre del evento para definir eventos en el código de la plantilla. El código en el lado derecho del signo igual es el código que debe ejecutarse cuando se dispara este evento. Puedes enlazarte a eventos del navegador y eventos personalizados. -1. Confirm that the app builds without error. - Correct any errors before you continue to the next step. +1. Confirma que la aplicación se construye sin errores. + Corrige cualquier error antes de continuar al siguiente paso. -<img alt="details page with a form for applying to live at this location" src="assets/images/tutorials/first-app/homes-app-lesson-12-step-3.png"> +<img alt="página de detalles con un formulario para solicitar vivir en esta ubicación" src="assets/images/tutorials/first-app/homes-app-lesson-12-step-3.png"> </docs-step> -<docs-step title="Test your app's new form"> -This step tests the new form to see that when the form data is submitted to the app, the form data appears in the console log. - -1. In the **Terminal** pane of your IDE, run `ng serve`, if it isn't already running. -1. In your browser, open your app at `http://localhost:4200`. -1. Right click on the app in the browser and from the context menu, choose **Inspect**. -1. In the developer tools window, choose the **Console** tab. - Make sure that the developer tools window is visible for the next steps -1. In your app: - 1. Select a housing location and click **Learn more**, to see details about the house. - 1. In the house's details page, scroll to the bottom to find the new form. - 1. Enter data into the form's fields - any data is fine. - 1. Choose **Apply now** to submit the data. -1. In the developer tools window, review the log output to find your form data. +<docs-step title="Prueba el nuevo formulario de tu aplicación"> +Este paso prueba el nuevo formulario para ver que cuando los datos del formulario se envían a la aplicación, los datos del formulario aparecen en el registro de la consola. + +1. En el panel de **Terminal** de tu IDE, ejecuta `ng serve`, si aún no se está ejecutando. +1. En tu navegador, abre tu aplicación en `http://localhost:4200`. +1. Haz clic derecho en la aplicación en el navegador y desde el menú contextual, elige **Inspeccionar**. +1. En la ventana de herramientas de desarrollador, elige la pestaña **Consola**. + Asegúrate de que la ventana de herramientas de desarrollador sea visible para los siguientes pasos +1. En tu aplicación: + 1. Selecciona una ubicación de vivienda y haz clic en **Learn more**, para ver los detalles de la casa. + 1. En la página de detalles de la casa, desplázate hacia abajo para encontrar el nuevo formulario. + 1. Ingresa datos en los campos del formulario — cualquier dato está bien. + 1. Elige **Apply now** para enviar los datos. +1. En la ventana de herramientas de desarrollador, revisa la salida del registro para encontrar los datos de tu formulario. </docs-step> </docs-workflow> -SUMMARY: In this lesson, you updated your app to add a form using Angular's forms feature, and connect the data captured in the form to a component using an event handler. +RESUMEN: En esta lección, actualizaste tu aplicación para agregar un formulario usando la funcionalidad de formularios de Angular, y conectaste los datos capturados en el formulario a un componente usando un manejador de eventos. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/forms" title="Angular Forms"/> - <docs-pill href="guide/templates/event-listeners" title="Event Handling"/> + <docs-pill href="guide/forms" title="Formularios Angular"/> + <docs-pill href="guide/templates/event-listeners" title="Manejo de Eventos"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/13-search/README.en.md b/adev-es/src/content/tutorials/first-app/steps/13-search/README.en.md new file mode 100644 index 0000000..00d774a --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/13-search/README.en.md @@ -0,0 +1,78 @@ +# Add the search feature to your app + +This tutorial lesson demonstrates how to add a search functionality to your Angular app. + +The app will enable users to search through the data provided by your app and display only the results that match the entered term. + +<docs-video src="https://www.youtube.com/embed/5K10oYJ5Y-E?si=TiuNKx_teR9baO7k&start=457"/> + +IMPORTANT: We recommend using your local environment for this step of the tutorial. + +## What you'll learn + +- Your app will use data from a form to search for matching housing locations +- Your app will display only the matching housing locations + +<docs-workflow> + +<docs-step title="Update the home component properties"> +In this step, you'll update the `Home` class to store data in a new array property that you will use for filtering. + +1. In `src/app/home/home.ts`, add new property to the class called `filteredLocationList`. + + <docs-code header="Add the filteredLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[27]"/> + + The `filteredLocationList` hold the values that match the search criteria entered by the user. + +1. The `filteredLocationList` should contain the total set of housing locations values by default when the page loads. Update the `constructor` for the `Home` to set the value. + + <docs-code header="Set the value of filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[29,32]"/> + +</docs-step> + +<docs-step title="Update the home component template"> +The `Home` already contains an input field that you will use to capture input from the user. That string text will be used to filter the results. + +1. Update the `Home` template to include a template variable in the `input` element called `#filter`. + + <docs-code language="angular-ts" header="Add a template variable to the input HTML element in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/> + This example uses a [template reference variable](guide/templates) to get access to the `input` element as its value. + +1. Next, update the component template to attach an event handler to the "Search" button. + + <docs-code language="angular-ts" header="Bind the button click event to a method in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/> + + By binding to the `click` event on the `button` element, you are able to call the `filterResults` function. The argument to the function is the `value` property of the `filter` template variable. Specifically, the `.value` property from the `input` HTML element. + +1. The last template update is to the `@for` directive. Update the `@for` to iterate over values from the `filteredLocationList` array. + + <docs-code header="Update the @for template directive in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[17,19]" language="html"/> + +</docs-step> + +<docs-step title="Implement the event handler function"> +The template has been updated to bind the `filterResults` function to the `click` event. Next, your task is to implement the `filterResults` function in the `Home` class. + +1. Update the `Home` class to include the implementation of the `filterResults` function. + + <docs-code header="Add the filterResults function implementation" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[34,43]"/> + + This function uses the `String` `filter` function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise. + +1. Save your code. + +1. Refresh the browser and confirm that you can search the housing location data by city when you click the "Search" button after entering text. + +<img alt="filtered search results based on user input" src="assets/images/tutorials/first-app/homes-app-lesson-13-step-3.png"> +</docs-step> + +</docs-workflow> + +SUMMARY: In this lesson, you updated your app to use template variables to interact with template values, and add search functionality using event binding and array functions. + +For more information about the topics covered in this lesson, visit: + +<docs-pill-row> + <docs-pill href="guide/templates" title="Template Variables"/> + <docs-pill href="guide/templates/event-listeners" title="Event Handling"/> +</docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/13-search/README.md b/adev-es/src/content/tutorials/first-app/steps/13-search/README.md index 00d774a..c8a0452 100644 --- a/adev-es/src/content/tutorials/first-app/steps/13-search/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/13-search/README.md @@ -1,78 +1,78 @@ -# Add the search feature to your app +# Agregar la funcionalidad de búsqueda a tu app -This tutorial lesson demonstrates how to add a search functionality to your Angular app. +Esta lección del tutorial demuestra cómo agregar una funcionalidad de búsqueda a tu aplicación Angular. -The app will enable users to search through the data provided by your app and display only the results that match the entered term. +La aplicación permitirá a los usuarios buscar a través de los datos proporcionados por tu aplicación y mostrar solo los resultados que coincidan con el término ingresado. <docs-video src="https://www.youtube.com/embed/5K10oYJ5Y-E?si=TiuNKx_teR9baO7k&start=457"/> -IMPORTANT: We recommend using your local environment for this step of the tutorial. +IMPORTANTE: Recomendamos usar tu entorno local para este paso del tutorial. -## What you'll learn +## ¿Qué aprenderás? -- Your app will use data from a form to search for matching housing locations -- Your app will display only the matching housing locations +- Tu aplicación usará datos de un formulario para buscar ubicaciones de vivienda coincidentes +- Tu aplicación mostrará solo las ubicaciones de vivienda coincidentes <docs-workflow> -<docs-step title="Update the home component properties"> -In this step, you'll update the `Home` class to store data in a new array property that you will use for filtering. +<docs-step title="Actualiza las propiedades del componente home"> +En este paso, actualizarás la clase `Home` para almacenar datos en una nueva propiedad de arreglo que usarás para filtrar. -1. In `src/app/home/home.ts`, add new property to the class called `filteredLocationList`. +1. En `src/app/home/home.ts`, agrega una nueva propiedad a la clase llamada `filteredLocationList`. - <docs-code header="Add the filteredLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[27]"/> + <docs-code header="Agregar la propiedad filteredLocationList en home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[27]"/> - The `filteredLocationList` hold the values that match the search criteria entered by the user. + `filteredLocationList` contiene los valores que coinciden con el criterio de búsqueda ingresado por el usuario. -1. The `filteredLocationList` should contain the total set of housing locations values by default when the page loads. Update the `constructor` for the `Home` to set the value. +1. `filteredLocationList` debería contener el conjunto total de valores de ubicaciones de vivienda por defecto cuando la página se carga. Actualiza el `constructor` de `Home` para establecer el valor. - <docs-code header="Set the value of filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[29,32]"/> + <docs-code header="Establecer el valor de filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[29,32]"/> </docs-step> -<docs-step title="Update the home component template"> -The `Home` already contains an input field that you will use to capture input from the user. That string text will be used to filter the results. +<docs-step title="Actualiza la plantilla del componente home"> +`Home` ya contiene un campo de entrada que usarás para capturar la entrada del usuario. Ese texto string se usará para filtrar los resultados. -1. Update the `Home` template to include a template variable in the `input` element called `#filter`. +1. Actualiza la plantilla de `Home` para incluir una variable de plantilla en el elemento `input` llamada `#filter`. - <docs-code language="angular-ts" header="Add a template variable to the input HTML element in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/> - This example uses a [template reference variable](guide/templates) to get access to the `input` element as its value. + <docs-code language="angular-ts" header="Agregar una variable de plantilla al elemento HTML input en home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/> + Este ejemplo usa una [variable de referencia de plantilla](guide/templates) para obtener acceso al elemento `input` como su valor. -1. Next, update the component template to attach an event handler to the "Search" button. +1. A continuación, actualiza la plantilla del componente para adjuntar un manejador de eventos al botón "Search". - <docs-code language="angular-ts" header="Bind the button click event to a method in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/> + <docs-code language="angular-ts" header="Vincular el evento click del botón a un método en home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/> - By binding to the `click` event on the `button` element, you are able to call the `filterResults` function. The argument to the function is the `value` property of the `filter` template variable. Specifically, the `.value` property from the `input` HTML element. + Al vincular el evento `click` en el elemento `button`, puedes llamar a la función `filterResults`. El argumento de la función es la propiedad `value` de la variable de plantilla `filter`. Específicamente, la propiedad `.value` del elemento HTML `input`. -1. The last template update is to the `@for` directive. Update the `@for` to iterate over values from the `filteredLocationList` array. +1. La última actualización de la plantilla es para la directiva `@for`. Actualiza `@for` para iterar sobre valores del arreglo `filteredLocationList`. - <docs-code header="Update the @for template directive in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[17,19]" language="html"/> + <docs-code header="Actualizar la directiva de plantilla @for en home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[17,19]" language="html"/> </docs-step> -<docs-step title="Implement the event handler function"> -The template has been updated to bind the `filterResults` function to the `click` event. Next, your task is to implement the `filterResults` function in the `Home` class. +<docs-step title="Implementa la función manejadora de eventos"> +La plantilla ha sido actualizada para vincular la función `filterResults` al evento `click`. A continuación, tu tarea es implementar la función `filterResults` en la clase `Home`. -1. Update the `Home` class to include the implementation of the `filterResults` function. +1. Actualiza la clase `Home` para incluir la implementación de la función `filterResults`. - <docs-code header="Add the filterResults function implementation" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[34,43]"/> + <docs-code header="Agregar la implementación de la función filterResults" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[34,43]"/> - This function uses the `String` `filter` function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise. + Esta función usa la función `filter` de `String` para comparar el valor del parámetro `text` contra la propiedad `housingLocation.city`. Puedes actualizar esta función para que coincida con cualquier propiedad o múltiples propiedades como ejercicio divertido. -1. Save your code. +1. Guarda tu código. -1. Refresh the browser and confirm that you can search the housing location data by city when you click the "Search" button after entering text. +1. Actualiza el navegador y confirma que puedes buscar los datos de ubicaciones de vivienda por ciudad cuando haces clic en el botón "Search" después de ingresar texto. -<img alt="filtered search results based on user input" src="assets/images/tutorials/first-app/homes-app-lesson-13-step-3.png"> +<img alt="resultados de búsqueda filtrados basados en la entrada del usuario" src="assets/images/tutorials/first-app/homes-app-lesson-13-step-3.png"> </docs-step> </docs-workflow> -SUMMARY: In this lesson, you updated your app to use template variables to interact with template values, and add search functionality using event binding and array functions. +RESUMEN: En esta lección, actualizaste tu aplicación para usar variables de plantilla para interactuar con valores de plantilla, y agregaste funcionalidad de búsqueda usando enlace de eventos y funciones de arreglo. -For more information about the topics covered in this lesson, visit: +Para obtener más información sobre los temas cubiertos en esta lección, visita: <docs-pill-row> - <docs-pill href="guide/templates" title="Template Variables"/> - <docs-pill href="guide/templates/event-listeners" title="Event Handling"/> + <docs-pill href="guide/templates" title="Variables de Plantilla"/> + <docs-pill href="guide/templates/event-listeners" title="Manejo de Eventos"/> </docs-pill-row> diff --git a/adev-es/src/content/tutorials/first-app/steps/14-http/README.en.md b/adev-es/src/content/tutorials/first-app/steps/14-http/README.en.md new file mode 100644 index 0000000..57d30cf --- /dev/null +++ b/adev-es/src/content/tutorials/first-app/steps/14-http/README.en.md @@ -0,0 +1,207 @@ +# Add HTTP communication to your app + +This tutorial demonstrates how to integrate HTTP and an API into your app. + +Up until this point your app has read data from a static array in an Angular service. The next step is to use a JSON server that your app will communicate with over HTTP. The HTTP request will simulate the experience of working with data from a server. + +<docs-video src="https://www.youtube.com/embed/5K10oYJ5Y-E?si=TiuNKx_teR9baO7k"/> + +IMPORTANT: We recommend using your local environment for this step of the tutorial. + +## What you'll learn + +Your app will use data from a JSON server + +<docs-workflow> + +<docs-step title="Configure the JSON server"> +JSON Server is an open source tool used to create mock REST APIs. You'll use it to serve the housing location data that is currently stored in the housing service. + +1. Install `json-server` from npm by using the following command. + + ```bash + npm install -g json-server + ``` + +1. In the root directory of your project, create a file called `db.json`. This is where you will store the data for the `json-server`. + +1. Open `db.json` and copy the following code into the file + + ```json + { + "locations": [ + { + "id": 0, + "name": "Acme Fresh Start Housing", + "city": "Chicago", + "state": "IL", + "photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg", + "availableUnits": 4, + "wifi": true, + "laundry": true + }, + { + "id": 1, + "name": "A113 Transitional Housing", + "city": "Santa Monica", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg", + "availableUnits": 0, + "wifi": false, + "laundry": true + }, + { + "id": 2, + "name": "Warm Beds Housing Support", + "city": "Juneau", + "state": "AK", + "photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg", + "availableUnits": 1, + "wifi": false, + "laundry": false + }, + { + "id": 3, + "name": "Homesteady Housing", + "city": "Chicago", + "state": "IL", + "photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg", + "availableUnits": 1, + "wifi": true, + "laundry": false + }, + { + "id": 4, + "name": "Happy Homes Group", + "city": "Gary", + "state": "IN", + "photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg", + "availableUnits": 1, + "wifi": true, + "laundry": false + }, + { + "id": 5, + "name": "Hopeful Apartment Group", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg", + "availableUnits": 2, + "wifi": true, + "laundry": true + }, + { + "id": 6, + "name": "Seriously Safe Towns", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg", + "availableUnits": 5, + "wifi": true, + "laundry": true + }, + { + "id": 7, + "name": "Hopeful Housing Solutions", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg", + "availableUnits": 2, + "wifi": true, + "laundry": true + }, + { + "id": 8, + "name": "Seriously Safe Towns", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg", + "availableUnits": 10, + "wifi": false, + "laundry": false + }, + { + "id": 9, + "name": "Capital Safe Towns", + "city": "Portland", + "state": "OR", + "photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg", + "availableUnits": 6, + "wifi": true, + "laundry": true + } + ] + } + ``` + +1. Save this file. + +1. Time to test your configuration. From the command line, at the root of your project run the following commands. + +```bash +json-server --watch db.json +``` + +1. In your web browser, navigate to the `http://localhost:3000/locations` and confirm that the response includes the data stored in `db.json`. + +If you have any trouble with your configuration, you can find more details in the [official documentation](https://www.npmjs.com/package/json-server). +</docs-step> + +<docs-step title="Update service to use web server instead of local array"> +The data source has been configured, the next step is to update your web app to connect to it use the data. + +1. In `src/app/housing.service.ts`, make the following changes: + +1. Update the code to remove `housingLocationList` property and the array containing the data, as well as the `baseUrl` property. + +1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'` + + <docs-code header="Add url property to housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8]"/> + + This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next. + +1. Update the `getAllHousingLocations` function to make a call to the web server you configured. + + <docs-code header="Update the getAllHousingLocations method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/> + + The code now uses asynchronous code to make a **GET** request over HTTP. + + HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular. + +1. Update the `getHousingLocationsById` function to make a call to the web server you configured. + + HELPFUL: Notice the `fetch` method has been updated to _query_ the data for location with a matching `id` property value. See [URL Search Parameter](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) for more information. + + <docs-code header="Update the getHousingLocationById method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,19]"/> + +1. Once all the updates are complete, your updated service should match the following code. + +<docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" /> + +</docs-step> + +<docs-step title="Update the components to use asynchronous calls to the housing service"> +The server is now reading data from the HTTP request but the components that rely on the service now have errors because they were programmed to use the synchronous version of the service. + +1. In `src/app/home/home.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method. + +<docs-code header="Update constructor in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.ts" visibleLines="[29,36]"/> + +1. In `src/app/details/details.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method. + +<docs-code header="Update constructor in details.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.ts" visibleLines="[59,64]"/> + +1. Save your code. + +1. Open the application in the browser and confirm that it runs without any errors. + </docs-step> + +</docs-workflow> + +NOTE: This lesson relies on the `fetch` browser API. For the support of interceptors, please refer to the [Http Client documentation](/guide/http) + +SUMMARY: In this lesson, you updated your app to use a local web server (`json-server`), and use asynchronous service methods to retrieve data. + +Congratulations! You've successfully completed this tutorial and are ready to continue your journey with building even more complex Angular Apps. + +If you would like to learn more, please consider completing some of Angular's other developer [tutorials](tutorials) and [guides](overview). diff --git a/adev-es/src/content/tutorials/first-app/steps/14-http/README.md b/adev-es/src/content/tutorials/first-app/steps/14-http/README.md index 57d30cf..7d8cd1c 100644 --- a/adev-es/src/content/tutorials/first-app/steps/14-http/README.md +++ b/adev-es/src/content/tutorials/first-app/steps/14-http/README.md @@ -1,31 +1,31 @@ -# Add HTTP communication to your app +# Agregar comunicación HTTP a tu app -This tutorial demonstrates how to integrate HTTP and an API into your app. +Este tutorial demuestra cómo integrar HTTP y una API en tu aplicación. -Up until this point your app has read data from a static array in an Angular service. The next step is to use a JSON server that your app will communicate with over HTTP. The HTTP request will simulate the experience of working with data from a server. +Hasta este punto, tu aplicación ha leído datos de un arreglo estático en un servicio Angular. El siguiente paso es usar un servidor JSON con el que tu aplicación se comunicará a través de HTTP. La solicitud HTTP simulará la experiencia de trabajar con datos de un servidor. <docs-video src="https://www.youtube.com/embed/5K10oYJ5Y-E?si=TiuNKx_teR9baO7k"/> -IMPORTANT: We recommend using your local environment for this step of the tutorial. +IMPORTANTE: Recomendamos usar tu entorno local para este paso del tutorial. -## What you'll learn +## ¿Qué aprenderás? -Your app will use data from a JSON server +Tu aplicación usará datos de un servidor JSON <docs-workflow> -<docs-step title="Configure the JSON server"> -JSON Server is an open source tool used to create mock REST APIs. You'll use it to serve the housing location data that is currently stored in the housing service. +<docs-step title="Configura el servidor JSON"> +JSON Server es una herramienta de código abierto usada para crear APIs REST simuladas. Lo usarás para servir los datos de ubicación de vivienda que actualmente están almacenados en el servicio de vivienda. -1. Install `json-server` from npm by using the following command. +1. Instala `json-server` desde npm usando el siguiente comando. ```bash npm install -g json-server ``` -1. In the root directory of your project, create a file called `db.json`. This is where you will store the data for the `json-server`. +1. En el directorio raíz de tu proyecto, crea un archivo llamado `db.json`. Aquí es donde almacenarás los datos para el `json-server`. -1. Open `db.json` and copy the following code into the file +1. Abre `db.json` y copia el siguiente código en el archivo ```json { @@ -134,74 +134,74 @@ JSON Server is an open source tool used to create mock REST APIs. You'll use it } ``` -1. Save this file. +1. Guarda este archivo. -1. Time to test your configuration. From the command line, at the root of your project run the following commands. +1. Es hora de probar tu configuración. Desde la línea de comandos, en la raíz de tu proyecto, ejecuta los siguientes comandos. ```bash json-server --watch db.json ``` -1. In your web browser, navigate to the `http://localhost:3000/locations` and confirm that the response includes the data stored in `db.json`. +1. En tu navegador web, navega a `http://localhost:3000/locations` y confirma que la respuesta incluya los datos almacenados en `db.json`. -If you have any trouble with your configuration, you can find more details in the [official documentation](https://www.npmjs.com/package/json-server). +Si tienes algún problema con tu configuración, puedes encontrar más detalles en la [documentación oficial](https://www.npmjs.com/package/json-server). </docs-step> -<docs-step title="Update service to use web server instead of local array"> -The data source has been configured, the next step is to update your web app to connect to it use the data. +<docs-step title="Actualiza el servicio para usar el servidor web en lugar del arreglo local"> +La fuente de datos ha sido configurada, el siguiente paso es actualizar tu aplicación web para conectarse a ella y usar los datos. -1. In `src/app/housing.service.ts`, make the following changes: +1. En `src/app/housing.service.ts`, realiza los siguientes cambios: -1. Update the code to remove `housingLocationList` property and the array containing the data, as well as the `baseUrl` property. +1. Actualiza el código para eliminar la propiedad `housingLocationList` y el arreglo que contiene los datos, así como la propiedad `baseUrl`. -1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'` +1. Agrega una propiedad string llamada `url` y establece su valor en `'http://localhost:3000/locations'` - <docs-code header="Add url property to housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8]"/> + <docs-code header="Agregar propiedad url a housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8]"/> - This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next. + Este código resultará en errores en el resto del archivo porque depende de la propiedad `housingLocationList`. Vamos a actualizar los métodos del servicio a continuación. -1. Update the `getAllHousingLocations` function to make a call to the web server you configured. +1. Actualiza la función `getAllHousingLocations` para hacer una llamada al servidor web que configuraste. - <docs-code header="Update the getAllHousingLocations method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/> + <docs-code header="Actualizar el método getAllHousingLocations en housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/> - The code now uses asynchronous code to make a **GET** request over HTTP. + El código ahora usa código asíncrono para hacer una solicitud **GET** a través de HTTP. - HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular. + ÚTIL: Para este ejemplo, el código usa `fetch`. Para casos de uso más avanzados, considera usar `HttpClient` proporcionado por Angular. -1. Update the `getHousingLocationsById` function to make a call to the web server you configured. +1. Actualiza la función `getHousingLocationsById` para hacer una llamada al servidor web que configuraste. - HELPFUL: Notice the `fetch` method has been updated to _query_ the data for location with a matching `id` property value. See [URL Search Parameter](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) for more information. + ÚTIL: Observa que el método `fetch` ha sido actualizado para _consultar_ los datos de una ubicación con un valor de propiedad `id` coincidente. Consulta [Parámetro de Búsqueda en URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) para más información. - <docs-code header="Update the getHousingLocationById method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,19]"/> + <docs-code header="Actualizar el método getHousingLocationById en housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,19]"/> -1. Once all the updates are complete, your updated service should match the following code. +1. Una vez que todas las actualizaciones estén completas, tu servicio actualizado debería coincidir con el siguiente código. -<docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" /> +<docs-code header="Versión final de housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" /> </docs-step> -<docs-step title="Update the components to use asynchronous calls to the housing service"> -The server is now reading data from the HTTP request but the components that rely on the service now have errors because they were programmed to use the synchronous version of the service. +<docs-step title="Actualiza los componentes para usar llamadas asíncronas al servicio de vivienda"> +El servidor ahora está leyendo datos desde la solicitud HTTP, pero los componentes que dependen del servicio ahora tienen errores porque fueron programados para usar la versión síncrona del servicio. -1. In `src/app/home/home.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method. +1. En `src/app/home/home.ts`, actualiza el `constructor` para usar la nueva versión asíncrona del método `getAllHousingLocations`. -<docs-code header="Update constructor in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.ts" visibleLines="[29,36]"/> +<docs-code header="Actualizar constructor en home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.ts" visibleLines="[29,36]"/> -1. In `src/app/details/details.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method. +1. En `src/app/details/details.ts`, actualiza el `constructor` para usar la nueva versión asíncrona del método `getHousingLocationById`. -<docs-code header="Update constructor in details.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.ts" visibleLines="[59,64]"/> +<docs-code header="Actualizar constructor en details.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.ts" visibleLines="[59,64]"/> -1. Save your code. +1. Guarda tu código. -1. Open the application in the browser and confirm that it runs without any errors. +1. Abre la aplicación en el navegador y confirma que se ejecuta sin errores. </docs-step> </docs-workflow> -NOTE: This lesson relies on the `fetch` browser API. For the support of interceptors, please refer to the [Http Client documentation](/guide/http) +NOTA: Esta lección depende de la API `fetch` del navegador. Para soporte de interceptores, consulta la [documentación de HttpClient](/guide/http) -SUMMARY: In this lesson, you updated your app to use a local web server (`json-server`), and use asynchronous service methods to retrieve data. +RESUMEN: En esta lección, actualizaste tu aplicación para usar un servidor web local (`json-server`) y usar métodos de servicio asíncronos para recuperar datos. -Congratulations! You've successfully completed this tutorial and are ready to continue your journey with building even more complex Angular Apps. +¡Felicitaciones! Has completado exitosamente este tutorial y estás listo para continuar tu viaje construyendo aplicaciones Angular aún más complejas. -If you would like to learn more, please consider completing some of Angular's other developer [tutorials](tutorials) and [guides](overview). +Si deseas aprender más, considera completar algunos de los otros [tutoriales](tutorials) y [guías](overview) de Angular para desarrolladores.