Best way to localize app?

What is the best way to add more languages to my app? And how detect language of the user?

Use Angular Translate. It’s awesome.

4 Likes

Okay i will have a Look into this. Is there any Tutorial on how to integrate into ionic?

Second question how can i automatically get the Users System Language? I am developing only for ios right now.

You should be searching for how to implement it in Angular, not specifically Ionic. Ionic is just a framework which you use in your Angular app.

So there is actually no difference between using Angular Translate as they are demo’ing extensively on their GitHub page and in an Ionic project.

Regarding the localization, there are Cordova plugins for that. It’s really easy to Google the answers to your questions, please show some more research before asking questions :smile:

http://cordova.apache.org/docs/en/3.3.0/cordova_globalization_globalization.md.html#globalization.getPreferredLanguage

1 Like

Hi Robin,

i added the globalization plugin via command line to my ionic app.

Then stared my app with: ionic emulate iOS

and i have a controller with a test function:

.controller(‘SettingsCtrl’, function($scope, $http, $timeout) {

$scope.localeButton = function() {
  navigator.globalization.getLocaleName(
    function (locale) {alert('locale: ' + locale.value + '\n');},
    function () {alert('Error getting locale\n');}
  );
};})

but it doesn’t alert anything… and also is there no log of failure or error…

Make sure you’re executing Cordova code inside the $ionicPlatform.ready() callback. Something like this.

.controller('SettingsCtrl', ['$scope', '$http', '$timeout', '$ionicPlatform', function($scope, $http, $timeout, $ionicPlatform) {

$scope.localeButton = function() {
  $ionicPlatform.ready(function () {
  navigator.globalization.getLocaleName(
    function (locale) {alert('locale: ' + locale.value + '\n');},
    function () {alert('Error getting locale\n');}
  );
 });
};})

Okay it does work. But not in the first viewcontroller automated on first app startup…

Whats the best way to do this and save inside locaStorage or something… :confused:

I think you should do something like this (didn’t test this code, it’s just meant as an example to get you started):

angular.module('AwesomeApp', ['ionic'])

.run(['$ionicPlatform', 'localeProvider', function ($ionicPlatform, localeProvider) {

	$ionicPlatform.ready(function () {
		navigator.globalization.getLocaleName(
			function (locale) {
				localeProvider.setLocale(locale);
			},
			function () {
				localeProvider.setLocale(null);	
			}
		);
 	});

})

.provider('locale', function () {
	this.currentLocale = null;

	return {
		$get: [function () {
			var self = this;

			getLocale: function () {
				return self.currentLocale;
			}
		}],

		setLocale: function (locale) {
			this.currentLocale = locale;
		}
	};

});

TL;DR:
Just check the locale once, in your app’s run() method. From there on, store it in a local variable, cookie or localStorage. Whichever suits you best.

Did angular Translate work for you?

FYI - angular-translate also has a mechanism to get the current locale from the browser.

@zbindenren It’s the best and most comprehensive solution out there. We’ve got a multilingual app up and running in no-time with this neat library.

@Robin Thanks our application now also works with angular tranlsate.

@zbindenren hi, could you share your code?

i’ve try something like this

.config(function($translateProvider, $translatePartialLoaderProvider ) {
        $translateProvider.useLoader('$translatePartialLoader', {
            urlTemplate: '/translations/lang/{lang}/{part}.json'
        });

        $translateProvider.preferredLanguage('en');
        $translatePartialLoaderProvider.addPart('ajax');
    });

But its only works on ripple, when emulate in real android, its blank … :frowning:
thanks

In case you are still having trouble with localization in Ionic Framework, I have a tutorial that might be useful:

I hope it helps :smile:

Thanks :smile:

right now i’m using js file and include them from index.html instead using json :slight_smile:

Just want to +1 this. I followed the tutorial and it worked like a charm.