Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Localization with Ionic Framework and Angular Translation

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 951
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: