Localization (i18n)


#1

translation
Guys, what better tool to add location for a Cordova + Ionic app?
From the AngularJS? Witch tool? Any additional recommendation?


#2

I haven’t tried it, but this looks legit. :wink:
http://angular-translate.github.io/


#3

hi… after several researches i’ve settled with angular-translate , too

pay attention that the latest v2 changed a lot the API, and all the docs aren’t updated… (i spent a whole night struggling with that!)

you can check a working example in my public in-development AngularJS/Ionic/Cordova app: https://github.com/krur/Silo_app


Internationalized date format
#4

Hey,

We are working with Angular Gettext : http://angular-gettext.rocketeer.be/

Small footprint, easy to work with, and best of all, it automatically extracts internationalized strings from your code (create pot files) using Grunt and creates javascript file for translation.


#5

Here is a very good online tool that works perfectly with gettext: https://poeditor.com/. You just need to create an account and upload your po, pot or other type of file you might have and the translation interface will help you through your work.


#6

I would recommend installing the Apache Cordova Globalization plugin and use Angular Translate.

I’ve outlined them both in my blog post:

Basically, you will use the globalization plugin to determine what the current device language is set to. With that knowledge found, you can plug it into Angular Translate and pull the appropriate translation table.

Cheers,


#7

Just looking at your code, you set your translations objects in the global scope, do you?


#8

You don’t really need the Globalization plugin, since you can determine the language from the browser. In fact, since version 2.0 of angular-translate there is a built-in method for this:

Determining preferred language automatically with
Since version 2.0 there’s also a method determinePreferredLanguage() on the $translateProvider. This method tries to determine by itself what the preferred language would be. It searches for values in the window.navigator object in the following properties (also in this order):

navigator.languages[0]
navigator.language
navigator.browserLanguage
navigator.systemLanguage
navigator.userLanguage

http://angular-translate.github.io/docs/#/guide/07_multi-language


#9

Hi @raphael_cohen,

I heard that on some phones we can get a different value of navigator.language for a same language.
Do you know if angular-translate render the same values ?


#10

I have no idea. I am targeting recent Android devices, which have webviews which apparently support navigator.languages[0] out of the box, which is the first one evaluated, so it fits my needs.


#11

Hi! And what about perfomance, if there is to much localized resources binded to views doesn’t it slowdown application significantly ?

Thanks.


#12

My experience is that it doesnt. I think it is because angular translate does not work with watchers (which are really bad performance-wise) but rather listens to the $translateChangeSuccess event to update the language.


#13

I work at a company called Localize.js and we’re looking into doing a full integration for ionic mobile applications.

Would love some people to test our solution on their testing/production apps.

Here’s a link to our beta phonegap tutorial:

https://localizejs.com/docs/integrations/phonegap


#14

Plus, the globalization plugin was breaking our app and causing a white screen on launch.


#15

I am using i18next and an angular directive ng-i18next and I like it :smiley:


#16

instead of using big confusing additional directives…
i built something like this:

Each language is an own file in a directory - dicts
like dicts -> de.js/json, en.js/json

i load the files via requirejs, but you can simply use $http for that.
Another approach would be, to have an own factory or service which stores different languages or a generic method to load the correct file.

  • list of supported language_codes (like: de, en, …) + default language
    1. get the client language (browser language) -> put correct dict on the rootScope
    1. if browser language not supported -> use default language
    1. if user can set other language -> load the language and put it on the rootScope

so i have the translations on $rootScope.dict and in my templates i can use everytime {{dict.myKey}}


#17

This is one I have used for 2 different angular projects (Not with Ionic, yet) and I’ve had some great luck with it. It’s easy to set up, it has been VERY reliable for us in the work that I do.


#18

I wrote a post about using angular-translate for internationalisation (i18n) and localisation (l10n) that might help: http://robferguson.org/2015/07/22/internationalisation-i18n-and-localisation-l10n-for-ionic-apps/

Note: Where possible you should prefer the translateDirective (e.g., translate=‘ALL_POSTS’) to the translateFilter (e.g., ‘ALL_POSTS’ | translate). See: http://stackoverflow.com/questions/20540877/correct-use-for-angular-translate-in-controllers/23866441#23866441