Course Progress 97%

AngularJS Localization

← AngularJS Testing AngularJS Migration & Future →

AngularJS में Localization का मतलब है application को अलग-अलग languages, regions और cultures के अनुसार adapt करना। इसमें language translation, date, time, number और currency formatting शामिल होता है। Global users के लिए application बनाते समय localization एक बहुत important concept है।

इस chapter में आप सीखेंगे:

  • Localization क्या है और क्यों जरूरी है
  • AngularJS में i18n और l10n का concept
  • ngLocale module
  • Date, number और currency localization
  • Multiple languages support करने के तरीके
  • Best practices

Localization क्या है

Localization (l10n) का मतलब है:

  • Content को user की language में दिखाना
  • Date, time, number format region के अनुसार बदलना
  • Currency और symbols सही तरीके से display करना

Related terms:

  • i18n (Internationalization) – App को multi-language ready बनाना
  • l10n (Localization) – Specific language/region के लिए adapt करना

AngularJS में Localization Support

AngularJS built-in support देता है:

  • Date filter
  • Number filter
  • Currency filter
  • Locale-specific formatting

लेकिन text translation के लिए extra solution चाहिए।

ngLocale Module

ngLocale AngularJS का built-in module है जो locale-specific rules define करता है।

ngLocale Include करना

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

var app = angular.module("myApp", ["ngLocale"]);

Explanation

  • angular-locale_hi-in.js Hindi (India) locale define करता है
  • Date, number और currency automatically localized हो जाते हैं

Date Localization

<p>{{ today | date }}</p>
<p>{{ today | date:'fullDate' }}</p>

$scope.today = new Date();

Explanation

  • Date format locale के अनुसार change होता है
  • Month और day names local language में आते हैं

Number Localization

<p>{{ price | number }}</p>

$scope.price = 1234567.89;

Explanation

  • Number formatting locale rules follow करता है
  • Decimal और grouping separators region-specific होते हैं

Currency Localization

<p>{{ amount | currency }}</p>

$scope.amount = 5000;

Explanation

  • Currency symbol locale के अनुसार show होता है
  • Formatting automatically apply होती है

Text Translation in AngularJS

AngularJS core में text translation built-in नहीं है, इसलिए common approach:

  • Dictionary object
  • Custom filter
  • Third-party libraries

Simple Dictionary-Based Localization

app.controller("ctrl", function($scope) {
  $scope.lang = "en";

  $scope.texts = {
    en: { welcome: "Welcome" },
    hi: { welcome: "स्वागत है" }
  };
});

<p>{{ texts[lang].welcome }}</p>

Explanation

  • Language code key की तरह use होती है
  • UI text dynamic change होता है

Custom Filter for Translation

app.filter("translate", function() {
  var dict = {
    en: { hello: "Hello" },
    hi: { hello: "नमस्ते" }
  };

  return function(key, lang) {
    return dict[lang][key];
  };
});

<p>{{ 'hello' | translate:lang }}</p>

Explanation

  • Filter reusable translation logic देता है
  • HTML clean रहती है

Dynamic Language Switching

<select ng-model="lang">
  <option value="en">English</option>
  <option value="hi">Hindi</option>
</select>

Explanation

  • User language switch कर सकता है
  • UI instantly update होती है

Locale Change Limitations

AngularJS में:

  • ngLocale dynamically change नहीं किया जा सकता
  • Locale change करने के लिए page reload जरूरी होता है

Best Practices for AngularJS Localization

  • Text और content separate रखें
  • Hard-coded strings avoid करें
  • Date और currency filters use करें
  • Locale files carefully manage करें
  • Translation keys meaningful रखें

Common Mistakes

  • Hard-coded text use करना
  • Locale file include न करना
  • Date formatting manually करना
  • Dynamic locale switching expect करना

Summary

इस chapter में आपने सीखा:

  • AngularJS localization concepts
  • ngLocale module का use
  • Date, number और currency localization
  • Text translation techniques
  • Localization best practices
← AngularJS Testing AngularJS Migration & Future →
  • Home