Skip to content

Commit b7be8ab

Browse files
ricardochlSplaktar
authored andcommitted
translate: translations for internationalization guides
Fixes #55
1 parent e733bc7 commit b7be8ab

23 files changed

+1738
-477
lines changed

adev-es/src/app/routing/sub-navigation-data.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -591,60 +591,60 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
591591
],
592592
},
593593
{
594-
label: 'Internationalization',
594+
label: 'Internacionalización',
595595
children: [
596596
{
597-
label: 'Overview',
597+
label: 'Visión general',
598598
path: 'guide/i18n',
599599
contentPath: 'guide/i18n/overview',
600600
},
601601
{
602-
label: 'Add the localize package',
602+
label: 'Agregar el paquete localize',
603603
path: 'guide/i18n/add-package',
604604
contentPath: 'guide/i18n/add-package',
605605
},
606606
{
607-
label: 'Refer to locales by ID',
607+
label: 'Referirse a configuraciones regionales por ID',
608608
path: 'guide/i18n/locale-id',
609609
contentPath: 'guide/i18n/locale-id',
610610
},
611611
{
612-
label: 'Format data based on locale',
612+
label: 'Formatear datos según la configuración regional',
613613
path: 'guide/i18n/format-data-locale',
614614
contentPath: 'guide/i18n/format-data-locale',
615615
},
616616
{
617-
label: 'Prepare component for translation',
617+
label: 'Preparar un componente para traducción',
618618
path: 'guide/i18n/prepare',
619619
contentPath: 'guide/i18n/prepare',
620620
},
621621
{
622-
label: 'Work with translation files',
622+
label: 'Trabajar con archivos de traducción',
623623
path: 'guide/i18n/translation-files',
624624
contentPath: 'guide/i18n/translation-files',
625625
},
626626
{
627-
label: 'Merge translations into the app',
627+
label: 'Fusionar traducciones en la aplicación',
628628
path: 'guide/i18n/merge',
629629
contentPath: 'guide/i18n/merge',
630630
},
631631
{
632-
label: 'Deploy multiple locales',
632+
label: 'Desplegar múltiples configuraciones regionales',
633633
path: 'guide/i18n/deploy',
634634
contentPath: 'guide/i18n/deploy',
635635
},
636636
{
637-
label: 'Import global variants of the locale data',
637+
label: 'Importar variantes globales de los datos de configuración regional',
638638
path: 'guide/i18n/import-global-variants',
639639
contentPath: 'guide/i18n/import-global-variants',
640640
},
641641
{
642-
label: 'Manage marked text with custom IDs',
642+
label: 'Gestionar texto marcado con IDs personalizados',
643643
path: 'guide/i18n/manage-marked-text',
644644
contentPath: 'guide/i18n/manage-marked-text',
645645
},
646646
{
647-
label: 'Example Angular application',
647+
label: 'Ejemplo de aplicación de Angular',
648648
path: 'guide/i18n/example',
649649
contentPath: 'guide/i18n/example',
650650
},
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Add the localize package
2+
3+
To take advantage of the localization features of Angular, use the [Angular CLI][CliMain] to add the `@angular/localize` package to your project.
4+
5+
To add the `@angular/localize` package, use the following command to update the `package.json` and TypeScript configuration files in your project.
6+
7+
<docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="add-localize"/>
8+
9+
It adds `types: ["@angular/localize"]` in the TypeScript configuration files.
10+
It also adds line `/// <reference types="@angular/localize" />` at the top of the `main.ts` file which is the reference to the type definition.
11+
12+
HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-).
13+
14+
If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the `i18n` attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project.
15+
16+
## Options
17+
18+
| OPTION | DESCRIPTION | VALUE TYPE | DEFAULT VALUE
19+
|:--- |:--- |:------ |:------
20+
| `--project` | The name of the project. | `string` |
21+
| `--use-at-runtime` | If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default. | `boolean` | `false`
22+
23+
For more available options, see `ng add` in [Angular CLI][CliMain].
24+
25+
## What's next
26+
27+
<docs-pill-row>
28+
<docs-pill href="guide/i18n/locale-id" title="Refer to locales by ID"/>
29+
</docs-pill-row>
30+
31+
[CliMain]: cli "CLI Overview and Command Reference | Angular"
32+
33+
[GuideNpmPackages]: reference/configs/npm-packages "Workspace npm dependencies | Angular"
34+
35+
[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html "TypeScript Configuration"

adev-es/src/content/guide/i18n/add-package.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
# Add the localize package
1+
# Agregar el paquete localize
22

3-
To take advantage of the localization features of Angular, use the [Angular CLI][CliMain] to add the `@angular/localize` package to your project.
3+
Para aprovechar las características de localización de Angular, usa el [CLI de Angular][CliMain] para agregar el paquete `@angular/localize` a tu proyecto.
44

5-
To add the `@angular/localize` package, use the following command to update the `package.json` and TypeScript configuration files in your project.
5+
Para agregar el paquete `@angular/localize`, usa el siguiente comando para actualizar los archivos `package.json` y de configuración de TypeScript en tu proyecto.
66

77
<docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="add-localize"/>
88

9-
It adds `types: ["@angular/localize"]` in the TypeScript configuration files.
10-
It also adds line `/// <reference types="@angular/localize" />` at the top of the `main.ts` file which is the reference to the type definition.
9+
Esto agrega `types: ["@angular/localize"]` en los archivos de configuración de TypeScript.
10+
También agrega la línea `/// <reference types="@angular/localize" />` al inicio del archivo `main.ts`, que es la referencia a la definición de tipos.
1111

12-
HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-).
12+
ÚTIL: Para más información sobre los archivos `package.json` y `tsconfig.json`, consulta [Dependencias npm del espacio de trabajo][GuideNpmPackages] y [Configuración de TypeScript][GuideTsConfig]. Para aprender sobre las directivas Triple-slash visita el [Manual de TypeScript](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-).
1313

14-
If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the `i18n` attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project.
14+
Si `@angular/localize` no está instalado e intentas construir una versión localizada de tu proyecto (por ejemplo, mientras usas los atributos `i18n` en templates), el [CLI de Angular][CliMain] generará un error que contendrá los pasos que puedes seguir para habilitar i18n en tu proyecto.
1515

16-
## Options
16+
## Opciones
1717

18-
| OPTION | DESCRIPTION | VALUE TYPE | DEFAULT VALUE
18+
| OPCIÓN | DESCRIPCIÓN | TIPO DE VALOR | VALOR PREDETERMINADO
1919
|:--- |:--- |:------ |:------
20-
| `--project` | The name of the project. | `string` |
21-
| `--use-at-runtime` | If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default. | `boolean` | `false`
20+
| `--project` | El nombre del proyecto. | `string` |
21+
| `--use-at-runtime` | Si se establece, entonces `$localize` puede usarse en runtime. Además `@angular/localize` se incluye en la sección `dependencies` de `package.json`, en lugar de `devDependencies`, que es el valor predeterminado. | `boolean` | `false`
2222

23-
For more available options, see `ng add` in [Angular CLI][CliMain].
23+
Para más opciones disponibles, consulta `ng add` en el [CLI de Angular][CliMain].
2424

25-
## What's next
25+
## Próximos pasos
2626

2727
<docs-pill-row>
28-
<docs-pill href="guide/i18n/locale-id" title="Refer to locales by ID"/>
28+
<docs-pill href="guide/i18n/locale-id" title="Referirse a configuraciones regionales por ID"/>
2929
</docs-pill-row>
3030

3131
[CliMain]: cli "CLI Overview and Command Reference | Angular"
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Deploy multiple locales
2+
3+
If `myapp` is the directory that contains the distributable files of your project, you typically make different versions available for different locales in locale directories.
4+
For example, your French version is located in the `myapp/fr` directory and the Spanish version is located in the `myapp/es` directory.
5+
6+
The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links.
7+
If you set the `"localize"` option in [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the application.
8+
To adjust the base `href` for each version of the application, the CLI adds the locale to the configured `"subPath"`.
9+
Specify the `"subPath"` for each locale in your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
10+
The following example displays `"subPath"` set to an empty string.
11+
12+
<docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="i18n-subPath"/>
13+
14+
## Configure a server
15+
16+
Typical deployment of multiple languages serve each language from a different subdirectory.
17+
Users are redirected to the preferred language defined in the browser using the `Accept-Language` HTTP header.
18+
If the user has not defined a preferred language, or if the preferred language is not available, then the server falls back to the default language.
19+
To change the language, change your current location to another subdirectory.
20+
The change of subdirectory often occurs using a menu implemented in the application.
21+
22+
For more information on how to deploy apps to a remote server, see [Deployment][GuideDeployment].
23+
24+
IMPORTANT: If you are using [Server rendering](guide/ssr) with `outputMode` set to `server`, Angular automatically handles redirection dynamically based on the `Accept-Language` HTTP header. This simplifies deployment by eliminating the need for manual server or configuration adjustments.
25+
26+
### Nginx example
27+
28+
The following example displays an Nginx configuration.
29+
30+
<docs-code path="adev/src/content/examples/i18n/doc-files/nginx.conf" language="nginx"/>
31+
32+
### Apache example
33+
34+
The following example displays an Apache configuration.
35+
36+
<docs-code path="adev/src/content/examples/i18n/doc-files/apache2.conf" language="apache"/>
37+
38+
[CliBuild]: cli/build "ng build | CLI | Angular"
39+
40+
[GuideDeployment]: tools/cli/deployment "Deployment | Angular"
41+
42+
[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"

adev-es/src/content/guide/i18n/deploy.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
1-
# Deploy multiple locales
1+
# Desplegar múltiples configuraciones regionales
22

3-
If `myapp` is the directory that contains the distributable files of your project, you typically make different versions available for different locales in locale directories.
4-
For example, your French version is located in the `myapp/fr` directory and the Spanish version is located in the `myapp/es` directory.
3+
Si `myapp` es el directorio que contiene los archivos distribuibles de tu proyecto, normalmente haces que diferentes versiones estén disponibles para diferentes configuraciones regionales en directorios de configuración regional.
4+
Por ejemplo, tu versión en francés está ubicada en el directorio `myapp/fr` y la versión en español está ubicada en el directorio `myapp/es`.
55

6-
The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links.
7-
If you set the `"localize"` option in [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the application.
8-
To adjust the base `href` for each version of the application, the CLI adds the locale to the configured `"subPath"`.
9-
Specify the `"subPath"` for each locale in your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
10-
The following example displays `"subPath"` set to an empty string.
6+
La etiqueta HTML `base` con el atributo `href` especifica el URI base, o URL, para enlaces relativos.
7+
Si estableces la opción `"localize"` en el archivo de configuración de compilación del espacio de trabajo [`angular.json`][GuideWorkspaceConfig] a `true` o a un array de IDs de configuración regional, el CLI ajusta el `href` base para cada versión de la aplicación.
8+
Para ajustar el `href` base para cada versión de la aplicación, el CLI agrega la configuración regional al `"subPath"` configurado.
9+
Especifica el `"subPath"` para cada configuración regional en tu archivo de configuración de compilación del espacio de trabajo [`angular.json`][GuideWorkspaceConfig].
10+
El siguiente ejemplo muestra `"subPath"` establecido como una cadena vacía.
1111

1212
<docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="i18n-subPath"/>
1313

14-
## Configure a server
14+
## Configurar un servidor
1515

16-
Typical deployment of multiple languages serve each language from a different subdirectory.
17-
Users are redirected to the preferred language defined in the browser using the `Accept-Language` HTTP header.
18-
If the user has not defined a preferred language, or if the preferred language is not available, then the server falls back to the default language.
19-
To change the language, change your current location to another subdirectory.
20-
The change of subdirectory often occurs using a menu implemented in the application.
16+
El despliegue típico de múltiples idiomas sirve cada idioma desde un subdirectorio diferente.
17+
Los usuarios son redirigidos al idioma preferido definido en el navegador usando el encabezado HTTP `Accept-Language`.
18+
Si el usuario no ha definido un idioma preferido, o si el idioma preferido no está disponible, entonces el servidor recurre al idioma predeterminado.
19+
Para cambiar el idioma, cambia tu ubicación actual a otro subdirectorio.
20+
El cambio de subdirectorio a menudo ocurre usando un menú implementado en la aplicación.
2121

22-
For more information on how to deploy apps to a remote server, see [Deployment][GuideDeployment].
22+
Para más información sobre cómo desplegar aplicaciones a un servidor remoto, consulta [Despliegue][GuideDeployment].
2323

24-
IMPORTANT: If you are using [Server rendering](guide/ssr) with `outputMode` set to `server`, Angular automatically handles redirection dynamically based on the `Accept-Language` HTTP header. This simplifies deployment by eliminating the need for manual server or configuration adjustments.
24+
IMPORTANTE: Si estás usando [Renderizado del servidor](guide/ssr) con `outputMode` establecido en `server`, Angular maneja automáticamente la redirección dinámicamente basándose en el encabezado HTTP `Accept-Language`. Esto simplifica el despliegue al eliminar la necesidad de ajustes manuales del servidor o configuración.
2525

26-
### Nginx example
26+
### Ejemplo de Nginx
2727

28-
The following example displays an Nginx configuration.
28+
El siguiente ejemplo muestra una configuración de Nginx.
2929

3030
<docs-code path="adev/src/content/examples/i18n/doc-files/nginx.conf" language="nginx"/>
3131

32-
### Apache example
32+
### Ejemplo de Apache
3333

34-
The following example displays an Apache configuration.
34+
El siguiente ejemplo muestra una configuración de Apache.
3535

3636
<docs-code path="adev/src/content/examples/i18n/doc-files/apache2.conf" language="apache"/>
3737

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Example Angular Internationalization application
2+
3+
<!-- ## Explore the translated example application -->
4+
5+
<!-- Explore the sample application with French translations used in the [Angular Internationalization][GuideI18nOverview] guide: -->
6+
<!-- TODO: link to GitHub -->
7+
<!-- <docs-code live path="adev/src/content/examples/i18n" title="live example"/> -->
8+
9+
## `fr-CA` and `en-US` example
10+
11+
The following tabs display the example application and the associated translation files.
12+
13+
<docs-code-multifile>
14+
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"/>
15+
<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts"/>
16+
<docs-code header="src/main.ts" path="adev/src/content/examples/i18n/doc-files/main.1.ts"/>
17+
<docs-code header="src/locale/messages.fr.xlf" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html"/>
18+
</docs-code-multifile>

adev-es/src/content/guide/i18n/example.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
# Example Angular Internationalization application
1+
# Aplicación de ejemplo de internacionalización de Angular
22

33
<!-- ## Explore the translated example application -->
44

55
<!-- Explore the sample application with French translations used in the [Angular Internationalization][GuideI18nOverview] guide: -->
66
<!-- TODO: link to GitHub -->
77
<!-- <docs-code live path="adev/src/content/examples/i18n" title="live example"/> -->
88

9-
## `fr-CA` and `en-US` example
9+
## Ejemplo de `fr-CA` y `en-US`
1010

11-
The following tabs display the example application and the associated translation files.
11+
Las siguientes pestañas muestran la aplicación de ejemplo y los archivos de traducción asociados.
1212

1313
<docs-code-multifile>
1414
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"/>
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Format data based on locale
2+
3+
Angular provides the following built-in data transformation [pipes](guide/templates/pipes).
4+
The data transformation pipes use the [`LOCALE_ID`][ApiCoreLocaleId] token to format data based on rules of each locale.
5+
6+
| Data transformation pipe | Details |
7+
|:--- |:--- |
8+
| [`DatePipe`][ApiCommonDatepipe] | Formats a date value. |
9+
| [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforms a number into a currency string. |
10+
| [`DecimalPipe`][ApiCommonDecimalpipe] | Transforms a number into a decimal number string. |
11+
| [`PercentPipe`][ApiCommonPercentpipe] | Transforms a number into a percentage string. |
12+
13+
## Use DatePipe to display the current date
14+
15+
To display the current date in the format for the current locale, use the following format for the `DatePipe`.
16+
17+
<!--todo: replace with docs-code -->
18+
19+
<docs-code language="typescript">
20+
21+
{{ today | date }}
22+
23+
</docs-code>
24+
25+
## Override current locale for CurrencyPipe
26+
27+
Add the `locale` parameter to the pipe to override the current value of `LOCALE_ID` token.
28+
29+
To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe`
30+
31+
<!--todo: replace with docs-code -->
32+
33+
<docs-code language="typescript">
34+
35+
{{ amount | currency : 'en-US' }}
36+
37+
</docs-code>
38+
39+
HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application.
40+
41+
## What's next
42+
43+
<docs-pill-row>
44+
<docs-pill href="guide/i18n/prepare" title="Prepare component for translation"/>
45+
</docs-pill-row>
46+
47+
[ApiCommonCurrencypipe]: api/common/CurrencyPipe "CurrencyPipe | Common - API | Angular"
48+
49+
[ApiCommonDatepipe]: api/common/DatePipe "DatePipe | Common - API | Angular"
50+
[ApiCommonDecimalpipe]: api/common/DecimalPipe "DecimalPipe | Common - API | Angular"
51+
[ApiCommonPercentpipe]: api/common/PercentPipe "PercentPipe | Common - API | Angular"
52+
[ApiCoreLocaleId]: api/core/LOCALE_ID "LOCALE_ID | Core - API | Angular"

0 commit comments

Comments
 (0)