All geek questions in one place

Angularjs i18n project setup

I just started with angularjs yesterday, so suppose I don't know anything about this. The first thing I'm trying to do is put all the shortcuts for my user interface into a file (so that we can change them to i18n).

From what I understand, this can be done by importing the js file and then adding a function containing labels as a controller in 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>

It all works. But I'm a little lost when it comes to organizing the code now. Inside this div there are some selection menus that I want to use angular too.

I would like the js code for the shortcuts to be in one file and the presentation logic for the page to be in another js file (name-on-this-page-view-model.js). I am not sure how to do this. From what I can say, you cannot embed ng-controller tags, and I cannot add them to the specific tag for which it would be.

It would be nice to have one global controller that imports all other js files for the page.

I bet that this is baked into the framework, and I missed it, so pushing in the right direction is evaluated.

Thanks.

+2
source share
4 answers

This is how I do my i18n job, it works great! It is based on a set of localized resource files that are initialized at runtime.

I18n module for storing line map and parameter input

 .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 with a .run block.

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

And used everywhere to translate a line like this

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

Custom i18n DIRECTIVE for processing one-time transfers

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

What can be used like this.

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

The user directive PLURALIZE, which corresponds to the identifiers of the lines from the resource file with the indication as a 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 you can use it like this.

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

The String resource file will reside in the / locales / en -US.json resources and will look something like this.

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

Other locales will have the same line identifiers with different translated texts.

+1
source

after a lot of research, here are my 2 cents: my personal conclusion is that the angular-translate library for me is still the best. There are many good solutions, such as a library that combines 2 tutorials on this subject. But angular translator has all the necessary requirements:

  • Install through the gazebo
  • JSON file support in the structure I prefer
  • Easy initialization
  • Check browser culture
  • Runtime Culture Change
  • Great downloader
  • Excellent documentation
  • the most popular, largest community and the only one that is still often supported

Hope this helps ...

+5
source

For a more flexible base, checkout http://angular-translate.imtqy.com/

+2
source

I think this link:

(bruno i18n approach in angular js)

The answers to your questions are pretty good. His approach is similar in idea to what you want to do, but I think that its implementation, including filters, allows you to use constructs such as

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

Instead of the simple tags you offer. Read his article and see if it answers your question, but I think it is.

0
source

Source: https://habr.com/ru/post/1494999/

More articles:


All Articles