cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: translate tutorial/toh-pt0.md (#82)

Browse Source 
- Se agrego la versión en ingles .en.md
- Se Probo previamente

Fixes #73
This commit is contained in:
Antonio Cardenas 2020-10-06 13:07:55 -06:00 committed by GitHub
parent 4ea5a19a10
commit 7b87a797ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 202 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
aio/content/tutorial/toh-pt0.en.md Normal file
View File

@ -0,0 +1,141 @@
# Create a new project
You begin by creating an initial application using the Angular CLI. Throughout this tutorial, you’ll modify and extend that starter application to create the Tour of Heroes app.
In this part of the tutorial, you'll do the following:
1. Set up your environment.
2. Create a new workspace and initial app project.
3. Serve the application.
4. Make changes to the application.
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
</div>
## Set up your environment
To set up your development environment, follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development").
## Create a new workspace and an initial application
You develop apps in the context of an Angular [workspace](guide/glossary#workspace). A workspace contains the files for one or more [projects](guide/glossary#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace.
To create a new workspace and an initial app project:
1. Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder.
2. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here:
<code-example language="sh" class="code-shell">
ng new angular-tour-of-heroes
</code-example>
3. The `ng new` command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
The Angular CLI installs the necessary Angular `npm` packages and other dependencies. This can take a few minutes.
It also creates the following workspace and starter project files:
* A new workspace, with a root folder named `angular-tour-of-heroes`.
* An initial skeleton app project, also called `angular-tour-of-heroes` (in the `src` subfolder).
* An end-to-end test project (in the e2e subfolder).
* Related configuration files.
The initial app project contains a simple Welcome app, ready to run.
## Serve the application
Go to the workspace directory and launch the application.
<code-example language="sh" class="code-shell">
cd angular-tour-of-heroes
ng serve --open
</code-example>
<div class="alert is-helpful">
The `ng serve` command builds the app, starts the development server,
watches the source files, and rebuilds the app as you make changes to those files.
The `--open` flag opens a browser to `http://localhost:4200/`.
</div>
You should see the app running in your browser.
## Angular components
The page you see is the _application shell_.
The shell is controlled by an Angular **component** named `AppComponent`.
_Components_ are the fundamental building blocks of Angular applications.
They display data on the screen, listen for user input, and take action based on that input.
## Make changes to the application
Open the project in your favorite editor or IDE and navigate to the `src/app` folder to make some changes to the starter app.
You'll find the implementation of the shell `AppComponent` distributed over three files:
1. `app.component.ts`&mdash; the component class code, written in TypeScript.
1. `app.component.html`&mdash; the component template, written in HTML.
1. `app.component.css`&mdash; the component's private CSS styles.
### Change the application title
Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'.
<code-example path="toh-pt0/src/app/app.component.ts" region="set-title" header="app.component.ts (class title property)"></code-example>
Open the component template file (`app.component.html`) and
delete the default template generated by the Angular CLI.
Replace it with the following line of HTML.
<code-example path="toh-pt0/src/app/app.component.html"
header="app.component.html (template)"></code-example>
The double curly braces are Angular's *interpolation binding* syntax.
This interpolation binding presents the component's `title` property value
inside the HTML header tag.
The browser refreshes and displays the new application title.
{@a app-wide-styles}
### Add application styles
Most apps strive for a consistent look across the application.
The CLI generated an empty `styles.css` for this purpose.
Put your application-wide styles there.
Open `src/styles.css` and add the code below to the file.
<code-example path="toh-pt0/src/styles.1.css" header="src/styles.css (excerpt)">
</code-example>
## Final code review
Here are the code files discussed on this page.
<code-tabs>
<code-pane header="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts">
</code-pane>
<code-pane header="src/app/app.component.html" path="toh-pt0/src/app/app.component.html">
</code-pane>
<code-pane
header="src/styles.css (excerpt)"
path="toh-pt0/src/styles.1.css">
</code-pane>
</code-tabs>
## Summary
* You created the initial application structure using the Angular CLI.
* You learned that Angular components display data.
* You used the double curly braces of interpolation to display the app title.

121
aio/content/tutorial/toh-pt0.md
View File

@ -1,54 +1,54 @@
# Create a new project # Crea un nuevo proyecto
You begin by creating an initial application using the Angular CLI. Throughout this tutorial, you’ll modify and extend that starter application to create the Tour of Heroes app. Primero, crea la aplicación inicial usando el Angular CLI. En este Tutorial, modificarás y ampliarás la aplicación inicial para crear la aplicación Tour de Héroes.
In this part of the tutorial, you'll do the following: En esta parte del tutorial, harás lo siguiente:
1. Set up your environment. 1. Establecer tu ambiente de desarrollo.
2. Create a new workspace and initial app project. 2. Crear un nuevo espacio de trabajo y un proyecto de aplicación inicial.
3. Serve the application. 3. Servir la aplicación.
4. Make changes to the application. 4. Hacer cambios a la aplicación.
<div class="alert is-helpful"> <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> </div>
## Set up your environment ## Configura tu entorno
To set up your development environment, follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development"). Para preparar tu entorno de desarrollo, sigue las instrucciones en [Creación de un entorno local](guide/setup-local "Configuración para el desarrollo local").
## Crear un nuevo espacio de trabajo y un enlace de aplicación inicial
## Create a new workspace and an initial application Desarrolla tu aplicación en el contexto del espacio de trabajo Angular. [Espacio de trabajo](guide/glossary#workspace). contiene uno o más archivos [proyecto]. Un proyecto es un conjunto de archivos que componen una aplicación, biblioteca o prueba de extremo a extremo (e2e).
En este Tutorial, crearas un nuevo espacio de trabajo.
You develop apps in the context of an Angular [workspace](guide/glossary#workspace). A workspace contains the files for one or more [projects](guide/glossary#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace. Para crear un nuevo espacio de trabajo y un proyecto de aplicación inicial:
To create a new workspace and an initial app project: 1. Asegurate de que no esté en la carpeta del espacio de trabajo Angular. Por ejemplo, si creó anteriormente el espacio de trabajo Introducción, cambia a la carpeta principal de esa carpeta.
2. Ejecuta el comando CLI `ng new` y asígnale el nombre `angular-tour-of-heroes`, como se muestra a continuación.
1. Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder.
2. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here:
<code-example language="sh" class="code-shell"> <code-example language="sh" class="code-shell">
ng new angular-tour-of-heroes ng new angular-tour-of-heroes
</code-example> </code-example>
3. The `ng new` command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key. 3. Ejecuta el comando `ng new` y verá información sobre las funciones que desea incluir en su primer proyecto de aplicación. Presione Entrar o Volver para aceptar el valor predeterminado.
The Angular CLI installs the necessary Angular `npm` packages and other dependencies. This can take a few minutes. Angular CLI instala los paquetes Angular npm necesarios y otras dependencias. Esto puede tomar unos pocos minutos.
It also creates the following workspace and starter project files: También crea el siguiente espacio de trabajo y archivos de proyecto de inicio.
* A new workspace, with a root folder named `angular-tour-of-heroes`. * Un nuevo espacio de trabajo con una carpeta raíz llamada `angular-tour-of-heroes`.
* An initial skeleton app project, also called `angular-tour-of-heroes` (in the `src` subfolder). * Un proyecto de aplicación esqueleto inicial también llamado `angular-tour-of-heroes`. (En la subcarpeta `src`)
* An end-to-end test project (in the e2e subfolder). * Proyecto de prueba de extremo a extremo. (En la subcarpeta `e2e`)
* Related configuration files. * Archivos de configuración relacionados.
The initial app project contains a simple Welcome app, ready to run. El primer proyecto de aplicación contiene una aplicación de bienvenida simple que puede ejecutar de inmediato.
## Serve the application ## Servir la aplicación
Go to the workspace directory and launch the application. Ve al directorio de tu espacio de trabajo e inicia la aplicación.
<code-example language="sh" class="code-shell"> <code-example language="sh" class="code-shell">
cd angular-tour-of-heroes cd angular-tour-of-heroes
@ -57,68 +57,67 @@ Go to the workspace directory and launch the application.
<div class="alert is-helpful"> <div class="alert is-helpful">
The `ng serve` command builds the app, starts the development server, El comando `ng serve` crea la aplicación, inicia el servidor de desarrollo y observa los archivos de origen.
watches the source files, and rebuilds the app as you make changes to those files. Cuando realiza un cambio en un archivo que se está viendo, se realizará una reconstrucción en el archivo modificado.
The `--open` flag opens a browser to `http://localhost:4200/`. Si especificas la bandera `--open`, se abrirá `http://localhost:4200` en tu navegador.
</div> </div>
You should see the app running in your browser. Asegúrate de que la aplicación se esté ejecutando en su navegador.
## Angular components ## Componentes de Angular
The page you see is the _application shell_. La página que se muestra es _Shell de Aplicación_.
The shell is controlled by an Angular **component** named `AppComponent`. Este shell funciona desde un **componente** Angular llamado `AppComponent`.
_Components_ are the fundamental building blocks of Angular applications. Los componentes son los bloques de construcción fundamentales de las aplicaciones Angular.
They display data on the screen, listen for user input, and take action based on that input. Ellos muestran informacion en la pantalla, esperan el ingreso de datos del usuario y toman acciones basados en esa informacion ingresada.
## Make changes to the application ## Cambiar la aplicación
Open the project in your favorite editor or IDE and navigate to the `src/app` folder to make some changes to the starter app. Para hacer algunos cambios en la aplicación de inicio, abre el proyecto en su editor de texto favorito o IDE y vaya a `src/app`.
You'll find the implementation of the shell `AppComponent` distributed over three files: Encontrará la implementación del shell `AppComponent`, dividido en tres archivos:
1. `app.component.ts`&mdash; the component class code, written in TypeScript. 1. `app.component.ts`&mdash; Este es el código para la clase de componente escrita en TypeScript.
1. `app.component.html`&mdash; the component template, written in HTML. 1. `app.component.html`&mdash; Este es el componente Plantillas escrito en HTML.
1. `app.component.css`&mdash; the component's private CSS styles. 1. `app.component.css`&mdash; CSS solo para este componente.
### Change the application title ### Cambiar el título de la aplicación
Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'. Abre el archivo de clase de componente (`app.component.ts`) y cambia el valor de la propiedad `title` a `Tour de Heroes`.
<code-example path="toh-pt0/src/app/app.component.ts" region="set-title" header="app.component.ts (class title property)"></code-example> <code-example path="toh-pt0/src/app/app.component.ts" region="set-title" header="app.component.ts (class title property)"></code-example>
Open the component template file (`app.component.html`) and Abre el archivo de plantilla de componente (`app.component.html`) y
delete the default template generated by the Angular CLI. Elimina la plantilla predeterminada generada por el Angular CLI.
Replace it with the following line of HTML. Coloca el siguiente HTML en su lugar.
<code-example path="toh-pt0/src/app/app.component.html" <code-example path="toh-pt0/src/app/app.component.html"
header="app.component.html (template)"></code-example> header="app.component.html (template)"></code-example>
The double curly braces are Angular's *interpolation binding* syntax. Las llaves dobles son la sintaxis de *interpolación vinculante* de Angular.
This interpolation binding presents the component's `title` property value Este enlace de interpolación pasa el valor de la propiedad `title` del componente en la etiqueta de encabezado HTML.
inside the HTML header tag.
The browser refreshes and displays the new application title. El navegador actualiza la página con el nuevo título de la aplicación.
{@a app-wide-styles} {@a app-wide-styles}
### Add application styles ### Añadir estilo de aplicación
Most apps strive for a consistent look across the application. La mayoría de las aplicaciones apuntan a una apariencia consistente en toda la aplicación.
The CLI generated an empty `styles.css` for this purpose. El CLI ha generado un `styles.css` vacío para este propósito.
Put your application-wide styles there. Escriba estilos que se apliquen a toda la aplicación, allí.
Open `src/styles.css` and add the code below to the file. Abre `src/style.css` y agrega el siguiente código al archivo.
<code-example path="toh-pt0/src/styles.1.css" header="src/styles.css (excerpt)"> <code-example path="toh-pt0/src/styles.1.css" header="src/styles.css (excerpt)">
</code-example> </code-example>
## Final code review ## Revisión final del código
Here are the code files discussed on this page. A continuación se muestra un archivo del código mencionado en esta página.
<code-tabs> <code-tabs>
@ -134,8 +133,8 @@ Here are the code files discussed on this page.
</code-pane> </code-pane>
</code-tabs> </code-tabs>
## Summary ## Resumen
* You created the initial application structure using the Angular CLI. * Creaste la estructura de la aplicación inicial utilizando el CLI Angular.
* You learned that Angular components display data. * Aprendiste que los componentes de Angular muestran datos.
* You used the double curly braces of interpolation to display the app title. * Utilizaste las llaves dobles de interpolación para mostrar el título de la aplicación.