CODEWITHSUNDEEP
javascriptangularjsmultilingual
Thilak Raj
Thilak Raj

Reputation: 920

Is it possible to write multilingual website without repeating code in angular js?

I need to write one 2 language website, one in English and another one in Danish. The data to be shown will be stored in json format, separately like name.en and name.de. There will be two buttons, one for for English and one for Danish.

But i don't want the coding like

<p ng-show="english">{{name.en}}</p> 
<p ng-show="danish">{{name.de}}</p>

and also i don't to code want like 

 <div ng-switch on="isExists(item)">
        <span ng-switch-when="true">{{name.en}}</span>
        <span ng-switch-default>{{name.en}}</span>
       <span ng-switch-when="false">{{name.de}}</span>
 </div>

Where i am repeating the same code with English and Danish separately. I want to show it with a single line. Can anyone help me?

Upvotes: 3

Views: 1095

Answers (4)

Chathuran D
Chathuran D

Reputation: 2430

You can use ngx-translate for that

Hope this will helps

Upvotes: 0

codelearner
codelearner

Reputation: 458

Try this simple example
Html

<button class="btn btn-info" ng-click="setLanguage('en')">English</button>
<button class="btn btn-info" ng-click="setLanguage('de')">Danish</button>
<p>{{name[language]}}</p>

Javascript

  //inside controller
    $scope.language='en';  //initial default value
    $scope.setLanguage = function(language) {
        $scope.language = language;    
       }

Upvotes: 1

Ikechi Michael
Ikechi Michael

Reputation: 489

Why not create a function in your scope called translate, that takes an object as a parameter (argument?), the object could be like 

{ english: "thank you", portuguese: "obrigado" }

the translate function confirms the value of the language setting from a Service/Factory, and renders the word in the correct language.

The factory could be something like:

app.Factory("LanguageFactory", function () {
    var obj = {};
    obj.language = "english"; //of course, it's english
    return obj;
});

Your controller could make use of the factory like:

app.controller("", function ($scope, LanguageFactory) {
    $scope.language = LanguageFactory;
    $scope.translate = function (word) {
        if ($scope.language == 'english') {
           return word.english;
        }
        else if ($scope.language == 'french') {
           return word.french;
        } // could go on and on
        //an alternative would be
        return word[$scope.language];
        //but to use to alternative, you would need to know what format the
        //json is returned in 
    }
});

I think that should work. So, everywhere in ur html that you want your multilingual functionality to work, you can display it like

<p>{{translate(name)}}</p>

Oh, i forgot, you'd need to provide a way to change the value of the lanaguage object in the Factory. This might work:

$scope.changeLanguage = function (l) {
     $scope.language.language = l;
}

Upvotes: 2

vpsingh016
vpsingh016

Reputation: 703

Yes, It is possible with the help of angular-translate. Inject 'pascalprecht.translate' as module dependency in your angular app.

var app = angular.module("app", ['pascalprecht.translate']);

create a config section which will hold the json data.

app.config(function ($translateProvider) {
    $translateProvider.translations('en', {
        'Logout': 'Logout',
        'Login': 'Login'
    });
    $translateProvider.translations('de', {
        'Logout': 'DeLogOut',
        'Login': 'DeLogIn'
    });
    $translateProvider.preferredLanguage('en');
});

In your controller inject $translate as dependency to change language dynamically. 

$scope.changeLanguage = function (key) {
         $translate.use(key); // key as 'en' or 'de'
     };

In your partial use translate directive.

<h2 translate="">Log In</h2>

to get json data from api

var testApp = angular.module("app");
function fetchData() {
  var initInjector = angular.injector(["ng"]),                               $http = initInjector.get("$http");
  return $http.get('/api/getJson', {'cache':false}).then(function(response) {
  testApp.constant("appConstants", response.data);
 }, function(errorResponse) {
  });
 }

for more info please refer https://angular-translate.github.io/

Upvotes: 4

Related Questions