Hi All
Today we will discuss about how to Localize Ionic application.
We have a JavaScript library for AngularJS "Angular Translate".
It allows you to Translate your application depending upon language you desire.
It will provide a great way to localize your app using Ionic framework and angularJS both.
Now, Download latest release of Angular Translate and copy the angular-translate.min.js to your project:
For example:-
IonicProject/www/js/angular-translate.min.js
After complete above steps now the library referenced to your index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/angular-translate.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
</html>
We need to add Angular Translate into our AngularJS application module and config.< br>
angular.module('starter', ['ionic', 'pascalprecht.translate'])
.config(function($stateProvider, $urlRouterProvider, $translateProvider) {
$translateProvider.translations('en', {
HELLO: "Hello",
WELCOME: "Welcome"
});
$translateProvider.translations('es', {
HELLO: "Hola",
WELCOME: "Bienvenida"
});
$translateProvider.preferredLanguage("en");
});
You'll see above that i created two tables one for English (en) and second for Spanish (es). Preferred language is English.
If you want to change your preferred language during run time then you can use into your controller:
$translate.use();
For ex:- If you want to change it with Spanish then it should be $translate.use("es").
Now move to the next step, how can we use these translation tables in views?
<ion-view>
<ion-content>
<h1>{{"HELLO" | translate}}</h1>
<h2>{{"WELCOME" | translate}}</h2>
</ion-content>
</ion-view>
But there is no idea what language by default used in our app.To know which language is device using we need to install following plugin:
$cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
This plugin helps to know what language your device is using.
To know the device language add following module to the app.js file.
if(typeof navigator.globalization !== "undefined") {
navigator.globalization.getPreferredLanguage(function(language) {
$translate.use((language.value).split("-")[0]).then(function(data) {
console.log("SUCCESS -> " + data);
}, function(error) {
console.log("ERROR -> " + error);
});
}, null);
}
Hope this will help you to localize you application.Thanks :)
0 Comment(s)