javascript - Symfony2 和 Angular.JS 之间共享的翻译

Question

我正在寻找一种在 Symfony2 应用程序和 Angular.JS 应用程序之间共享翻译的好方法，它们本质上是相同的应用程序，但它们的行为却截然不同。

首先，我制定了一条指令，允许在我的 Angular JS 应用程序中使用 [[ Variable ]] 进行模板化，因此我可以将 twig 中的变量与 Angular 中的变量一起使用。

所以我想要实现的是将我的句子翻译成用户喜欢的本地化内容。

所以我的结论是我想使用 Symfony 的翻译功能，因为 Angular 对此没有很好的支持。我还想使用 Symfony 包含的所有内置功能，例如自动更新文件、支持 YAML 等。但我需要弄清楚如何将它们传输到我的 JS 应用程序以及如何在 Symfony 中检测它们，所以两个应用程序都可以使用它们。

所以我最初的想法:

更改翻译的捕获或至少在范围中添加一个额外的翻译。

{% trans %}Hello [[name]]{% endtrans %}

<trans name="My Name" translation="Hello [[name]]" />

并且还支持复数等所有其他功能。

这将生成一个包含翻译和复数等的文件。

通过 Angular ajax调用请求语言并将其保存到客户端的本地存储中。

这将允许我用正确的值替换上面的 trans 指令。 这不是设置问题。但是，它需要从任何格式导出为 Angular 可以读取的 JSON。

然后需要一个匹配器，并且需要支持复数和所有其他可用功能。

其他想法

一般来说，当您制作 Angular.JS 应用程序时，最好不要使用 Symfony2 翻译，从而仅使用 Angular 翻译，否则用 Symfony2 Twigs 编写并翻译的文本可能无法在 Angular 中翻译。但我发现这些文件的生成如果 Symfony 能够捕获并吐出会更好。

我认为这需要做一些工作才能扎实，但我觉得这需要解决。感谢任何想法和有用的评论，我正在考虑在 GitHub 上启动一个项目，以为此提供适当的支持。但如果已经有这样的东西，那么使用它可能会更好。

/马库斯

Answer 1

这是使用自定义 Angular 过滤器来简化标记的建议

HTML:

<div ng-app="myApp" ng-controller="MainCtrl">
    {{ item |translate }}
</div>

JS

var words={
    'fr': {'Bus': "AutoBus"}  

};

var app = angular.module('myApp', []);
app.constant('lang','fr');

app.factory('wordService',function(lang){   
    return {
        getWord:function(val){
            return words[lang][val];
        }
    }
})
app.filter('translate', function(wordService){
    return function(val){
        return wordService.getWord(val)
    }
})

app.controller('MainCtrl', function($scope) {
  $scope.item = 'Bus';
});

您可以使用服务从服务器或本地存储请求翻译文件(如果它们已存在)。只需在运行时设置语言即可。

您可以以任何适合您在两个应用程序中使用的方式重新配置单词对象。

DEMO