Tool to organize translations in JSON files

I'm investigating different translation tools for my Angular app. So far, angular-translate seems to be a good solution for that. It uses per-language JSON files that are structured like "lang/NAMESPACE/LANG.json" (e.g. "lang/user/de.json") and look like this:

{   "key1": "Value1",   "key2": "Value2",   "key3": "Value3",   } 

Optionally, the JSON might also be nested.

This seems to be easy to use. However, is slightly inconvenient when actually adding new or changing existing translations. You have to change back and forth different language files and it is cumbersome to find a translation for a certain key. Comparing different translations is also inconvenient.

Is there any tool that can read local translation files and is able to show different translations side-by-side for each key? Either an application (Mac OS support is a must) or browser-based.

2 Answers

Answers 1

Take a look at angular-translate: https://github.com/angular-translate/angular-translate

for all DIY folks:

You can find localized files for angular: here

These files will help you with the build-in angular filters: date, currency and number. Amazing... so far.

Now you want to use your own texts, than all you need is the power of angular.js dependency injection. Create a new file like: "myTexts_en_us.js" and use $provide.value like this:

$provide.value("myTexts", {firstText : "This is my localized text"}); 

For details: http://jsfiddle.net/4tRBY/24/

For real-world-use, you should add a filter: http://jsfiddle.net/4tRBY/41/

Tips:

• Make sure to insert your new localization-file into your html by hand, JS or Server. (Server is the best choice here!)
• if you include one of the angular-local files, you do not need to set it up in your app module. (you will have $locale automatically - see the fiddle)
• add an id key to your $provide-value - and set the value to a language code you are using in your file - this will be come in handy for testing.

Answers 2

I needed the same thing myself and so I just wrote it like this:

I had 2 dropdowns with existing languages, from language 1 to language 2 was the idea.

on select both language I read the json files into arrays and displayed it with an ng-repeat using two way bindings so when the content of an input field changed, the array got updated instantly.

The apply method then uploaded the filename and the array towards a php file which wrote it to the document.

eng.json:

{   "ALBUM":{     "TITEL":"album",     "LAAD_MEER":"Load more",     "ALBUMS":"Back to albums"   },   "INFO":{     "TITEL":"information",     "HOTELS":"Hotels",     "SPORTHAL":"Sportscenter",     "INTHISHOTEL":"In this facility"   } } 

my html:

<section ng-if="toSelected"          class="bg-g-r bg-u-1 card flyin"          ng-repeat="section in fromContents"          id="{{'trans'+section.TITEL}}"          class="translatorSection">      <p class="paddedText bg-u-1 blueElement">{{section.TITEL}}</p>     <div class="textContainer bg-u-1"          ng-repeat="line in section">         <p style="color:grey">{{line}}</p>         <textarea class="bg-u-1" ng-model="toContents[getKeys(toContents,$parent.$index)][getKeys(section,$index)]"                 style="padding: 8px;border-radius: 10px"                 ></textarea>     </div> </section> 

my controller:

//Bound to the dropdowns in my case $scope.fromSelected = null; //language from wich to start $scope.toSelected = null; //language i wish to extend  $scope.fromContents = null; $scope.toContents = null;  $scope.$watch('fromSelected', function (abbr) {     if(abbr) {         jsonFactory.getLanguageContents(abbr).then(function (data) {             $scope.fromContents = data.data;         });     } }); $scope.$watch('toSelected', function (abbr) {     if(abbr) {         jsonFactory.getLanguageContents(abbr).then(function(data){             $scope.toContents = data.data;         });     } });  $scope.getKeys = function (array,index){     return Object.keys(array)[index]; };  $scope.getToValueByKey = function (key){     return $scope.toContents[key]; };  $scope.apply = function (){                 jsonFactory.UploadLanguage($scope.toSelected,$scope.toContents)         .then(function(data){             alert('update succesfull, please reload')         }); }; 

Jsonfactory:

    function getLanguageContents(lang) {         var deferred = $q.defer(),             httpPromise = $http.get('languages/'+lang+'.json');          httpPromise.then(function (response) {             deferred.resolve(response);         }, function (error) {             console.error(error);         });          return deferred.promise;     }         function UploadLanguage(lang,content){             return $q(function(resolve,reject){                 var xmlhttp,                     params = 'lang='+lang+'&content='+JSON.stringify(content);                  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari                     xmlhttp = new XMLHttpRequest();                 }                 else { // code for IE6, IE5                     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');                 }                  xmlhttp.open('POST', 'http://localhost:63342/website/app/php/translator.php', true);                 xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');                 xmlhttp.onreadystatechange = function() {                     if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {                         var data = xmlhttp.responseText;                         resolve(data);                     }else if (xmlhttp.readyState === 4){                         reject('not found');                     }                 };                 xmlhttp.send(params);             });         } 

Read you folder with json files in javascript into some arrays, For each array just create an ng-repeat using input fields so you see the key and all you translations with it, when you made changes create a button that sends you array and the language filename to this php script: (i only accept one language at the time)

<?php   header("Access-Control-Allow-Origin: *");   $taal = $_POST["lang"];   $content = $_POST["content"];   $myfile = fopen("../languages/".$taal.".json", "w");   fwrite($myfile, $content);   fclose($myfile);   echo $taal;   echo $content; ?> 

It was actually very easy to create, I wanted to add it to my site, so everyone could help translating but it never got there.

I cant give all the code, but i thik this should get you started.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati