angularjs i18n项目设置

Question

I just started with angularjs yesterday so assume I know nothing about it. 我昨天刚开始使用angularjs，所以假设我一无所知。 The first thing I'm attempting to do is put all the labels for my UI into a file (so that we can swap them out for i18n). 我要做的第一件事就是将我的UI的所有标签放入一个文件中（这样我们就可以将它们换成i18n）。

From what I understand this is doable by importing the js file and then adding the function that contains the labels as a controller in the html, like this: 根据我的理解，这是可行的，导入js文件，然后在html中添加包含标签作为控制器的函数，如下所示：

<html ng-app>
...
<script src="js/i18n/en-US.js"></script> <!-- function inside this named lang -->
...
<body>
... <!-- some html -->
<div ng-controller="lang">
<label class="span5">{{nameOfLabelVar}}</label>
</div>
</body>
</html>

This all works. 这一切都有效。 But I'm a bit lost when it comes to code organisation now. 但是现在我在代码组织方面有点迷失。 Inside that div are some choice menus that I'll want to use angular on too. 在div内部是一些选择菜单，我也想要使用角度。

I'd like the js code for the labels to be in one file and the view logic for the page to be in a different js file (name-of-that-page-view-model.js). 我希望标签的js代码在一个文件中，并且页面的视图逻辑在不同的js文件中（name-of-that-page-view-model.js）。 I'm unsure as to how to accomplish this. 我不确定如何做到这一点。 From what I can tell you cannot nest ng-controller tags and I cannot add them to the specific tag that it would be for. 从我可以告诉你不能嵌套ng-controller标签，我不能将它们添加到它将用于的特定标签。

It would be nice to be able to have one global controller that sort of imports all of the other js files for the page. 能够有一个全局控制器可以导入页面的所有其他js文件，这将是很好的。

I bet this is baked into the framework and I've missed it, so a nudge in the right direction is appreciated. 我敢打赌，这已经融入了框架，我已经错过了它，所以在正确的方向上推动是值得赞赏的。

Thanks. 谢谢。

Answer 1

after doing a lot of research, here is my 2 cents: my personal conclusion is that angular-translate library is the best for me so far. 经过大量的研究，这是我的2美分：我的个人结论是角度翻译库对我来说是最好的。 There are a lot of nice solutions like that library that merges 2 tutorials on that subject. 有很多很好的解决方案，比如该库合并了关于该主题的2个教程。 But angular-translate has every requirement i've needed: 但angular-translate有我需要的所有要求：

Install through bower 通过凉亭安装
JSON files support in a structure that i prefer JSON文件支持我喜欢的结构
Easy initialisation 易于初始化
Checking browser culture 检查浏览器文化
Change culture in running time 在运行时改变文化
Great translation loader 伟大的翻译装载机
Great documentation 很棒的文档
most popular, biggest community and the only one who is still maintained frequently 最受欢迎，最大的社区，也是唯一仍然经常维护的社区

Hope it helps... 希望能帮助到你...

Answer 2

如需更灵活的基础，请查看http://angular-translate.github.io/

Answer 3

Here is how I am doing my i18n work, it seems to be working great! 这就是我在做i18n工作的方式，看起来效果很好！ It is based off a set of localized resource files that get initialized at runtime. 它基于一组在运行时初始化的本地化资源文件。

I18n module to hold string id map and parameter insertion I18n模块用于保存字符串id映射和参数插入

.factory('I18n', ['$http', 'User', function($http, User) {
    // Resource File
    var LANG_FILE;

    // Fetch Resource File
    function init() {
        return $http.get('resources/locales/' + User.locale + '.json')
            .then(function(response) {
                LANG_FILE = response.data;
            });
    }

    function lang(stringId, params) {
        var string = LANG_FILE[stringId] || stringId;

        if (params && params.length) {
            for (var i = 0; i < params.length; i++) {
                string = string.replace('%' + (i + 1), params[i]);
            }
        }

        return string;
    }

    return {
        init: init,
        lang: lang
    };

}]);

This can be initialized using a .run block 这可以使用.run块进行初始化

.run(['I18n', function(I18n) {
    I18n.init();
}]);

And used anywhere to translate a string like this 并用于任何地方翻译这样的字符串

