using Angularjs translation provider to translate text to hindi

Question

I have an Angularjs app and it uses a Angularjs Translation provider which has the following configuration -

app.config(['$translateProvider', function($translateProvider){
    // Register a loader for the static files
    // So, the module will search missing translation tables under the specified urls.
    // Those urls are [prefix][langKey][suffix].
    $translateProvider.useStaticFilesLoader({
      prefix: '/src/l10n/',
      suffix: '.js'
    });
    // Tell the module what language to use by default
    $translateProvider.preferredLanguage('en');
    // Tell the module to store the language in the local storage
    $translateProvider.useLocalStorage();
  }]);

Now i have files like en.js inside directory src/l10n which has the following sample content -

{

"header" : {
  "navbar" : {
    "UPLOAD" : "Upload",
    "new" : {
      "NEW" : "New",
      "PROJECT" : "Projects",
      "TASK" : "Task",
      "USER" : "User",
      "EMAIL" : "Email"
    },
    "NOTIFICATIONS" : "Notifications"
  }
}

and I am using this in HTML as -

<div translate="header.navbar.UPLOAD"> </div>

Which puts the content inside the div according to the language selected so basically I want to understand how to create such a translation file like en.js which can translate and display hindi on screen

Since, I only have to create a translation file and don't need to translate english to hindi in realtime, I don't think the results/libraries I found on internet that convert english to hindi using google apis or other are suitable for my use case.

So, is it possible to display the text in hindi on my browser using a translation file that I could create. If yes then how can I do it ?

Answer 1

You can create a file named hi.js in your src/l10n folder, containing the structure exactly similar to en.js, but with your Hindi translations.

To switch languages on runtime, use

$translateProvider.use('hi');