Skip to content

translate: translations for first app Angular tutorial #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ricardochl wants to merge 1 commit into
base: main
Choose a base branch
from
Open

translate: translations for first app Angular tutorial #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions adev-es/src/content/tutorials/first-app/intro/README.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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!

<docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>

## 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.

<img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">

## 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.

<docs-workflow>

<docs-step title="Identify the version of `node.js` that Angular requires">
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.
</docs-step>

<docs-step title="Install the correct version of `node.js` for Angular">
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/)
</docs-step>

<docs-step title="Install the latest version of Angular">
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`.
</docs-step>

<docs-step title="Install integrated development environment (IDE)">
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/)
</docs-step>

<docs-step title="Optional: set-up your AI powered IDE">

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).

</docs-step>

</docs-workflow>

For more information about the topics covered in this lesson, visit:

<docs-pill-row>
<docs-pill href="/overview" title="What is Angular"/>
<docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
<docs-pill href="/cli" title="Angular CLI Reference"/>
</docs-pill-row>
82 changes: 41 additions & 41 deletions adev-es/src/content/tutorials/first-app/intro/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

<docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>

## 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.

<img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">
<img alt="Resultado de la página de inicio de la aplicación de viviendas" src="assets/images/tutorials/first-app/homes-app-landing-page.png">

## 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.

<docs-workflow>

<docs-step title="Identify the version of `node.js` that Angular requires">
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).
<docs-step title="Identifica la versión de `node.js` que Angular requiere">
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.
</docs-step>

<docs-step title="Install the correct version of `node.js` for Angular">
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/)
<docs-step title="Instala la versión correcta de `node.js` para Angular">
Si no tienes una versión de `node.js` instalada, sigue las [instrucciones de instalación en nodejs.org](https://nodejs.org/en/download/)
</docs-step>

<docs-step title="Install the latest version of Angular">
With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development.
<docs-step title="Instala la última versión de Angular">
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`.
</docs-step>

<docs-step title="Install integrated development environment (IDE)">
You are free to use any tool you prefer to build apps with Angular. We recommend the following:
<docs-step title="Instala el entorno de desarrollo integrado (IDE)">
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/)
</docs-step>

<docs-step title="Optional: set-up your AI powered IDE">
<docs-step title="Opcional: configura tu IDE con IA">

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).

</docs-step>

</docs-workflow>

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="/overview" title="What is Angular"/>
<docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
<docs-pill href="/cli" title="Angular CLI Reference"/>
<docs-pill href="/overview" title="¿Qué es Angular?"/>
<docs-pill href="/tools/cli/setup-local" title="Configuración del entorno local y espacio de trabajo"/>
<docs-pill href="/cli" title="Referencia del CLI de Angular"/>
</docs-pill-row>
122 changes: 122 additions & 0 deletions adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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".

<docs-video src="https://www.youtube.com/embed/UnOwDuliqZA?si=uML-cDRbrxmYdD_9"/>

## 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.

<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.

At any step in the tutorial, you can click this icon to download the step's source code and start from there.
</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.

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.
</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>

<docs-step title="Create `Hello World`">
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 `<title>` 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>
Loading
Loading