आज की विस्तृत डिजिटल दुनिया में, वेब डेवलपर्स का लक्ष्य वैश्विक दर्शकों से जुड़ना है। इसे प्राप्त करने की एक प्रमुख रणनीति अपने एंगुलर एप्लिकेशन को बहुभाषी अनुभव में बदलना है। अंतर्राष्ट्रीयकरण (i18n) में आपका स्वागत है, जहां आपका ऐप उपयोगकर्ताओं के साथ उनकी मूल भाषाओं में संवाद कर सकता है, चाहे वे कहीं भी हों। इस ब्लॉग में, हम आपके एंगुलर प्रोजेक्ट में i18n को एकीकृत करने पर ध्यान देंगे, जिससे यह सुनिश्चित होगा कि आपका ऐप दुनिया भर के लोगों के लिए सुलभ और उपयोगकर्ता के अनुकूल है।

एंगुलर में अंतर्राष्ट्रीयकरण (i18n) का परिचय

अपने वेब ऐप को दुनिया भर के उपयोगकर्ताओं को जोड़ने वाले एक पुल के रूप में कल्पना करें। सभी के लिए एक स्वागत योग्य और उपयोगकर्ता-अनुकूल अनुभव बनाने के लिए, उनकी भाषा में संवाद करना आवश्यक है। अंतर्राष्ट्रीयकरण (i18n) आपके ऐप को विभिन्न भाषाओं और क्षेत्रों के अनुकूल बनाने की कुंजी है। एंगुलर आपको इसे पूरा करने में मदद करने के लिए मजबूत उपकरण और सुविधाएँ प्रदान करता है।

एक नई कोणीय परियोजना की स्थापना

अपनी i18n यात्रा शुरू करने से पहले, आइए एक नया Angular प्रोजेक्ट बनाएं।

ng new i18n-app

आप एंगुलर सीएलआई का उपयोग करके एक नया एंगुलर प्रोजेक्ट शुरू करने के लिए निम्नलिखित कमांड का उपयोग कर सकते हैं। सेटअप प्रक्रिया के दौरान, आप अपने प्रोजेक्ट को कॉन्फ़िगर कर सकते हैं, जिसमें एंगुलर रूटिंग को सक्षम करने और स्टाइलशीट प्रारूप (जैसे, सीएसएस, एससीएसएस) चुनने जैसे विकल्प शामिल हैं। उन सेटिंग्स का चयन करना सुनिश्चित करें जो आपके प्रोजेक्ट की आवश्यकताओं से मेल खाती हों।

एंगुलर के i18n टूल्स को इंस्टॉल और कॉन्फ़िगर करना

1. अपनी i18n यात्रा शुरू करने के लिए, हमें सही टूल की आवश्यकता होगी। हम अपने ऐप को बहुभाषी बनाने के लिए Angular के i18n टूल इंस्टॉल और सेटअप करेंगे।

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

1. एक बार एनजीएक्स-ट्रांसलेट स्थापित हो जाने पर, हम इसे अपने एंगुलर मॉड्यूल या कॉन्फिग में आयात कर सकते हैं और अनुवाद सेवा स्थापित कर सकते हैं:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

यदि आप app.config फ़ाइल का उपयोग कर रहे हैं, तो बस NgModule को निम्नलिखित कोड से बदलें:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

इस कोड में, हम आवश्यक एनजीएक्स-अनुवाद मॉड्यूल आयात करते हैं और HttpLoaderFactory फ़ंक्शन का उपयोग करके अनुवाद लोडर को कॉन्फ़िगर करते हैं। HttpLoaderFactory फ़ंक्शन सर्वर से अनुवाद फ़ाइलों को एसिंक्रोनस रूप से लोड करने के लिए HttpClient मॉड्यूल का उपयोग करता है।

अनुवाद फ़ाइलें बनाना

