El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Internacionalització

Següent ►
►

Introducció

L'internacionalització (i18n) és el procés de dissenyar una aplicació de manera que pugui ser adaptada a diferents idiomes i regions sense necessitat de canvis d'enginyeria. Angular proporciona un conjunt d'eines i funcionalitats per facilitar aquest procés.

Conceptes Clau

  1. Localització (l10n): Adaptació de l'aplicació a un idioma i regió específics.
  2. Fitxers de traducció: Fitxers que contenen les cadenes de text traduïdes a diferents idiomes.
  3. Marcadors de traducció: Etiquetes especials en el codi que indiquen quines cadenes de text han de ser traduïdes.

Configuració de l'Internacionalització en Angular

Pas 1: Instal·lació de les dependències necessàries

Primer, assegura't de tenir instal·lades les dependències necessàries per a l'internacionalització:

ng add @angular/localize

Pas 2: Marcar el text per a la traducció

Utilitza el marcador i18n per indicar quines cadenes de text han de ser traduïdes. Per exemple:

<h1 i18n="@@homeTitle">Benvingut a la nostra aplicació!</h1>

Pas 3: Extracció de missatges

Extrau els missatges de text a un fitxer de traducció utilitzant la següent comanda:

ng extract-i18n

Aquesta comanda generarà un fitxer messages.xlf a la carpeta src/locale.

Pas 4: Traducció dels missatges

Crea còpies del fitxer messages.xlf per a cada idioma que vulguis suportar i tradueix les cadenes de text. Per exemple, per a l'anglès, crea un fitxer messages.en.xlf i tradueix les cadenes.

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

Actualitza el fitxer angular.json per incloure les configuracions de compilació per a cada idioma:

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "configurations": {
          "en": {
            "localize": ["en"]
          },
          "es": {
            "localize": ["es"]
          }
        }
      }
    }
  }
}

Pas 6: Construcció de l'aplicació per a un idioma específic

Construeix l'aplicació per a un idioma específic utilitzant la següent comanda:

ng build --localize

Aquesta comanda generarà versions de l'aplicació per a cada idioma configurat.

Exemple Pràctic

Fitxer HTML amb marcadors de traducció

<div>
  <h1 i18n="@@homeTitle">Benvingut a la nostra aplicació!</h1>
  <p i18n="@@homeDescription">Aquesta és una aplicació d'exemple per demostrar la internacionalització en Angular.</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="homeTitle" datatype="html">
        <source>Benvingut a la nostra aplicació!</source>
        <target>Welcome to our application!</target>
      </trans-unit>
      <trans-unit id="homeDescription" datatype="html">
        <source>Aquesta és una aplicació d'exemple per demostrar la internacionalització en Angular.</source>
        <target>This is a sample application to demonstrate internationalization in Angular.</target>
      </trans-unit>
    </body>
  </file>
</xliff>

Configuració en angular.json

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "configurations": {
          "en": {
            "localize": ["en"]
          },
          "ca": {
            "localize": ["ca"]
          }
        }
      }
    }
  }
}

Exercici Pràctic

Exercici

  1. Marca les cadenes de text del teu component principal per a la traducció.
  2. Extrau els missatges de text a un fitxer de traducció.
  3. Traduïu les cadenes de text a un altre idioma (per exemple, anglès).
  4. Configura l'aplicació per suportar múltiples idiomes.
  5. Construeix l'aplicació per a cada idioma i verifica que les traduccions es mostren correctament.

Solució

  1. Marcar les cadenes de text:
<h1 i18n="@@mainTitle">Hola, món!</h1>
<p i18n="@@mainDescription">Aquesta és una aplicació d'exemple.</p>
  1. Extracció de missatges:
ng extract-i18n
  1. Traducció dels missatges (messages.en.xlf):
<xliff version="1.2">
  <file source-language="ca" target-language="en" datatype="plaintext">
    <body>
      <trans-unit id="mainTitle" datatype="html">
        <source>Hola, món!</source>
        <target>Hello, world!</target>
      </trans-unit>
      <trans-unit id="mainDescription" datatype="html">
        <source>Aquesta és una aplicació d'exemple.</source>
        <target>This is a sample application.</target>
      </trans-unit>
    </body>
  </file>
</xliff>
  1. Configuració en angular.json:
"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "configurations": {
          "en": {
            "localize": ["en"]
          },
          "ca": {
            "localize": ["ca"]
          }
        }
      }
    }
  }
}
  1. Construcció de l'aplicació:
ng build --localize

Conclusió

L'internacionalització és una part crucial del desenvolupament d'aplicacions modernes que necessiten suportar múltiples idiomes i regions. Angular proporciona eines potents per facilitar aquest procés, permetent als desenvolupadors crear aplicacions globalment accessibles amb facilitat. Amb els passos descrits en aquesta secció, hauràs après a configurar i utilitzar l'internacionalització en les teves aplicacions Angular.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

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

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats