El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

L'internacionalització (i18n) és el procés de dissenyar aplicacions de manera que puguin ser adaptades fàcilment a diferents idiomes i regions sense necessitat de canvis en el codi font. Angular proporciona un conjunt d'eines i funcionalitats per facilitar aquest procés.

Conceptes Clau

Localització (l10n): Adaptació de l'aplicació a un idioma i regió específics.
Traduccions: Textos que es mostren a l'usuari en diferents idiomes.
Format de dades: Adaptació de formats de data, hora, números, monedes, etc., segons la regió.

Configuració de l'Internacionalització a Angular

Pas 1: Instal·lació del paquet d'i18n

Primer, cal instal·lar el paquet d'i18n d'Angular:

ng add @angular/localize

Pas 2: Marcar els textos per a la traducció

Utilitza el marcador i18n per indicar els textos que necessiten ser traduïts. Per exemple:

<h1 i18n="header|An introduction header">Benvingut a la nostra aplicació!</h1>

Pas 3: Extraure els missatges

Utilitza l'eina d'Angular per extreure els missatges a un fitxer de traducció:

ng extract-i18n

Això generarà un fitxer messages.xlf a la carpeta src/.

Pas 4: Traduir els missatges

Crea fitxers de traducció per a cada idioma que vulguis suportar. Per exemple, per a l'anglès, crea un fitxer messages.en.xlf i tradueix els textos:

<trans-unit id="header" datatype="html">
  <source>Benvingut a la nostra aplicació!</source>
  <target>Welcome to our application!</target>
</trans-unit>

Pas 5: Configurar l'aplicació per a múltiples idiomes

Actualitza el fitxer angular.json per incloure les configuracions d'i18n:

"projects": {
  "your-project-name": {
    "i18n": {
      "sourceLocale": "ca",
      "locales": {
        "en": "src/locale/messages.en.xlf"
      }
    }
  }
}

Pas 6: Construir l'aplicació per a cada idioma

Construeix l'aplicació per a cada idioma utilitzant el següent comandament:

ng build --localize

Això generarà una versió de l'aplicació per a cada idioma configurat.

Exemple Pràctic

Fitxer HTML

<div>
  <h1 i18n="header|An introduction header">Benvingut a la nostra aplicació!</h1>
  <p i18n="description|A brief description">Aquesta és una aplicació d'exemple per demostrar la internacionalització.</p>
</div>

Fitxer de Traducció (messages.en.xlf)

<xliff version="1.2">
  <file source-language="ca" target-language="en" datatype="plaintext">
    <body>
      <trans-unit id="header" datatype="html">
        <source>Benvingut a la nostra aplicació!</source>
        <target>Welcome to our application!</target>
      </trans-unit>
      <trans-unit id="description" datatype="html">
        <source>Aquesta és una aplicació d'exemple per demostrar la internacionalització.</source>
        <target>This is a sample application to demonstrate internationalization.</target>
      </trans-unit>
    </body>
  </file>
</xliff>

Configuració a angular.json

"projects": {
  "your-project-name": {
    "i18n": {
      "sourceLocale": "ca",
      "locales": {
        "en": "src/locale/messages.en.xlf"
      }
    }
  }
}

Construcció de l'aplicació

ng build --localize

Exercicis Pràctics

Exercici 1: Afegir un nou idioma

Objectiu: Afegir suport per a l'idioma francès a l'aplicació.
Passos:
- Crea un fitxer messages.fr.xlf.
- Traduïu els textos al francès.
- Actualitza el fitxer angular.json per incloure el nou idioma.
- Construeix l'aplicació per a l'idioma francès.

Exercici 2: Format de dades

Objectiu: Adaptar el format de data i hora segons la regió.
Passos:
- Utilitza el pipe date d'Angular per mostrar una data.
- Configura l'aplicació per mostrar la data en diferents formats segons l'idioma seleccionat.

Resum

En aquesta secció, hem après com configurar l'internacionalització a Angular, marcar textos per a la traducció, extreure i traduir missatges, i construir l'aplicació per a múltiples idiomes. També hem vist exemples pràctics i exercicis per reforçar els conceptes apresos. La internacionalització és una part crucial per fer que les aplicacions siguin accessibles a una audiència global.

Internacionalització (i18n)

Introducció

Conceptes Clau

Configuració de l'Internacionalització a Angular

Pas 1: Instal·lació del paquet d'i18n

Pas 2: Marcar els textos per a la traducció

Pas 3: Extraure els missatges

Pas 4: Traduir els missatges

Pas 5: Configurar l'aplicació per a múltiples idiomes

Pas 6: Construir l'aplicació per a cada idioma

Exemple Pràctic

Fitxer HTML

Fitxer de Traducció (messages.en.xlf)

Configuració a angular.json

Construcció de l'aplicació

Exercicis Pràctics

Exercici 1: Afegir un nou idioma

Exercici 2: Format de dades

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques