8

我正在为我的Angular应用调查不同的翻译工具。到目前为止,angular-translate似乎是一个很好的解决方案。它使用的是结构化的,如“郎/ NAMESPACE/LANG.json”(如“郎/用户/ de.json”),看起来像这样每个语言的JSON文件:用于组织JSON文件翻译的工具

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

可选的,JSON也可能嵌套。

这似乎很容易使用。但是,实际添加新的或改变现有翻译时会稍微不方便。您必须来回更改不同的语言文件,并且找到特定密钥的翻译很麻烦。比较不同的翻译也不方便。

是否有任何工具可以读取本地翻译文件,并且能够为每个键显示不同的翻译版本?无论是应用程序(Mac OS支持是必须的)还是基于浏览器的。

+1

可能的重复:http://stackoverflow.com/questions/16877062/program-for-managing-json-localization-files – Ganbin

+0

可能的重复:http://stackoverflow.com/questions/12664823/angular-js -support-for-localization –

回答

-1

看看角翻译:https://github.com/angular-translate/angular-translate

所有DIY乡亲:

你可以找到本地化文件角:这里

这些文件将帮助您与内置的角过滤器:日期,货币和号码。令人惊讶......迄今为止。

现在你想使用自己的文本,比你所需要的只是angular.js依赖注入的力量。创建一个新的文件,如:“myTexts_en_us.js”和使用$ provide.value这样的:

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

详情: http://jsfiddle.net/4tRBY/24/

对于真实世界的使用,你应该添加过滤器:http://jsfiddle.net/4tRBY/41/

提示:

  • 确保插入新的本地化文件到您的HTML用手,JS或服务器。 (服务器是这里的最佳选择!)
  • 如果您包含一个角度本地文件,则不需要在您的应用程序模块中进行设置。 (您将自动获得$ locale - 请参阅小提琴)
  • 为您的$ provide-value添加一个id密钥 - 并将该值设置为您在文件中使用的语言代码 - 这将在测试中派上用场。
+0

也许我还没有让自己清楚。我知道并已经使用角度翻译;我甚至在我的问题中加入了一个链接。但是,我真正想要的是一种轻松管理包含对不同语言的翻译的JSON文件的工具,因为在简单的文本编辑器中更改和扩展它们非常麻烦。 – str

0

我需要同样的事情,我自己,所以我只是写这样的:

我有2个下拉列表与现有的语言,从语言1〜语言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); 
      }); 
     } 

了解您的JSON文件的文件夹中的JavaScript为一些阵列, 对于每个数组,只需使用输入字段创建一个ng-repeat,以便您可以看到密钥和所有翻译,当您进行更改时,创建一个按钮,将数组和语言文件名发送给此脚本: (我只接受当时的一种语言)

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

它实际上是很容易创建,我想将它添加到我的网站,让每个人都可以帮助翻译,但它从来没有在那里。

我不能给所有的代码,但我thik这应该让你开始。

Result in webpage

+0

感谢您的回答。不幸的是,我自己写这样的工具目前是不行的。 – str

5

我还没有尝试过(还),但是这可能工作:https://github.com/jcbvm/i18n-editor

Java编写的,所以在Mac上会(最有可能)的工作。

+2

谢谢,我会试试。有人低估了这个,虽然它完全回答了这个问题... – str

+1

这应该被标记为答案。谢谢。 –