CODEWITHSUNDEEP
javascriptc#angularjsionic-framework
Milind
Milind

Reputation: 1955

Multilingual App in Angularjs or in Ionic Framework

I am very new to both Angularjs and Ionic Framework. I coming from Microsoft background.

I am trying to make app in 3 languages (English, Arabic and French). As I told you that I am coming from Microsoft background I am thinking in .net way that for multilingual apps translation we use resource file and in our .net code as per language environment. As for example

http://www.codeproject.com/Tips/580043/How-to-make-a-multi-language-application-in-Csharp

Is there any way to do same thing Angularjs or Ionic Framework

Upvotes: 2

Views: 5544

Answers (2)

gianlucatursi
gianlucatursi

Reputation: 680

I have create a library for translate angular and ionic app.

You can install with bower:

bower install ng-translator --save

or with npm

npm install ng-translator --save

Check out this

Upvotes: 0

Jannat Tumpa
Jannat Tumpa

Reputation: 111

Follow the steps here:

  1. Download the Source Code.zip file from here and copy the angular-translate and angular-translate.min file to www/lib/ionic/js/angular folder along with other js files.
  2. In index.html, include "http://lib/ionic/js/angular/angular-translate.js" along with other script tags.
  3. Now you need to add 'pascalprecht.translate' in dependency list of controllers.js file like, angular.module('starter.controllers', ['pascalprecht.translate']). You can also add it in dependency list of main module.

  4. Create a sub-folder, for example, 'lang' within www and add js files for each language you want to add to your application. Within individual JavaScript files, create an array variable containing key-value mapping of all translations. For example, in english.js file:

    var translations_en = { Title:'My app title', Settings:'Settings' } In bengali.js file: var translations_bng={ Title:'অ্যাপের নাম', Settings: 'সেটিংস' }

Note here, the key names will be same in all files but values will be different. In your HTML, you will access the value through the key. Similarly, you can add multiple language in multiple files.

  1. Now, in your app.js, add the following code.If you already have some other .config functions in your app.js, No worries! You can have more than one .config functions. Add this separately, better.

    .config(function($translateProvider) { $translateProvider.translations('en', translations_en); $translateProvider.translations('bng', translations_bng); $translateProvider.preferredLanguage('en'); }

  2. You can show values like this, {{'Title'|translate}}. Depending on the preferredLanguage given, in place of 'Title', appropriate value declared in js file of 'lang' folder will be shown here.

For more details, visit this blogpost

Upvotes: 3

Related Questions