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

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

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

DEMO