How to support multi language to my HTML page using Angular.js/JavaScript? [duplicate]

Question

I need to change the language of all my text inside my HTML page dynamically using Angular.js/JavaScript. Here is my code:

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<label>Language</label>
<select>
   <option value="">Select langauage</option>
  <option value="1">English</option>
  <option value="2">Spanish</option>
</select>
<form>
  First name:<br>
  <input type="text" name="firstname" placeholder="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname" placeholder="lastname">
</form>

Above one drop down is present to select different language. Here my requirement is suppose user selected language as spanish all static text present over there will change to Spanish language and if user will again select english the all data will re-change to English.

Automatic translation is needed - without translating all the text by hand.

Zdenek Hatak · Accepted Answer · 2016-08-06 09:48:04Z

2

Isn't angular-translate the thing you are looking for?

https://github.com/angular-translate/angular-translate

Here is quite the demo https://angular-translate.github.io/

answered Aug 6, 2016 at 9:48

Zdenek Hatak

1,14514 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manish Kumar Over a year ago

bro this is not an automatic solution

Zdenek Hatak Over a year ago

You are right. I missed the comments below one of the answers. But angular-translate can be used to replace the translated values, bro. I'll update the question to be more clear.

Kiran Yallabandi · Accepted Answer · 2016-08-06 10:56:52Z

0

In addition to the answers above you can also do this :

typically internationalization involves abstracting out the static strings and rendering them dynamically in the language of choice.

you can put the mappings in a JSON file and load it later according to the language choice. In the below example I have used a custom service localeService which injects the object according to the choice in the view.

app.service('localeService',['$injector',function($injector){

    return {
    getLocale : function(locale){
        return $injector.get(locale);
    }
  }
}]);

This service returns the objects that I have defined as constants in the module. the objects contain the mapping for different languages :

app.constant('english',{
    "greeting":"hello",
    "dropDownHeader":"Clickable Dropdown",
     "clickDesc" : "Click on the button to open the dropdown menu."
 });
app.constant('spanish',{
    "greeting":"ola",
     "dropDownHeader":"desplegable se puede hacer clic",
"clickDesc" : "Haga clic en el botón para abrir el menú desplegable."
 });

and finnaly I have used the object returned in the controller in the following way :

app.controller('mainCtrl',['localeService','$scope',function(localeService,$scope){

  $scope.lang = {};
  $scope.lang.locale = 'english';
  //$scope.template = localService.getLocale();
  $scope.$watch(function(scope){
    return scope.lang.locale;
  },function(newVal,oldVal){
        $scope.template = localeService.getLocale($scope.lang.locale);
  });
}]);

and here is the view :

<body ng-app="test" >

<div ng-controller="mainCtrl">
<h2>{{template.dropDownHeader}}</h2>
<p>{{template.clickDesc}}</p>
<label>Language</label>
<select ng-model="lang.locale">
   <option value="">Select langauage</option>
  <option value="english">English</option>
  <option value="spanish">Spanish</option>
</select>

  <p>{{template.greeting}}</p>
 </div>
 </body>

Here is the complete working example :