Introducere

În acest articol, vom învăța cum să facem aplicația Angular disponibilă în diferite limbi folosind i18n și localizare. Vom crea o aplicație Angular și o vom configura pentru a difuza conținutul în trei limbi diferite. De asemenea, vom implementa aplicația noastră pe Google Firebase și vom vedea cum funcționează localizarea în timp real.

Vom folosi Angular 7 și VS Code pentru a ne dezvolta aplicația. Aruncați o privire la ieșirea aplicației.

Cum se implementeaza localizarea in Angular folosind instrumentele i18n

Cod sursa

Obțineți codul sursă pentru această aplicație de la GitHub.

Ce este i18n?

I18n , cunoscut și sub numele de internaționalizare, este procesul prin care aplicația noastră acceptă diferite limbi pentru a extinde acoperirea către un public mondial.

Ce este localizarea?

Localizarea este procesul de traducere a aplicației într-o anumită limbă. Trebuie să aplicăm internaționalizarea aplicației și după aceea o putem localiza. Localizarea ne permite să ne difuzăm aplicația în diferite limbi.

Crearea unei aplicații Angular 7

Primul pas este crearea unei aplicații Angular 7. Dacă sunteți nou în Angular, v-aș sugera să citiți articolul meu Noțiuni introductive despre Angular 7.0 pentru a afla cum să configurați un mediu de dezvoltare angular în mașina dvs.

Rulați următoarea comandă pentru a crea aplicația.

ng new i18nDemo

Deschideți aplicația i18nDemo folosind codul VS.

Configurarea componentei aplicației

Deschis app.component.html fişier. Înlocuiți textul deja existent cu următorul cod.

<h1 i18n>  Localization Demo in Angular using i18n</h1><h3 i18n="@@myName">  Hello, My name is Ankit</h3><p>This text will remain same in all languages</p><hr />

Puteți observa că am marcat <h1>; and

etichete cu atribut i18n. Acesta este un mod de a spune Angularului să considere acest text ca un conținut traductibil. Vom explora în detaliu atributul i18n în secțiunea următoare.

Crearea unui fișier sursă de traducere

Rulați următoarea comandă în CLI pentru a crea un fișier sursă de traducere.

ng xi18n --output-path translate

Se va crea un folder numit traducere și va crea un fișier messages.xlf fișier în interiorul acestuia. Deschideți fișierul și puteți observa următorul cod XML din interior.

<?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">  <file source-language="en" datatype="plaintext" original="ng2.template">    <body>      <trans-unit id="3f2feb6d5fb690628177afa3ade2519db69ba838" datatype="html">        <source>Localization Demo in Angular using i18n</source>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">1</context>        </context-group>      </trans-unit>      <trans-unit id="myName" datatype="html">        <source>Hello, My name is Ankit</source>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">5</context>        </context-group>      </trans-unit>    </body>  </file></xliff>

Acest fișier conține o listă de <trans-unit> etichete. Aceste etichete vor avea tot conținutul care a fost marcat pentru traducere folosind atributul i18n. Puteți observa și asta each <trans-unit> tag are o proprietate id asociată. Acest ID unic va fi generat implicit pentru fiecare etichetă marcată cu atributul i18n. De asemenea, putem personaliza ID-ul oferind un nume prefblocat cu @@ pe măsură ce aveme done cu eticheta

în secțiunea anterioară. Hence, ID-ul pentru eticheta

este „MyName” așa cum am definit-o.

Nu există nicio intrare pentru <; p> tag în fișierul de traducere, deoarece nu l-am marcat cu atributul i18n. Instrumentul de traducere unghiular nu îl va lua în considerare pentru traduceri.

Dacă modificați textul pentru orice etichetă din fișierul HTML, trebuie să regenerați fișierul de traducere. Regenerarea fișierului va înlocui ID-ul implicit al <trans-unit> etichete. Prin urmare, este recomandabil să furnizați coduri personalizate fiecărei etichete traductibile pentru a menține coerența.

Prin urmare, am implementat cu succes i18n în aplicația noastră. În secțiunea următoare, o vom extinde pentru a o face disponibilă în diferite limbi.

Traducerea conținutului

Vom traduce aplicația noastră în două limbi noi, în afară de engleză, care sunt spaniola și hindi. Faceți trei copii ale fișierului messages.xlf și redenumiți-le în messages.en.xlf, messages.es.xlf și messages.hi.xlf. Aceste nume de fișiere pot fi personalizate conform alegerii dvs., dar extensia ar trebui să fie .xlf.

Deschideți messages.es.xlf și introduceți în acesta următorul conținut.

