Angular Translate

2016-06-03 22:20:28

How to add Angular Translate to web application

Angular Translate provides dynamic translation machanism on web applications. For example if we need to translate "Hello World" to "Hello World-Translated whatever" we just need to add below expression:

 {{"Hello World" | translate}}

How We Can Do It ?

1. Add

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.1/angular-translate.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-interpolation-messageformat/2.8.1/angular-translate-interpolation-messageformat.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-local/2.8.1/angular-translate-storage-local.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-url/2.8.1/angular-translate-loader-url.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-static-files/2.8.1/angular-translate-loader-static-files.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-handler-log/2.8.1/angular-translate-handler-log.js"></script>

into head tag.

 

2. Add pascalprecht.translate to app module

var app = angular.module('app', ['ngSanitize', 'ngAnimate', "ui.router", 'ct.ui.router.extras', 'pascalprecht.translate']);

 

3. Add 

app.config(function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
files: [{
prefix: '/api/getTranslation/locale-',
suffix: ''
}]
});
$translateProvider.preferredLanguage('en');
});

into init.js or directly in script tag like below:


 <script>
     app.config(function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
files: [{
prefix: '/api/getTranslation/locale-',
suffix: ''
}]
});
$translateProvider.preferredLanguage('en');
});
</script>

   

4. '/api/getTranslation/locale-en' must returns json object like below:

{"Hello World":"Hello World-Translated whatever"}

 

5.If you need to change language to whatever you want just set 

 

app.controller('HeaderCtrl', function ($scope,$translate)
{
.
.
.
. $scope.selectedLang = "de";
$translate.use($scope.selectedLang);

});


 

Yes that's it!

Good Luck.

 

Tags Cloud

AngularJS

Angular Translator

web application

pascalprecht.translate

translateProvider

$translateProvider.preferredLanguage

$translate.use