.controller(['$scope', 'I18n', function($scope, I18n) {
    $scope.title = I18n.lang(some_string_id);
}]);

Custom i18n DIRECTIVE to handle one time translations 自定义i18n DIRECTIVE处理一次性翻译

.directive('i18n', ['I18n', function(I18n) {
    return {
        restrict: 'A',
        scope: {},
        link: function(scope, $el, attrs) {
            $el[0].innerHTML = I18n.lang(attrs.i18n);
        }
    };
}]);

Which can be used like this. 哪个可以这样使用。

<div i18n="some_string_id"></div>

Custom PLURALIZE directive that matches string ids from your resource file with the count as the parameter. 自定义PLURALIZE指令，它匹配资源文件中的字符串ID，并将count作为参数。

.directive('pluralize', ['I18n', function(I18n) {
    return {
        restrict: 'A',
        scope: {
            count: '='
        },
        link: function($scope, $el, attrs) {
            var when  = JSON.parse(attrs.when)
              , param = [$scope.count];
            if (when[$scope.count]) {
                $el[0].innerHTML = I18n.lang(when[$scope.count], param);
            } else {
                $el[0].innerHTML = I18n.lang(when['other'], param);
            }
        }
    };
}]);

And can be used like this. 并且可以像这样使用。

<div pluralize count="{{obj.count}}" when="{1:'single_item','other': 'multiple_item'}"></div>

The String Resource file would be located at resources/locales/en-US.json, and would look something like this. 字符串资源文件位于resources / locales / en-US.json，看起来像这样。

{
    some_string_id: 'This is in English',
    single_item: '%1 item',
    multiple_item: '%1 items'
}

The other locales would have the same string ids, with different translated texts. 其他语言环境将具有相同的字符串ID，具有不同的翻译文本。

Answer 4

I think that this link: 我认为这个链接：

(bruno's i18n approach in angular js) （bruno的角度js的i18n方法）

Answers your questions pretty well. 很好地回答你的问题。 His approach is similar in concept to what you want to do, but I think that his implementation, which involves filters, allows you to use constructions like 他的方法在概念上类似于你想要做的，但我认为他的实现，涉及过滤器，允许你使用像这样的结构

<span class="author">{{ 'WRITTENBY' | i18n }} Bruno</span>

Instead of the simpler tags that you suggest. 而不是你建议的更简单的标签。 Read his article and see if it answers your question, but I think it does. 阅读他的文章，看看它是否回答了你的问题，但我认为确实如此。

angularjs i18n项目设置

问题描述

4 个解决方案

解决方案1
5 2013-08-30 14:26:12

解决方案2
2 2013-07-29 10:14:58

解决方案3
1 已采纳 2014-11-14 23:20:29

I18n module to hold string id map and parameter insertion I18n模块用于保存字符串id映射和参数插入

Custom i18n DIRECTIVE to handle one time translations 自定义i18n DIRECTIVE处理一次性翻译

Custom PLURALIZE directive that matches string ids from your resource file with the count as the parameter. 自定义PLURALIZE指令，它匹配资源文件中的字符串ID，并将count作为参数。

The String Resource file would be located at resources/locales/en-US.json, and would look something like this. 字符串资源文件位于resources / locales / en-US.json，看起来像这样。

解决方案4
0 2013-07-23 02:59:53

angularjs i18n项目设置

问题描述

4 个解决方案

解决方案1 5 2013-08-30 14:26:12

解决方案2 2 2013-07-29 10:14:58

解决方案3 1 已采纳 2014-11-14 23:20:29

I18n module to hold string id map and parameter insertion I18n模块用于保存字符串id映射和参数插入

Custom i18n DIRECTIVE to handle one time translations 自定义i18n DIRECTIVE处理一次性翻译

Custom PLURALIZE directive that matches string ids from your resource file with the count as the parameter. 自定义PLURALIZE指令，它匹配资源文件中的字符串ID，并将count作为参数。

The String Resource file would be located at resources/locales/en-US.json, and would look something like this. 字符串资源文件位于resources / locales / en-US.json，看起来像这样。

解决方案4 0 2013-07-23 02:59:53

解决方案1
5 2013-08-30 14:26:12

解决方案2
2 2013-07-29 10:14:58

解决方案3
1 已采纳 2014-11-14 23:20:29

解决方案4
0 2013-07-23 02:59:53