<?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">  <file source-language="en" datatype="plaintext" original="ng2.template">    <body>      <trans-unit id="3f2feb6d5fb690628177afa3ade2519db69ba838" datatype="html">        <source>Localization Demo in Angular using i18n</source>        <target>Demostración de localización en angular usando i18n</target>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">1</context>        </context-group>      </trans-unit>      <trans-unit id="myName" datatype="html">        <source>Hello, My name is Ankit</source>        <target>Hola, mi nombre es Ankit</target>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">5</context>        </context-group>      </trans-unit>    </body>  </file></xliff>

Acesta este același conținut ca fișierul original messages.xlf, dar am adăugat un <target> etichetă corespunzătoare each &lt; sursă & gt; tag. Eticheta conține textul tradus pentru content ilângă eticheta . Aici folosesc traducerea Google pentru traducere, dar în aplicațiile în timp real, un expert în limbi străine va translate the contente din fișierul messages.xlf.

În mod similar, deschideți mesajele.hi.xlf și introduceți următorul conținut în el.

<?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">  <file source-language="en" datatype="plaintext" original="ng2.template">    <body>      <trans-unit id="3f2feb6d5fb690628177afa3ade2519db69ba838" datatype="html">        <source>Localization Demo in Angular using i18n</source>        <target>I18n का उपयोग कर कोणीय में स्थानीयकरण डेमो</target>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">1</context>        </context-group>      </trans-unit>      <trans-unit id="myName" datatype="html">        <source>Hello, My name is Ankit</source>        <target>हेलो, मेरा नाम अंकित है</target>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">5</context>        </context-group>      </trans-unit>    </body>  </file></xliff>

În cele din urmă, vom face fișierul de traducere în engleză. Deschideți messages.en.xlf și introduceți în acesta următorul conținut.

<?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">  <file source-language="en" datatype="plaintext" original="ng2.template">    <body>      <trans-unit id="3f2feb6d5fb690628177afa3ade2519db69ba838" datatype="html">        <source>Localization Demo in Angular using i18n</source>        <target>Localization Demo in Angular using i18n</target>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">1</context>        </context-group>      </trans-unit>      <trans-unit id="myName" datatype="html">        <source>Hello, My name is Ankit</source>        <target>Hello, My name is Ankit</target>        <context-group purpose="location">          <context context-type="sourcefile">app/app.component.html</context>          <context context-type="linenumber">5</context>        </context-group>      </trans-unit>    </body>  </file></xliff>

Configurați aplicația pentru a fi difuzată în mai multe limbi

Deschis angular.json fișier și adăugați următoarea configurație.

"build": {  ...  "configurations": {    ...    "es": {      "aot": true,      "i18nFile": "src/translate/messages.es.xlf",      "i18nFormat": "xlf",      "i18nLocale": "es",      "i18nMissingTranslation": "error"    }  }},"serve": {  ...  "configurations": {    ...    "es": {      "browserTarget": "i18nDemo:build:es"    }  }}

Aici am adăugat configurația pentru limba spaniolă. Am furnizat calea și formatul pentru fișierul i18n și am setat localizarea la „es”. Când executăm aplicația, conținutul aplicației va fi transmis din calea fișierului i18n furnizată.

În mod similar, puteți adăuga configurație pentru alte limbi.

Demo de execuție

După ce ați adăugat configurația pentru toate limbile din fișierul angular.json, rulați următoarea comandă pentru a porni serverul.

ng serve --configuration=es

Aceasta va lansa aplicația în configurația „es” și aplicația noastră va afișa traducerile în limba spaniolă.

Consultați ecranul de ieșire așa cum se arată mai jos:

Cum se implementeaza localizarea in Angular folosind instrumentele i18n

Configurațiile pe care le-am definit vor ajuta aplicația să ruleze numai în mașina locală. Nu putem schimba configurația după lansarea aplicației.

O aplicație de producție va avea nevoie ca aplicația să fie difuzată în diferite limbi, doar prin schimbarea adresei URL. De exemplu, mywebsite.com/es va furniza versiunea spaniolă a site – ului și mywebsite.com/en va furniza versiunea în limba engleză. În acest caz, aplicația va fi servită din diferite directoare virtuale pentru diferite limbi. Vom explora cum să faceți acest lucru în secțiunea următoare.

Modificați componenta aplicației pentru producție

Deschis app.component.ts și introduceți următorul cod.

import { Component, LOCALE_ID, Inject } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  title="i18nDemo";  languageList = [    { code: 'en', label: 'English' },    { code: 'hi', label: 'हिंदी' },    { code: 'es', label: 'Espanol' }  ];  constructor(@Inject(LOCALE_ID) protected localeId: string) { }}

Aici am definit o listă de limbi și codurile lor locale. Aceste coduri locale sunt coduri standard. Puteți obține cu ușurință o listă de limbi și codurile locale corespunzătoare printr-o simplă căutare Google.

Adăugați următoarele coduri în app.component.html fişier.

