From 6ff6acbb21b40585d531ca1bc90ae2ce260513c1 Mon Sep 17 00:00:00 2001 From: Antonio Cardenas Date: Sun, 1 Nov 2020 02:34:26 -0600 Subject: [PATCH] docs: translate tutorial/toh-pt1.md (#278) Closes #74 --- aio/content/tutorial/toh-pt1.en.md | 245 +++++++++++++++++++++++++++++ aio/content/tutorial/toh-pt1.md | 220 +++++++++++++------------- 2 files changed, 354 insertions(+), 111 deletions(-) create mode 100644 aio/content/tutorial/toh-pt1.en.md diff --git a/aio/content/tutorial/toh-pt1.en.md b/aio/content/tutorial/toh-pt1.en.md new file mode 100644 index 0000000000..777105a2ba --- /dev/null +++ b/aio/content/tutorial/toh-pt1.en.md @@ -0,0 +1,245 @@ +# The hero editor + +The application now has a basic title. +Next you will create a new component to display hero information +and place that component in the application shell. + +
+ + For the sample app that this page describes, see the . + +
+ +## Create the heroes component + +Using the Angular CLI, generate a new component named `heroes`. + + + ng generate component heroes + + +The CLI creates a new folder, `src/app/heroes/`, and generates +the three files of the `HeroesComponent` along with a test file. + +The `HeroesComponent` class file is as follows: + + + +You always import the `Component` symbol from the Angular core library +and annotate the component class with `@Component`. + +`@Component` is a decorator function that specifies the Angular metadata for the component. + +The CLI generated three metadata properties: + +1. `selector`— the component's CSS element selector +1. `templateUrl`— the location of the component's template file. +1. `styleUrls`— the location of the component's private CSS styles. + +{@a selector} + +The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors), +`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template. + +The `ngOnInit()` is a [lifecycle hook](guide/lifecycle-hooks#oninit). +Angular calls `ngOnInit()` shortly after creating a component. +It's a good place to put initialization logic. + +Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`. + +### Add a `hero` property + +Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm." + + + +### Show the hero + +Open the `heroes.component.html` template file. +Delete the default text generated by the Angular CLI and +replace it with a data binding to the new `hero` property. + + + +## Show the `HeroesComponent` view + +To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`. + +Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`. +So add an `` element to the `AppComponent` template file, just below the title. + + + +Assuming that the CLI `ng serve` command is still running, +the browser should refresh and display both the application title and the hero name. + +## Create a Hero interface + +A real hero is more than a name. + +Create a `Hero` interface in its own file in the `src/app` folder. +Give it `id` and `name` properties. + + + + +Return to the `HeroesComponent` class and import the `Hero` interface. + +Refactor the component's `hero` property to be of type `Hero`. +Initialize it with an `id` of `1` and the name `Windstorm`. + +The revised `HeroesComponent` class file should look like this: + + + +The page no longer displays properly because you changed the hero from a string to an object. + +## Show the hero object + +Update the binding in the template to announce the hero's name +and show both `id` and `name` in a details layout like this: + + + +The browser refreshes and displays the hero's information. + +## Format with the _UppercasePipe_ + +Modify the `hero.name` binding like this. + + + +The browser refreshes and now the hero's name is displayed in capital letters. + +The word `uppercase` in the interpolation binding, +right after the pipe operator ( | ), +activates the built-in `UppercasePipe`. + +[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data. +Angular ships with several built-in pipes and you can create your own. + +## Edit the hero + +Users should be able to edit the hero name in an `` textbox. + +The textbox should both _display_ the hero's `name` property +and _update_ that property as the user types. +That means data flows from the component class _out to the screen_ and +from the screen _back to the class_. + +To automate that data flow, setup a two-way data binding between the `` form element and the `hero.name` property. + +### Two-way binding + +Refactor the details area in the `HeroesComponent` template so it looks like this: + + + +**[(ngModel)]** is Angular's two-way data binding syntax. + +Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`. + +### The missing _FormsModule_ + +Notice that the app stopped working when you added `[(ngModel)]`. + +To see the error, open the browser development tools and look in the console +for a message like + + +Template parse errors: +Can't bind to 'ngModel' since it isn't a known property of 'input'. + + +Although `ngModel` is a valid Angular directive, it isn't available by default. + +It belongs to the optional `FormsModule` and you must _opt-in_ to using it. + +## _AppModule_ + +Angular needs to know how the pieces of your application fit together +and what other files and libraries the app requires. +This information is called _metadata_. + +Some of the metadata is in the `@Component` decorators that you added to your component classes. +Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators. + +The most important `@NgModule` decorator annotates the top-level **AppModule** class. + +The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project. +This is where you _opt-in_ to the `FormsModule`. + +### Import _FormsModule_ + +Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library. + + + + +Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs. + + + + +When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `

` above the textbox. + +### Declare `HeroesComponent` + +Every component must be declared in _exactly one_ [NgModule](guide/ngmodules). + +_You_ didn't declare the `HeroesComponent`. +So why did the application work? + +It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component. + +Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top. + + + +The `HeroesComponent` is declared in the `@NgModule.declarations` array. + + + +Note that `AppModule` declares both application components, `AppComponent` and `HeroesComponent`. + + +## Final code review + +Here are the code files discussed on this page. + + + + + + + + + + + + + + + + + + + + + + + +## Summary + +* You used the CLI to create a second `HeroesComponent`. +* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell. +* You applied the `UppercasePipe` to format the name. +* You used two-way data binding with the `ngModel` directive. +* You learned about the `AppModule`. +* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive. +* You learned the importance of declaring components in the `AppModule` +and appreciated that the CLI declared it for you. diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md index 777105a2ba..12754c16a2 100644 --- a/aio/content/tutorial/toh-pt1.md +++ b/aio/content/tutorial/toh-pt1.md @@ -1,213 +1,213 @@ -# The hero editor +# El editor de Héroe -The application now has a basic title. -Next you will create a new component to display hero information -and place that component in the application shell. +Se ha agregado un título básico a la aplicación. +Luego crea un nuevo componente para mostrar la información del héroe, +Coloca el componente en el (app shell) de la aplicación.
- For the sample app that this page describes, see the . + Para ver la aplicación de ejemplo que describe esta página, consulta el .
-## Create the heroes component +## Crear un componente de héroes -Using the Angular CLI, generate a new component named `heroes`. +Usa la CLI angular para generar un nuevo componente llamado `heroes`. ng generate component heroes -The CLI creates a new folder, `src/app/heroes/`, and generates -the three files of the `HeroesComponent` along with a test file. +CLI crea una nueva carpeta llamada `src/app/heroes/`, y +genera tres archivos sobre `HeroesComponent` junto un archivo de prueba. -The `HeroesComponent` class file is as follows: +El archivo de la clase `HeroesComponent` es el siguiente. -You always import the `Component` symbol from the Angular core library -and annotate the component class with `@Component`. +Siempre Importa el símbolo `Component` de la biblioteca pricipal de Angular, y realiza la anotación a la clase del component con `@Component`. -`@Component` is a decorator function that specifies the Angular metadata for the component. +`@Component` es una decoradoro que especifica metadatos Angular para un +componente. -The CLI generated three metadata properties: +La CLI generó 3 propiedades de metadatos: -1. `selector`— the component's CSS element selector -1. `templateUrl`— the location of the component's template file. -1. `styleUrls`— the location of the component's private CSS styles. +1. `selector`— El selector de elementos CSS para el componente +1. `templateUrl`— La ubicación del archivo plantilla para el componente +1. `styleUrls`— La ubicación de los estilos CSS privados del componente. {@a selector} -The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors), -`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template. +El [Selector de elementos CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) +`'app-heroes'`, coincide con el nombre del elemento HTML que identifica este componente en el componente padre Plantillas. -The `ngOnInit()` is a [lifecycle hook](guide/lifecycle-hooks#oninit). -Angular calls `ngOnInit()` shortly after creating a component. -It's a good place to put initialization logic. +El `ngOnInit()` es un [gancho de ciclo de vida](guide/lifecycle-hooks#oninit) ("lifecycle hook") . Angular llama a `ngOnInit()` inmediatamente después de crear el componente. +Adecuado para poner la lógica de inicialización. -Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`. +Siempre `exporta` la clase de componente, por lo que siempre puede `importarla` en otro lugar, como un `AppModule`. -### Add a `hero` property +### Agrega la propiedad `hero` -Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm." +Agrega una propiedad `hero` al `HeroesComponent` para un héroe llamado "Windstorm". -### Show the hero +### Mostrar el héroe -Open the `heroes.component.html` template file. -Delete the default text generated by the Angular CLI and -replace it with a data binding to the new `hero` property. +Abre el archivo de plantilla `heroes.component.html`. +Elimina el texto predeterminado generado por CLI angular, +Reemplaza con un enlace de datos a la nueva propiedad `hero`. -## Show the `HeroesComponent` view +## Mostrar la vista `HeroesComponent` -To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`. +Para ver el `HeroesComponent`, debe agregarlo a las Plantillas en el `AppComponent` del shell de tu aplicación. -Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`. -So add an `` element to the `AppComponent` template file, just below the title. +Recuerda que `app-heroes` es el [selector de elemento](#selector) del `HeroesComponent`. +Entonces, en el archivo Plantillas de `AppComponent`, agrega el elemento `` directamente debajo del título. -Assuming that the CLI `ng serve` command is still running, -the browser should refresh and display both the application title and the hero name. +Si el comando CLI `ng serve` todavía se está ejecutando, +El navegador se actualiza para mostrar el título de la aplicación y el nombre del héroe. -## Create a Hero interface +## Crear interfaz de héroe -A real hero is more than a name. +Un héroe es más que un nombre. -Create a `Hero` interface in its own file in the `src/app` folder. -Give it `id` and `name` properties. +Crea una interfaz `Hero` en su propio archivo en la carpeta `src/app`. +Dale una propiedad `id` y una propiedad `name`. -Return to the `HeroesComponent` class and import the `Hero` interface. +Regresa a la clase `HeroesComponent` e importe la interfaz `Hero`. -Refactor the component's `hero` property to be of type `Hero`. -Initialize it with an `id` of `1` and the name `Windstorm`. +Refactoriza la propiedad de héroe del componente para que sea del tipo 'Héroe'. +Inicialízalo con un `id` de `1` y un nombre de `Windstorm`. -The revised `HeroesComponent` class file should look like this: +El archivo de clase revisado `HeroesComponent` se ve así: -The page no longer displays properly because you changed the hero from a string to an object. +Cambió el héroe de texto a un objeto, lo que provocó que la página se mostrara incorrectamente. -## Show the hero object +## Mostrar objeto de héroe -Update the binding in the template to announce the hero's name -and show both `id` and `name` in a details layout like this: +Actualiza los enlaces de Plantillas para anunciar el nombre del héroe, +Muestra tanto el `id` como el `name` con un diseño detallado como este: -The browser refreshes and displays the hero's information. +El navegador se actualiza para mostrar la información del héroe. -## Format with the _UppercasePipe_ +## Formatea con _UppercasePipe_ -Modify the `hero.name` binding like this. +Modifica el enlace para `hero.name` de esta manera: -The browser refreshes and now the hero's name is displayed in capital letters. +El navegador se actualizará para mostrar el nombre del héroe en mayúsculas. -The word `uppercase` in the interpolation binding, -right after the pipe operator ( | ), -activates the built-in `UppercasePipe`. +En el enlace de interpolación, la palabra `mayúscula` inmediatamente después del operador pipe (|) es +Inicie el 'UppercasePipe' incorporado. -[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data. -Angular ships with several built-in pipes and you can create your own. +[pipe](guide/pipes) ("pipe") Es adecuado para formatear cadenas, importes monetarios, fechas y otros datos de visualización. +Angular viene con múltiples pipes incorporadas, y puede crear las suyas propias. -## Edit the hero +## Editar el héroe -Users should be able to edit the hero name in an `` textbox. +El usuario debe poder editar el nombre del héroe en el cuadro de texto ``. -The textbox should both _display_ the hero's `name` property -and _update_ that property as the user types. -That means data flows from the component class _out to the screen_ and -from the screen _back to the class_. +En el cuadro de texto, la propiedad `name` del héroe se muestra _, +La propiedad se actualiza según los tipos de usuario. +Esto es de la clase de componente a _screen_, +Y significa el flujo de datos desde la pantalla a la clase de componente. -To automate that data flow, setup a two-way data binding between the `` form element and the `hero.name` property. +Para automatizar ese flujo de datos, configure un enlace de datos bidireccional entre el elemento de formulario `` y la propiedad `hero.name`. -### Two-way binding +### Enlace de datos bidireccional -Refactor the details area in the `HeroesComponent` template so it looks like this: +Refactorizando el área de detalle de las Plantas `HeroesComponent` se ve así: -**[(ngModel)]** is Angular's two-way data binding syntax. +**[(ngModel)]** Es la sintaxis de enlace de datos bidireccional de Angular. -Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`. +Esto vinculará la propiedad `hero.name` al cuadro de texto HTML, por lo que +Puede pasar datos _en ambas direcciones_ desde la propiedad `hero.name` al cuadro de texto y desde el cuadro de texto a la propiedad `hero.name`. -### The missing _FormsModule_ +### _FormsModule_ No encontrado -Notice that the app stopped working when you added `[(ngModel)]`. +Observa que la aplicación dejó de funcionar cuando agregué el `[(ngModel)]`. -To see the error, open the browser development tools and look in the console -for a message like +Para ver el error, abre las herramientas de desarrollo de su navegador, +Busca mensajes como el siguiente en la consola, -Template parse errors: -Can't bind to 'ngModel' since it isn't a known property of 'input'. +Errores de análisis de plantilla: +No se puede vincular a 'nGModelo' ya que no es una propiedad conocida de 'entrada'. -Although `ngModel` is a valid Angular directive, it isn't available by default. +`ngModel` Es una directiva angular válida pero no está disponible por defecto. -It belongs to the optional `FormsModule` and you must _opt-in_ to using it. +Pertenece al `FormsModule` opcional y debe optar por ese módulo para usarlo. ## _AppModule_ -Angular needs to know how the pieces of your application fit together -and what other files and libraries the app requires. -This information is called _metadata_. +En Angular, cómo encajan las partes de la aplicación, +Necesita saber qué otros archivos y bibliotecas necesita su aplicación. +Esta información se llama _metadata_. -Some of the metadata is in the `@Component` decorators that you added to your component classes. -Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators. +Algunos de los metadatos se encuentran en el decorador `@Component` que agregó a su clase de componentes. +Otros metadatos importantes son[`@NgModule`](guide/ngmodules)Está en el decorador. -The most important `@NgModule` decorator annotates the top-level **AppModule** class. +El decorador más importante `@NgModule` anota la clase **AppModule** de nivel superior. -The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project. -This is where you _opt-in_ to the `FormsModule`. +Angular CLI creó la clase `AppModule` en `src/app/app.module.ts` al crear el proyecto. +Ahora opta por el `FormsModule`. -### Import _FormsModule_ +### Importar _FormsModule_ -Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library. +Abre `AppModule` (`app.module.ts`) e importe el símbolo `FormsModule` desde la biblioteca `@angular/forms`. - -Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs. +A continuación, agregue el `FormsModule` a el arreglo `imports` de los metadatos `@ NgModule`. +Esta matriz contiene una lista de módulos externos que requiere su aplicación. - -When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `

` above the textbox. +La aplicación debería funcionar nuevamente cuando se actualice el navegador. Puedes editar el nombre del héroe y ver los cambios reflejados inmediatamente en el `

` arriba del cuadro de texto. -### Declare `HeroesComponent` +### Declarar `HeroesComponent` -Every component must be declared in _exactly one_ [NgModule](guide/ngmodules). +Todos los componentes deben declararse con _exactamente uno_ [NgModule](guide/ngmodules). -_You_ didn't declare the `HeroesComponent`. -So why did the application work? +_No has declarado_ HeroesComponent`. +Entonces, ¿por qué funcionó la aplicación? -It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component. +La aplicación funcionó porque Angular CLI declaró el componente en el `AppModule` cuando generó el `HeroesComponent`. + +Abra `src/app/app.module.ts` y encuentre el `HeroesComponent` importado cerca de la parte superior. -Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top. -The `HeroesComponent` is declared in the `@NgModule.declarations` array. +`HeroesComponent` se declara en la matriz`@NgModule.declarations`. -Note that `AppModule` declares both application components, `AppComponent` and `HeroesComponent`. +`AppModule` declara los componentes de aplicación `AppComponent` y `HeroesComponent`. +## Revisión del código final -## Final code review - -Here are the code files discussed on this page. +Los archivos de código descritos en esta página son: @@ -217,7 +217,7 @@ Here are the code files discussed on this page. - @@ -232,14 +232,12 @@ Here are the code files discussed on this page. +## Resumen -## Summary - -* You used the CLI to create a second `HeroesComponent`. -* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell. -* You applied the `UppercasePipe` to format the name. -* You used two-way data binding with the `ngModel` directive. -* You learned about the `AppModule`. -* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive. -* You learned the importance of declaring components in the `AppModule` -and appreciated that the CLI declared it for you. +* Creo un segundo `HeroesComponent` usando el CLI. +* Agregó `HeroesComponent` al shell de `AppComponent` y lo mostró. +* Aplico 'UppercasePipe' para formatear el nombre. +* Utilizo el enlace de datos bidireccional en la directiva `ngModel`. +* Aprendío sobre `AppModule`. +* Importó `FormsModule` en `AppModule` para reconocer y aplicar la directiva Angular `ngModel`. +* Aprendío la importancia de declarar un componente en un `AppModule` y me di cuenta de que la CLI está haciendo esa declaración por usted.