Dynamic Language Selection In Angularjs

Hi I am developing one application in Angularjs. This website will be in two languages. They are arabic and english. Belo is the logic i am using for selection of language. If the

Solution 1:

This is not controller's problem and you should not use controller fot language selection.

You should use config phase for this, smth like this.

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    HEADLINE: 'Hello there, This is my awesome app!',
    INTRO_TEXT: 'And it has i18n support!',
    BUTTON_TEXT_EN: 'english',
    BUTTON_TEXT_DE: 'german'
  })
  .translations('de', {
    HEADLINE: 'Hey, das ist meine großartige App!',
    INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
    BUTTON_TEXT_EN: 'englisch',
    BUTTON_TEXT_DE: 'deutsch'
  });
  $translateProvider.preferredLanguage('en');
});

Solution 2:

You could just store the current language in a $scope variable and use that with ng-src to set the source of the image dynamically. Like this:

<divclass="language"><ahref="#"><imgng-src="images/{{ lang === 'ar-sa' ? 'arabic.png' : 'en-english-language-browser-function-512.png' }}"/></a></div>

---

app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', '$window', function ($scope, $translate, toastr, $window) {
    debugger;
    $scope.lang = $window.navigator.language || $window.navigator.userLanguage;
    if ($scope.lang === 'ar-sa')
    {
        $translate.use('de_AR');
         //bind arabic.png
    }
    else
    {
        $translate.use('de_EN');
         //bind english.png
    }
}]);

Solution 3:

Use two json files for your website one for English and another one for Arabic. In each files you should give same key and different values like:

For English [ "title":"Website", "img": "your img src path for English" ]

For Arabic [ "title":"Website(Arabic Translation)", "img": "your img src path for Arabic" ]

specify these two files in $translateProvider.useStaticFilesLoader use angular-translate-loader-static-files you can find it on bower or npm.

Then you just mention your img like this:

<img src={{img}}/>

Thats it...