<ng-container *ngFor="let language of languageList"> <a href="https://www.freecodecamp.org/{{language.code}}/"> <button class="button">{{language.label}}</button> </a></ng-container>

Aici am definit trei butoane pentru trei limbi. La fiecare clic pe buton, ID-ul local se va schimba și id-ul local va fi adăugat și la adresa URL. Acest lucru ne va permite să difuzăm aplicația dintr-un alt director.

Introduceți următorul cod app.component.css fișier pentru a aplica stiluri acestor butoane.

.button {  background-color: darkslateblue;  border-radius: 5px;  color: white;  padding: 5px;  width: 10%;  margin: 5px;  text-decoration: none;  cursor: pointer;}

Script pentru a compila aplicația pentru producție

Trebuie să avem trei locații de servire diferite pentru trei limbi diferite. Pentru a construi pachetul de aplicații pentru o limbă pentru producție, vom folosi următoarea comandă:

ng build --prod --i18n-locale es --i18n-format xlf --i18n-file src/translate/messages.es.xlf --output-path=dist/es --baseHref /es/

Să înțelegem această poruncă. Am furnizat codul local pentru pachet, care este „es” pentru spaniolă. De asemenea, oferim calea și formatul fișierului i18n. Proprietatea căii de ieșire este necesară pentru a furniza locația pachetului de aplicații. Proprietatea baseHref specifică adresa URL de bază de la care va fi servit acest pachet.

Trebuie să executăm această comandă pentru fiecare limbă pe care o vom furniza schimbând calea fișierului i18n și baseHref valorile atributelor. Cu toate acestea, aceasta va fi o sarcină greoaie dacă avem multe limbi. Prin urmare, vom scrie un script pentru a genera un pachet pentru toate limbile. Deschis package.json fișier și adăugați următoarele scripturi în secțiunea „scripturi”.

"build-locale:en": "ng build --prod --i18n-locale en --i18n-format xlf --i18n-file src/translate/messages.en.xlf --output-path=dist/en --baseHref /en/","build-locale:es": "ng build --prod --i18n-locale es --i18n-format xlf --i18n-file src/translate/messages.es.xlf --output-path=dist/es --baseHref /es/","build-locale:hi": " ng build --prod --i18n-locale hi --i18n-format xlf --i18n-file src/translate/messages.hi.xlf --output-path=dist/hi --baseHref /hi/","build-locale": "npm run build-locale:en && npm run build-locale:es && npm run build-locale:hi"

Aici am creat trei scripturi pentru cele trei limbi pe care le folosim. Scriptul „build-locale” le va executa pe toate simultan. Toate aceste scripturi sunt perechi cheie-valoare. Numele cheie pe care le folosim aici sunt personalizabile și puteți utiliza orice nume la alegere. Pentru a crea pachetul de aplicații pentru toate limbile, rulați următoarea comandă:

npm run build-locale

La executarea cu succes, va crea un folder „dist” în folderul rădăcină al aplicației. Dosarul dist are trei sub-foldere pentru a ne servi aplicația în trei limbi diferite. Consultați imaginea prezentată mai jos:

1612136709 782 Cum se implementeaza localizarea in Angular folosind instrumentele i18n

Implementarea aplicației pe Firebase

Vom implementa această aplicație pe Firebase pentru a vedea schimbarea limbii în timp real. Consultați articolul meu Găzduirea unei aplicații Blazor pe Firebase și urmați pașii menționați pentru a implementa această aplicație angulară pe Firebase.

Odată ce aplicația este implementată, veți obține adresa URL de găzduire. Deschideți adresa URL și adăugați atributul baseHref așa cum am definit anterior, la adresa URL. Prin urmare, adresa URL va fi yoursite.com/es/ pentru limba spaniolă și așa mai departe.

Aplicația, pe care am construit-o aici, este găzduită la https://i18ndemo-415ef.firebaseapp.com/en/. Dacă deschideți această adresă URL, veți vedea rezultatul așa cum se arată mai jos:

1612136709 841 Cum se implementeaza localizarea in Angular folosind instrumentele i18n

Faceți clic pe linkurile furnizate. Adresa URL se va schimba și aplicația se va reîncărca în noua limbă.

Concluzie

În această postare, am învățat cum să internaționalizăm aplicația Angular folosind instrumentele i18n. De asemenea, am aplicat localizarea aplicației noastre angulare. Localizarea ne permite să ne difuzăm aplicația în diferite limbi, ceea ce ajută la extinderea acoperirii către un public mondial. De asemenea, am aflat cum funcționează localizarea într-un mediu de producție, implementând aplicația noastră pe Firebase.

Obțineți codul sursă de la GitHub și jucați-vă pentru o mai bună înțelegere.

Te pregătești pentru interviuri ?! Citiți articolul meu despre Întrebări de codificare C # pentru interviuri tehnice

Vezi si

Publicat inițial la https://ankitsharmablogs.com/