AngularJS Resource Localization Service
2 people use it
Author: 80b03752791145a3fdd027b154d7b42b? lavinjj

AngularJS Resource Localization Service


This is a simple service module that allows you to localize your AngularJS applications.

The service returns a localized string based on the current locale of the browser.

You can inject the service into a controller or use it via the i18n filter provided in the code.

Wiring It Up

You need to follow a few steps to wire the service into your app:

  1. Include the script localizationservice.js and i18ntranslationfilter.js in your project.
  2. Ensure you add 'localization.service' and 'localization.filters' to your app's dependency list.
  3. Create a folder off the root of your web app named i18n and create a resource-locale_default.js file in it.
  4. For every language you want to provide localized strings for you will also need to create a resource file that ends in the languageId-countryId (e.g. resource-locale_en-us.js).
  5. To get the translated string use either ng-bind="'_HomeTitle_' | i18n" or {{'_HomeTitle_' | i18n}} in your HTML.

Localization File Format

The localization file is pretty simple. It consists of a JSON array of the following object:

The key is used to look up the localized string, the value will be returned from the lookup and the description is an aide to developers and translators what the string is used for.

Sample App

I've created a sample app that uses the Resource Localization Service to provide the text for the entire application. I registered both 'localization.service' and 'localization.filters' in my app's dependency list and I then use ng-bind="'_HomeTitle_' | i18n" to insert the text into the page at run time.


comments powered by Disqus
This page was last updated almost 6 years ago.