Internationalization (i18n) in AngularJS Apps

अब हम एक ऐसे चैप्टर पर आए हैं जो आपकी AngularJS App को globally usable बनाता है — यानी multi-language support के साथ:

🌍 Internationalization (i18n) in AngularJS Apps

(एक ही App को English, Hindi, French… किसी भी भाषा में दिखाइए!)

---

📌 i18n का मतलब क्या है?

i18n = “internationalization” (i और n के बीच 18 अक्षर होते हैं)
इसका मतलब है — आपकी App में content को अलग-अलग भाषाओं में दिखाने की क्षमता।

---

🎯 AngularJS में i18n कैसे काम करता है?

AngularJS खुद एक i18n system provide करता है:

1. Date, currency, number formatting के लिए built-in i18n module
2. Text translation के लिए external module जैसे angular-translate

---

✅ 1. Built-in i18n Filters (Date, Currency, Number)

<p>{{ today | date:'fullDate' }}</p>
<p>{{ 1234.56 | currency:'₹' }}</p>
<p>{{ 0.321 | percent }}</p>

🔁 AngularJS automatically localize करता है formatting को — पर text translation के लिए external solution चाहिए।

---

✅ 2. Text Translation with angular-translate

🔹 Step 1: CDN Include करें

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>

---

🔹 Step 2: Module Configuration

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Welcome',
    GREETING: 'Hello, {{name}}!',
  });

  $translateProvider.translations('hi', {
    TITLE: 'स्वागत है',
    GREETING: 'नमस्ते, {{name}}!',
  });

  $translateProvider.preferredLanguage('en'); // default language
});

---

🔹 Step 3: HTML में Use करें

<h1>{{ 'TITLE' | translate }}</h1>
<p>{{ 'GREETING' | translate:{name: 'Rahul'} }}</p>

<select ng-model="lang" ng-change="changeLang(lang)">
  <option value="en">English</option>
  <option value="hi">हिन्दी</option>
</select>

---

🔹 Step 4: Language Change Function

app.controller('MainCtrl', function($scope, $translate) {
  $scope.lang = 'en';

  $scope.changeLang = function(langKey) {
    $translate.use(langKey);
  };
});

✅ अब user language select करके पूरी app का language बदल सकता है — बिना reload के!

---

🧩 Alternative: External JSON File से Translation Load करें

$translateProvider.useStaticFilesLoader({
  prefix: '/i18n/lang-',
  suffix: '.json'
});

Directory Example:

/i18n/
 ├── lang-en.json
 └── lang-hi.json

lang-en.json:

{
  "TITLE": "Welcome",
  "GREETING": "Hello, {{name}}!"
}

---

🌐 Bonus: AngularJS $locale के साथ Built-in Formatting Change

<script src="angular-locale_hi-in.js"></script>

इससे currency, date, decimal आदि हिंदी locale के हिसाब से format होंगे।

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में date और currency को locale के हिसाब से कैसे format किया जाता है?
2. angular-translate का use करके language switch कैसे किया जाता है?
3. Language-specific JSON files का structure कैसा होता है?

---

✅ आपने क्या सीखा?

• AngularJS app को multi-language support कैसे दें
• Built-in i18n filters (date, currency, number) कैसे काम करते हैं
• External translation के लिए angular-translate कैसे configure करें
• Runtime में language switch कैसे implement करें
• JSON files से translation strings कैसे load करें

---

🎯 अब आपकी AngularJS app worldwide audience के लिए ready है — चाहे user हिंदी बोले या अंग्रेज़ी, या कोई और भाषा।