Support pages with multiple language with Angular Translate

Today i am going to show you how to support pages with multiple language. Imagine creating a web page. Time has passed and you want to change your target. You want to add another language support. In the past, we had to make one copy of each page. Suppose we also added Spanish and Italian support. Your total page count will increase with all language support. Even if this process is very difficult now, the process will become impossible as the number of pages and content increases. There are many solutions to this problem with dynamic web pages. One of these solutions is Angular-translate. With angular-translate, we can instantly change the language between pages and get rid of hundreds of pages.

In this article I will talk about how to apply an Angular translate operation simply in an html file.

Github Angular Translate: https://github.com/angular-translate/angular-translate

Requirements
Bower

Let's setup angular-translate.

You can setup with two ways.
-Clone all project

or

bower install angular-translate

The content of our html file looks like this:

< !DOCTYPE html>
< html>

< body>

< div>

< h1> < span style="color:grey">selam< /span>< /h1>

 < div>

  < br>

 < button>English</button>

< button>Turkce</button>

< /div>

< /div>

< /body>

< /html>

We have two buttons right now. We want you to change the contents of our page with the buttons.
Now let's make a few edits to this html file.

First, change the tag to and transform it into an angularjs application.

Now create an app.js file in the current directory.
start the content like this.

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

We defined our application in this way, we added myApp in our html file as a parameter and the translate module.
Let's just add it.

app.config(["$translateProvider",function($translateProvider){

var en_translations = {

selam : "Hello World"

}

var tr_translations = {

selam : "Merhaba Dunya"

}

$translateProvider.translations('en',en_translations);

$translateProvider.translations('tr',tr_translations);

$translateProvider.preferredLanguage('tr');

}]);

We added two different language options here. Let's think of them as two different json files. Our greetings in our HTML file will present different output according to two different languages. We set tr in preferredLanguage. Thus, by default the page will be loaded with the tr language when loaded.

Let's create a "head" tag and show the angular library we just downloaded with bower and our app.js files as sources.

< script src="bower_components/angular/angular.js">< /script>

< script src="bower_components/angular-translate/angular-translate.js">< /script>

< script src="app.js">< /script>

Now we came to the "body" part. Here we make the first "div" tag the Controller.

< div ng-controller="MainController">

We came immediately after the "span" tag. Let's make a little change here. Make the "span" tag "span translate" and look like this.

< h1> < span translate style="color:grey">selam< /span>< /h1>

Let's make a change in the button:

< button ng-click="changeLanguage('en')">English< /button>

< button ng-click="changeLanguage('tr')">Turkce< /button>

I'm going to talk about what ng-click is doing here.
Now we came to the controller.

I create a file named MainController.js in the same directory and fill it in as follows.

app.controller("MainController" ,["$scope","$translate",function($scope,$translate){

$scope.changeLanguage = function(lang){

$translate.use(lang);

}

}]);

This is the Controller. Now press button ng-click in our html file will trigger this controller. The Controller will apply the settings in our config file for this, which will all take place quickly on a dynamic page.

I would recommend this address if you are looking for a style guide for Angular. Besides being nice and descriptive, there is also multi-language support.

the latest status in the files:

**HelloWorld.html **

< !DOCTYPE html>

< html ng-app="myApp">

< head>

< script src="bower_components/angular/angular.js">< /script>

< script src="bower_components/angular-translate/angular-translate.js">< /script>

< script src="js/app.js">< /script>

< script src="js/controllers/MainController.js">< /script>

< /head>

< body>

< div ng-controller="MainController">

< h1> < span translate style="color:grey">selam< /span>< /h1>

< div>

< br>

< button ng-click="changeLanguage('en')">English< /button>

< button ng-click="changeLanguage('tr')">Turkce< /button>

< /div>

< /div>

< /body>

< /html>

app.js

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

app.config(["$translateProvider",function($translateProvider){

var en_translations = {

selam : "Hello World"

}

var tr_translations = {

selam : "Merhaba Dunya"

}

$translateProvider.translations('en',en_translations);

$translateProvider.translations('tr',tr_translations);

$translateProvider.preferredLanguage('tr');

}]);

MainController.js

app.controller("MainController" ,["$scope","$translate",function($scope,$translate){

$scope.changeLanguage = function(lang){

$translate.use(lang);

}

}]);

Have a nice day!

---

Posted on Utopian.io - Rewarding Open Source Contributors

---