Multilingual App in Angularjs or in Ionic Framework

ionic-v1
1

I am very new to both Angularjs and Ionic Framework. I coming from Microsoft background.

I am trying to make app in 3 languages (English, Arabic and French). As I told you that I am coming from Microsoft background I am thinking in .net way that for multilingual apps translation we use resource file and in our .net code as per language environment. As for example

http://www.codeproject.com/Tips/580043/How-to-make-a-multi-language-application-in-Csharp

Is there any way to do same thing Angularjs or Ionic Framework

2

I have found this some time ago : http://mcgivery.com/internationalization-of-an-ionic-app-multilanguage-support/

It might help.

2 Likes
3

Thank you Jerry for the reply

But the link what you are giving is automated translation but lot of time those translation not correct or they are not up to the context what we need.

So I was looking for manually translation, where I will maintain translation file in different language with key and value. and load it as per language environment.

Can we do that in Angularjs or ionic

4

It’s absolutely not automated translate ! It’s about an Angular plugin that gives the ability to register your strings in every languages and load the wanted one.

1 Like
5

Yea, It sorry for early reply. I read it later and I found that it is same I need.

6

The article takes care of the language translations using http://angular-translate.github.io/ which is the right tool for the job. You’ll also want to load the correct locale file by pulling in and copying the correct files from this project https://github.com/angular/bower-angular-i18n

That will make your dates and symbols and the like follow the correct format expected by the language.

Here’s a quick snippet on how to load the correct file based on some information from local storage.

    <script>
        var tag = document.createElement('script');
        tag.src = 'i10n/angular-locale_' + (JSON.parse(window.localStorage.getItem('me')).locale.toLowerCase() || 'en-us') + '.js';
        document.getElementsByTagName("body")[0].appendChild(tag);
    </script>
7

I am using requirejs to build my apps a little bit more modular so I can use the requirejs i18n tool, where you can define javascript-files which returns object with key-value pairs.

The plugin selects automatically the browser-language if supported or your default language.
In my run-Block i put the dictionary on my $rootScope so i have access everywhere.

There is also the possibility to load a dictionary if you want to provide a “language-chooser” or the users can set their language in the profile or something like that.

Greets.

8

You might also look this:

3 Likes