angularjs i18n项目设置

angularjs i18n project setup

本文关键字：设置 项目 i18n angularjs      更新时间：2023-09-26

我昨天刚开始使用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里面有一些选择菜单，我也想在上面使用angular。

我希望标签的js代码在一个文件中，页面的视图逻辑在另一个js文件中（页面视图模型的名称.js）。我不确定如何实现这一点。据我所知，你不能嵌套ng个控制器标签，我也不能将它们添加到它所要使用的特定标签中。

如果能够有一个全局控制器来导入页面的所有其他js文件，那就太好了。

我敢打赌，这已经融入了框架中，我错过了它，所以我们很感激朝着正确的方向推动它。

谢谢。

经过大量研究，这是我的2美分：我个人的结论是，到目前为止，angular翻译库对我来说是最好的。有很多不错的解决方案，比如这个库，它合并了两个关于这个主题的教程。但角度翻译有我需要的所有要求：

  • 通过撑弓安装
  • JSON文件支持我喜欢的结构
  • 易于初始化
  • 正在检查浏览器区域性
  • 在运行时改变文化
  • 出色的翻译加载程序
  • 出色的文档
  • 最受欢迎，最大的社区和唯一一个仍然经常维护

希望它能帮助。。。

要获得更灵活的基础，请签出http://angular-translate.github.io/

以下是我如何完成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，具有不同的翻译文本。

我认为这个链接：

（bruno在angular js中的i18n方法）

很好地回答了你的问题。他的方法在概念上与你想要做的类似，但我认为他的实现涉及过滤器，允许你使用这样的结构

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

而不是你建议的更简单的标签。阅读他的文章，看看它是否回答了你的问题，但我认为它确实回答了。

相关文章：