angularjs国际化项目设置 [英] angularjs i18n project setup
问题描述
我刚开始angularjs昨日所以我认为就一无所知了。我试图做的第一件事就是把所有的标签我的UI到一个文件中（这样我们可以换出来的国际化）。
I just started with angularjs yesterday so assume I know nothing about it. 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).
据我了解，这是可行的通过导入js文件，然后添加包含的标签，在html控制器的功能，像这样的：
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:
<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>
这所有的作品。但我当它现在涉及到code组织有点失落。内该div有一些选择菜单，我会想得上使用的角度。
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.
我想了JS code的标签是在一个文件中，并在页面视图逻辑在不同的js文件（名称的 - 即页面 - 视图 - model.js） 。我不能确定如何做到这一点。从我可以告诉你不能嵌套NG-控制器的标签，我无法将它们添加到特定的标签，这将是对
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). 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.
这将是很好，能够有一个全局控制器那种进口的所有页面的其他js文件的作者
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.
我敢打赌，这是烤成框架，我已经错过了它，所以在正确的方向轻推为AP preciated。
I bet this is baked into the framework and I've missed it, so a nudge in the right direction is appreciated.
感谢。
推荐答案
下面是我怎么做我的i18n的工作，它似乎是伟大的工作！它是基于掀起了一套本地化的资源文件在运行时获取初始化。
Here is how I am doing my i18n work, it seems to be working great! It is based off a set of localized resource files that get initialized at runtime.
.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块进行初始化
This can be initialized using a .run block
.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);
}]);
自定义国际化指令处理一次翻译
.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>
从资源文件与计数作为参数相匹配的字符串IDS自定义复数指令。
.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>
字符串资源文件将位于资源/区域设置/ EN-US.json，而且会是这个样子。
{
some_string_id: 'This is in English',
single_item: '%1 item',
multiple_item: '%1 items'
}
其他的语言环境将有相同的字符串ID，具有不同的翻译文本。
The other locales would have the same string ids, with different translated texts.
这篇关于angularjs国际化项目设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
