Angular js支持本地化


67

我试图在AngularJS中找到支持多种语言的文档,但没有成功。是否支持本地化?


7
让我们重新打开这个吸盘!
Nick Grealy 2015年

正如目前所写,这是一个核心问题,是/否。对程序员来说是巨大的价值之一-即使答案是“否”。
布伦特·布拉德本

“ attranslate”是一种解决问题的现代工具:github.com/fkirc/attranslate尽管“ attranslate”旨在用于半自动翻译,但它也可以仅用于同步JSON文件
Mike76 '20

Answers:


72

看看angular-translate:https//github.com/angular-translate/angular-translate

对于所有DIY人士:

您可以找到角度的本地化文件:此处

这些文件将帮助您使用内置的角度过滤器:日期货币数字。太棒了...到目前为止。

现在,您要使用自己的文本,那么,您所需要的就是angular.js依赖项注入的功能。创建一个新文件,例如:“ myTexts_en_us.js”,并使用$ provide.value,如下所示:

$provide.value("myTexts", {firstText : "This is my localized text"});

有关详细信息:http :
//jsfiddle.net/4tRBY/24/

对于实际使用,您应该添加一个过滤器http : //jsfiddle.net/4tRBY/41/

提示:

  • 确保手动,JS或服务器将新的本地化文件插入到html中。(服务器是这里的最佳选择!)
  • 如果您包含一个angular-local文件,则无需在您的应用模块中进行设置。(您将自动拥有$ locale-查看小提琴)
  • 在$ provide-value中添加一个ID密钥-并将其值设置为文件中使用的语言代码-这将很方便进行测试。

2
也许我没有正确考虑这个问题,但是如何将提供的示例与英语(而不是英语等)结合使用?如果在您之前检查一下语言,您是否会做某种检查:“ $ provide.value(” providedValue“,{”?
ganders 2014年

快速提问,“服务器是这里的最佳选择”是什么意思?您的意思是:最好在服务器端处理本地化?
Nick Grealy

18

您正在寻找的是$ locale

实际上,还有一个示例也位于angularjs主页的一半以下

他们的示例摘录:

function BeerCounter($scope, $locale) {
  $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  if ($locale.id == 'en-us') {
    $scope.beerForms = {
      0: 'no beers',
      one: '{} beer',
      other: '{} beers'
    };
  } else {
    $scope.beerForms = {
      0: 'žiadne pivo',
      one: '{} pivo',
      few: '{} pivá',
      other: '{} pív'
    };
  }
}

我不确定这是否是每个人说的“标准”……但这只是一个开始。如果您有很多本地化工作,我想我会创建一个服务来注入我的控制器中……类似下面的伪代码:

app.service('myLocalization', ['$locale', function($locale) {
    var res = {
       'help' : { 
           'en-us': 'help',
           'es-mx': 'ayudame'
       },
       'beer' : {
            'en-us': 'beer',
            'es-mx': 'cerveza'
       }
    }

    return {
       getString: function(key) {
          return res[key][$locale.id];
       }
    }
});

好吧,这就是他们所拥有的。就像我说的那样,如果您想以其他方式进行操作,则需要自己滚动。看起来就像我上面提供的服务,只是也许您必须使用$ http加载一些文件。
Ben Lesh 2012年

这可能对真正简单的事情起作用。如果您想要翻译输入框内的占位符,并随着计数的变化从单数更改为复数,则需要更强大/更复杂的功能。angular-gettext和angular-translate处理这些事情。
Mike_Laird 2014年

@Mike_Laird-数字过滤器和ngPluralize指令对您的两个示例均适用。在后一种情况下,您只需要设置自己的locale服务即可,该服务是when配置属性的哈希表,供您全局使用,或者甚至可以更改您自己的$ locale副本并使用它。
Ben Lesh

我喜欢斯洛伐克语(Im)的例子,来自斯洛伐克。
米哈尔Takáč

7

我已经创建了一个专门用于本地化的模块-https: //github.com/4vanger/angular-l10n 它支持消息本地化,参数替换,更改飞行中的语言环境并提供许多方便的使用方式-过滤器,指令等。


1
非常简洁,我可以尝试一下,谢谢
devshorts 2013年

我喜欢它的外观-我正在寻找我的rails / angularjs应用程序的本地化。Rails拥有不错的i8n,看起来就像l10n一样。
PaulL

看起来很棒.. !!
Sudhansu Choudhary



0

如果您需要i18​​n支持,则可以参考下面的项目,该项目具有完整的多语言功能并且易于实施。看看github项目

angularjs本地化服务


该模块专注于“翻译”数字,货币过滤器的任何支持模块吗?
praveenpds

您可以使用AngularJs i18n和l10n。非常容易实现。
kds
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.