Angular app。これまでのところ、 angular-translate はさまざまな翻訳ツールを調査しています。言語ごとのJSONファイルを使用していますこれらは「lang/NAMESPACE/LANG.json」のように構造化されており(たとえば、「lang/user/de.json」)、次のようになります。
{
"key1": "Value1",
"key2": "Value2",
"key3": "Value3",
}
オプションで、JSONをネストすることもできます。
これは使いやすいようです。ただし、実際に新しい翻訳を追加したり、既存の翻訳を変更したりする場合は、少し不便です。異なる言語ファイルを前後に変更する必要があり、特定のキーの翻訳を見つけるのは面倒です。異なる翻訳を比較することも不便です。
local翻訳ファイルを読み取ることができ、キーごとに異なる翻訳を並べて表示できるツールはありますか?アプリケーション(Mac OSのサポートは必須)またはブラウザベースのいずれかです。
私は(まだ)試していませんが、これはうまくいくかもしれません: https://github.com/jcbvm/i18n-editor
Javaで書かれているため、(おそらく)Macでも動作します。
私自身も同じものが必要だったので、次のように書きました。
私は既存の言語で2つのドロップダウンを持っていました。
両方の言語を選択すると、jsonファイルが配列に読み込まれ、双方向バインディングを使用してng-repeatで表示されたため、入力フィールドの内容が変更されると、配列が即座に更新されました。
次に、applyメソッドは、ファイル名と配列をドキュメントに書き込んだphpファイルにアップロードしました。
eng.json:
{
"ALBUM":{
"TITEL":"album",
"LAAD_MEER":"Load more",
"ALBUMS":"Back to albums"
},
"INFO":{
"TITEL":"information",
"HOTELS":"Hotels",
"SPORTHAL":"Sportscenter",
"INTHISHOTEL":"In this facility"
}
}
私の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>
私のコントローラー:
//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);
});
}
JavaScriptでjsonファイルを含むフォルダーをいくつかの配列に読み取ります。各配列について、入力フィールドを使用してng-repeatを作成するだけで、キーとすべての翻訳が表示されます。変更を加えると、配列と言語を送信するボタンが作成されますこのphpスクリプトのファイル名:(私は一度に1つの言語しか受け入れません)
<?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;
?>
実際に作成するのは非常に簡単でした。自分のサイトに追加したかったので、誰もが翻訳を手伝うことができましたが、そこに到達することはありませんでした。
私はすべてのコードを与えることはできませんが、これであなたが始めることができると思います。