8

Ich untersuche verschiedene Übersetzungstools für meine Angular-App. Bisher scheint angular-translate dafür eine gute Lösung zu sein. Es verwendet pro-Sprache JSON-Dateien, die wie "lang/namespace/LANG.json" (zB "lang/user/de.json") strukturiert sind und wie folgt aussehen:Tool zum Organisieren von Übersetzungen in JSON-Dateien

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

Optional kann das JSON könnte dir auch verschachtelt sein.

Dies scheint einfach zu bedienen zu sein. Es ist jedoch etwas unpraktisch, wenn Sie neue Übersetzungen hinzufügen oder vorhandene ändern. Sie müssen verschiedene Sprachdateien hin- und herwechseln und es ist mühsam, eine Übersetzung für einen bestimmten Schlüssel zu finden. Der Vergleich verschiedener Übersetzungen ist ebenfalls unbequem.

Gibt es ein Tool, das lokale Übersetzungsdateien lesen kann und verschiedene Übersetzungen nebeneinander für jeden Schlüssel anzeigen kann? Entweder eine Anwendung (Mac OS-Unterstützung ist ein Muss) oder browserbasiert.

+1

Mögliche Vervielfältigung von: http://stackoverflow.com/questions/16877062/program-for-managing-json-localization-files – Ganbin

+0

Mögliche Duplizierung zu: http://stackoverflow.com/questions/12664823/angular-js -support-for-localisation –

Antwort

-1

Werfen Sie einen Blick auf Winkel übersetzen: https://github.com/angular-translate/angular-translate

für alle DIY Leute: hier

Diese Dateien werden Ihnen helfen, mit der build-in Winkel:

Sie lokalisieren Dateien für Winkel finden Filter: Datum, Währung und Nummer. Erstaunlich ... so weit.

Jetzt möchten Sie Ihre eigenen Texte verwenden, als alles, was Sie brauchen, ist die Macht der angular.js Abhängigkeitsinjektion. Erstellen Sie eine neue Datei wie: "myTexts_en_us.js" und die Verwendung $ provide.value wie folgt aus:

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

Einzelheiten: http://jsfiddle.net/4tRBY/24/

Für real-world-Einsatz, sollten Sie einen Filter hinzufügen: http://jsfiddle.net/4tRBY/41/

Tipps:

  • Stellen Sie sicher, Ihre neue Lokalisierungs-Datei in Ihre hTML von Hand, JS oder Server einzufügen. (Server ist hier die beste Wahl!)
  • Wenn Sie eine der eckigen lokalen Dateien hinzufügen, müssen Sie sie nicht in Ihrem App-Modul einrichten. (Sie haben $ locale automatisch - siehe die Geige)
  • fügen Sie einen ID-Schlüssel zu Ihrem $ bieten-Wert - und setzen Sie den Wert auf einen Sprachcode, den Sie in Ihrer Datei verwenden - das wird zum Testen nützlich sein.
+0

Vielleicht habe ich mich nicht klar genug gemacht. Ich kenne und verwende bereits eckig-translate; Ich habe in meiner Frage sogar einen Link darauf gesetzt. Was ich wirklich suche, ist jedoch ein Tool zur einfachen Verwaltung von JSON-Dateien, die Übersetzungen in verschiedene Sprachen enthalten, da das Ändern und Erweitern in einem einfachen Texteditor mühsam ist. – str

0

brauchte ich die gleiche Sache selbst und so ist es, wie ich gerade geschrieben habe dies:

Ich hatte zwei Dropdown-Listen mit den bestehenden Sprachen, von Sprache 1 Sprache 2 die Idee war.

Bei Auswahl beider Sprachen lese ich die JSON-Dateien in Arrays und zeige sie mit einem ng-repeat unter Verwendung von Zwei-Wege-Bindungen an. Wenn sich der Inhalt eines Eingabefeldes änderte, wurde das Array sofort aktualisiert.

Die Methode apply hat dann den Dateinamen und das Array in eine PHP-Datei hochgeladen, die es in das Dokument geschrieben hat.

ger.json:

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

mein 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> 

mein 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); 
      }); 
     } 

Lesen Sie den Ordner mit JSON-Dateien in Javascript in einigen Arrays, Für jedes Array erstellen Sie einfach eine ng-repeat mit Eingabefeldern, so dass Sie den Schlüssel und alle Ihre Übersetzungen sehen, wenn Sie Änderungen vorgenommen haben, erstellen Sie eine Schaltfläche, die Array und den Dateinamen an dieses PHP-Skript sendet: (Ich akzeptiere nur eine Sprache zu dem Zeitpunkt)

<?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; 
?> 

es war eigentlich sehr einfach zu erstellen, wollte ich es auf meiner Website hinzuzufügen, so dass jeder der Übersetzung helfen konnte, aber es kam nie dort.

Ich kann nicht den ganzen Code geben, aber ich thik das sollte Sie beginnen.

Result in webpage

+0

Danke für Ihre Antwort. Leider ist es derzeit nicht möglich, ein solches Tool selbst zu schreiben. – str

5

Ich habe es nicht versucht (noch) nicht, aber das könnte funktionieren: https://github.com/jcbvm/i18n-editor

in Java geschrieben, so wird (wahrscheinlich) arbeiten auf einem Mac.

+2

Danke, ich werde das versuchen. Jemand hat das abgelehnt, obwohl es genau die Frage beantwortet ... – str

+1

Dies sollte als Antwort markiert werden. Vielen Dank. –