Antonio Cardenas
GitHub
parent
8a09cb9794
commit
6ff6acbb21
245
aio/content/tutorial/toh-pt1.en.md
Normal file
245
aio/content/tutorial/toh-pt1.en.md
Normal file
@ -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.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For the sample app that this page describes, see the <live-example></live-example>.
|
||||
|
||||
</div>
|
||||
|
||||
## Create the heroes component
|
||||
|
||||
Using the Angular CLI, generate a new component named `heroes`.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate component heroes
|
||||
</code-example>
|
||||
|
||||
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:
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" header="app/heroes/heroes.component.ts (initial version)"></code-example>
|
||||
|
||||
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."
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" header="heroes.component.ts (hero property)"></code-example>
|
||||
|
||||
### 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.
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" header="heroes.component.html" region="show-hero-1"></code-example>
|
||||
|
||||
## 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 `<app-heroes>` element to the `AppComponent` template file, just below the title.
|
||||
|
||||
<code-example path="toh-pt1/src/app/app.component.html" header="src/app/app.component.html"></code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example path="toh-pt1/src/app/hero.ts" header="src/app/hero.ts"></code-example>
|
||||
|
||||
|
||||
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:
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts"></code-example>
|
||||
|
||||
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:
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="show-hero-2" header="heroes.component.html (HeroesComponent's template)"></code-example>
|
||||
|
||||
The browser refreshes and displays the hero's information.
|
||||
|
||||
## Format with the _UppercasePipe_
|
||||
|
||||
Modify the `hero.name` binding like this.
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.html" header="src/app/heroes/heroes.component.html" region="pipe">
|
||||
</code-example>
|
||||
|
||||
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 `<input>` 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 `<input>` form element and the `hero.name` property.
|
||||
|
||||
### Two-way binding
|
||||
|
||||
Refactor the details area in the `HeroesComponent` template so it looks like this:
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" header="src/app/heroes/heroes.component.html (HeroesComponent's template)"></code-example>
|
||||
|
||||
**[(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
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
Template parse errors:
|
||||
Can't bind to 'ngModel' since it isn't a known property of 'input'.
|
||||
</code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (FormsModule symbol import)"
|
||||
region="formsmodule-js-import">
|
||||
</code-example>
|
||||
|
||||
Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
|
||||
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (@NgModule imports)"
|
||||
region="ng-imports">
|
||||
</code-example>
|
||||
|
||||
When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` 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.
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="heroes-import" >
|
||||
</code-example>
|
||||
|
||||
The `HeroesComponent` is declared in the `@NgModule.declarations` array.
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="declarations">
|
||||
</code-example>
|
||||
|
||||
Note that `AppModule` declares both application components, `AppComponent` and `HeroesComponent`.
|
||||
|
||||
|
||||
## Final code review
|
||||
|
||||
Here are the code files discussed on this page.
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt1/src/app/heroes/heroes.component.ts">
|
||||
</code-pane>
|
||||
|
||||
<code-pane header="src/app/heroes/heroes.component.html" path="toh-pt1/src/app/heroes/heroes.component.html">
|
||||
</code-pane>
|
||||
|
||||
<code-pane header="src/app/app.module.ts"
|
||||
path="toh-pt1/src/app/app.module.ts">
|
||||
</code-pane>
|
||||
|
||||
<code-pane header="src/app/app.component.ts" path="toh-pt1/src/app/app.component.ts">
|
||||
</code-pane>
|
||||
|
||||
<code-pane header="src/app/app.component.html" path="toh-pt1/src/app/app.component.html">
|
||||
</code-pane>
|
||||
|
||||
<code-pane header="src/app/hero.ts"
|
||||
path="toh-pt1/src/app/hero.ts">
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
## 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.
|
||||
@ -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.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For the sample app that this page describes, see the <live-example></live-example>.
|
||||
Para ver la aplicación de ejemplo que describe esta página, consulta el <live-example></live-example>.
|
||||
|
||||
</div>
|
||||
|
||||
## 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`.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate component heroes
|
||||
</code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" header="app/heroes/heroes.component.ts (initial version)"></code-example>
|
||||
|
||||
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".
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" header="heroes.component.ts (hero property)"></code-example>
|
||||
|
||||
### 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`.
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" header="heroes.component.html" region="show-hero-1"></code-example>
|
||||
|
||||
## 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 `<app-heroes>` 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 `<app-heroes>` directamente debajo del título.
|
||||
|
||||
<code-example path="toh-pt1/src/app/app.component.html" header="src/app/app.component.html"></code-example>
|
||||
|
||||
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`.
|
||||
|
||||
<code-example path="toh-pt1/src/app/hero.ts" header="src/app/hero.ts"></code-example>
|
||||
|
||||
|
||||
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í:
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts"></code-example>
|
||||
|
||||
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:
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="show-hero-2" header="heroes.component.html (HeroesComponent's template)"></code-example>
|
||||
|
||||
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:
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.html" header="src/app/heroes/heroes.component.html" region="pipe">
|
||||
</code-example>
|
||||
|
||||
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 `<input>` textbox.
|
||||
El usuario debe poder editar el nombre del héroe en el cuadro de texto `<input>`.
|
||||
|
||||
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 `<input>` form element and the `hero.name` property.
|
||||
Para automatizar ese flujo de datos, configure un enlace de datos bidireccional entre el elemento de formulario `<input>` 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í:
|
||||
|
||||
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" header="src/app/heroes/heroes.component.html (HeroesComponent's template)"></code-example>
|
||||
|
||||
**[(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,
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
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'.
|
||||
</code-example>
|
||||
|
||||
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`.
|
||||
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (FormsModule symbol import)"
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (@NgModule imports)"
|
||||
region="formsmodule-js-import">
|
||||
</code-example>
|
||||
|
||||
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.
|
||||
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (@NgModule imports)"
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts ( @NgModule imports)"
|
||||
region="ng-imports">
|
||||
</code-example>
|
||||
|
||||
When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` 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 `<h2>` 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.
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="heroes-import" >
|
||||
</code-example>
|
||||
|
||||
The `HeroesComponent` is declared in the `@NgModule.declarations` array.
|
||||
`HeroesComponent` se declara en la matriz`@NgModule.declarations`.
|
||||
<code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="declarations">
|
||||
</code-example>
|
||||
|
||||
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:
|
||||
|
||||
<code-tabs>
|
||||
|
||||
@ -232,14 +232,12 @@ Here are the code files discussed on this page.
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
## 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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user