angularjs i18n項目設置

Question

我昨天剛開始使用angularjs，所以假設我一無所知。 我要做的第一件事就是將我的UI的所有標簽放入一個文件中（這樣我們就可以將它們換成i18n）。

根據我的理解，這是可行的，導入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>

這一切都有效。 但是現在我在代碼組織方面有點迷失。 在div內部是一些選擇菜單，我也想要使用角度。

我希望標簽的js代碼在一個文件中，並且頁面的視圖邏輯在不同的js文件中（name-of-that-page-view-model.js）。 我不確定如何做到這一點。 從我可以告訴你不能嵌套ng-controller標簽，我不能將它們添加到它將用於的特定標簽。

能夠有一個全局控制器可以導入頁面的所有其他js文件，這將是很好的。

我敢打賭，這已經融入了框架，我已經錯過了它，所以在正確的方向上推動是值得贊賞的。

謝謝。

Answer 1

經過大量的研究，這是我的2美分：我的個人結論是角度翻譯庫對我來說是最好的。 有很多很好的解決方案，比如該庫合並了關於該主題的2個教程。 但angular-translate有我需要的所有要求：

通過涼亭安裝
JSON文件支持我喜歡的結構
易於初始化
檢查瀏覽器文化
在運行時改變文化
偉大的翻譯裝載機
很棒的文檔
最受歡迎，最大的社區，也是唯一仍然經常維護的社區

希望能幫助到你...

Answer 2

如需更靈活的基礎，請查看http://angular-translate.github.io/

Answer 3

這就是我在做i18n工作的方式，看起來效果很好！ 它基於一組在運行時初始化的本地化資源文件。

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

}]);

這可以使用.run塊進行初始化

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

並用於任何地方翻譯這樣的字符串

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

自定義i18n DIRECTIVE處理一次性翻譯

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

哪個可以這樣使用。

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

自定義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);
            }
        }
    };
}]);

並且可以像這樣使用。

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

字符串資源文件位於resources / locales / en-US.json，看起來像這樣。

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

其他語言環境將具有相同的字符串ID，具有不同的翻譯文本。

Answer 4

我認為這個鏈接：

（bruno的角度js的i18n方法）

很好地回答你的問題。 他的方法在概念上類似於你想要做的，但我認為他的實現，涉及過濾器，允許你使用像這樣的結構

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

而不是你建議的更簡單的標簽。 閱讀他的文章，看看它是否回答了你的問題，但我認為確實如此。

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模塊用於保存字符串id映射和參數插入

自定義i18n DIRECTIVE處理一次性翻譯

自定義PLURALIZE指令，它匹配資源文件中的字符串ID，並將count作為參數。

字符串資源文件位於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模塊用於保存字符串id映射和參數插入

自定義i18n DIRECTIVE處理一次性翻譯

自定義PLURALIZE指令，它匹配資源文件中的字符串ID，並將count作為參數。

字符串資源文件位於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