एक बार अनुवाद सेवा स्थापित हो जाने के बाद, हम उस प्रत्येक भाषा के लिए अनुवाद फ़ाइलें बना सकते हैं जिसका हम समर्थन करना चाहते हैं। अनुवाद फ़ाइलें JSON फ़ाइलें हैं जो कुंजियों को अनुवादित स्ट्रिंग में मैप करती हैं।

नाम के रूप में आवश्यक भाषा कोड के साथ फ़ाइलें बनाएं और उनमें अनुवाद जोड़ें।

उदाहरण के लिए, यहां एक अंग्रेजी अनुवाद फ़ाइल है:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

और यहां एक जर्मन अनुवाद फ़ाइल है:

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

यहां फ़ोल्डर संरचना और फ़ाइलों के नाम हैं।

नोट: अनुवाद फ़ाइलें समान कुंजियों का उपयोग करती हैं लेकिन प्रत्येक भाषा के लिए अलग-अलग मानों के साथ। यह कोड को संशोधित किए बिना हमारे एप्लिकेशन में भाषाओं के बीच स्विच करना सरल बनाता है।

टेम्पलेट्स में अनुवाद का उपयोग करना

हमारी अनुवाद फ़ाइलें तैयार होने के साथ, अब हम उन्हें अपने एंगुलर टेम्पलेट्स में एकीकृत कर सकते हैं। पहला कदम अनुवाद सेवा को हमारे घटक में शामिल करना है:

App.component.ts :

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

इस कोड में, हम TranslateService को अपने घटक में इंजेक्ट करते हैं और अंग्रेजी को डिफ़ॉल्ट भाषा के रूप में सेट करते हैं। हम एक ट्रांसलैंग्वेज विधि भी परिभाषित करते हैं जो हमें एप्लिकेशन की भाषा बदलने की अनुमति देती है।

भाषा अनुवाद के लिए एक घटक बनाएं

ng g c LanguageTranslation

घटक बनाने के बाद, हम कई भाषाओं के बीच अनुवाद करने के लिए अनुवाद सेवा का उपयोग कर सकते हैं।

EnglishTranslation.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

EnglishTranslation.component.html

{{ "title" | translate }}


    English
    German

इस कोड में, हम एक लैंग्वेजट्रांसलेशनकंपोनेंट बनाते हैं जो TranslateService को इंजेक्ट करता है और अंग्रेजी और जर्मन के बीच स्विच करने के लिए दो बटन प्रदान करता है। जब एक बटन क्लिक किया जाता है, तो हम उचित भाषा कोड के साथ TranslateService पर Translateभाषा पद्धति को कॉल करते हैं।

नोट: this.translate.use('DE') का उपयोग करते समय, सही भाषा कोड का उपयोग करना सुनिश्चित करें क्योंकि यह केस-संवेदी है और सुनिश्चित करें कि फ़ाइल का नाम सटीक है।

निष्कर्ष:

अंतर्राष्ट्रीयकरण आधुनिक सॉफ्टवेयर विकास का एक प्रमुख तत्व है, और एंगुलर बहुभाषी एप्लिकेशन बनाने के लिए मजबूत उपकरण प्रदान करता है। एनजीएक्स-ट्रांसलेट लाइब्रेरी के साथ, एंगुलर में i18n को लागू करना सरल और अधिक अनुकूलनीय हो जाता है।

इस आलेख में, हमने अनुवाद फ़ाइलों को उत्पन्न करने, टेम्पलेट्स में अनुवाद लागू करने और एंगुलर एप्लिकेशन के भीतर भाषाओं को स्विच करने के लिए एनजीएक्स-अनुवाद का उपयोग करने का तरीका बताया है। इन दिशानिर्देशों का पालन करके, आप आसानी से दुनिया भर के उपयोगकर्ताओं के लिए सुलभ बहुभाषी ऐप बना सकते हैं।

धन्यवाद!

यदि आपके कोई प्रश्न हों तो बेझिझक टिप्पणी छोड़ें