admin管理员组文章数量:1406951
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).
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>
This all works. But I'm a bit lost when it es to code organisation now. Inside that div are some choice menus that I'll want to use angular on too.
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 acplish 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.
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.
I bet this is baked into the framework and I've missed it, so a nudge in the right direction is appreciated.
Thanks.
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).
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>
This all works. But I'm a bit lost when it es to code organisation now. Inside that div are some choice menus that I'll want to use angular on too.
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 acplish 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.
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.
I bet this is baked into the framework and I've missed it, so a nudge in the right direction is appreciated.
Thanks.
Share asked Jun 27, 2013 at 19:34 jasonojasono 2132 silver badges13 bronze badges4 Answers
Reset to default 5after 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. There are a lot of nice solutions like that library that merges 2 tutorials on that subject. But angular-translate has every requirement i've needed:
- Install through bower
- JSON files support in a structure that i prefer
- Easy initialisation
- Checking browser culture
- Change culture in running time
- Great translation loader
- Great documentation
- most popular, biggest munity and the only one who is still maintained frequently
Hope it helps...
For a more flexible base, checkout http://angular-translate.github.io/
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.
I18n module to hold string id map and parameter insertion
.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(['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
.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.
.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.
{
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.
I think that this link:
(bruno's i18n approach in angular js)
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.
本文标签： javascriptangularjs i18n project setupStack Overflow
版权声明：本文标题：javascript - angularjs i18n project setup - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744918501a2632144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论