Locale and resource bundle support in AngularJS

[ho.cl...@gmail.com]

Dear all,

I am a new comer to AngularJS and found it very powerful and specially like its DI and 2-way binding features.

I am developing a sample application and would like to implement support for i18n. What I would like to do is similar to what I did with Spring MVC before in developing JSPX based applications:
- All the user interface labels and messages for different locales were stored in their corresponding resource bundles (e.g. application_en_US.properties, application_zh_HK.properties, etc.)
- When the user access the application, the default locale of the browser will be detected, and the corresponding resource bundle file will be loaded from the server, and populate the corresponding variables (or the $locale service by extending it).
- Then all the form labels and messages will use the current locale. For example, a form label can be code like the following:
  - <label class="control-label" for="firstName">{{ui.label.contactForm.firstName}}</label>
- When a user change their locale (e.g. by change a language select box provided by the application), the corresponding resource bundle will be loaded from the server, all the labels and messages will be refreshed and the UI in the changed locale will be seen immediately

Has anyone did something like the above? Any clue or pointers were much welcome!

Many thanks
Clarence

[Alexander Khrapko]

Hi,

unfortunately there is no support for string translations in Angular yet, but you can create your own translation module based on ng-filter. I'm using .js files as a resource bundles and detecting the client locale on the fly using $locale. I didn't have time for other improvements e.g. load resources from .json or any other format but will definitely implement them later. So here an example how I achieved that (in coffee script :)):

# base locale class

class Locale

  @locale_name

  @add_locale: (strings)->

    if !YourAppName.locales

      YourAppName.locales = {}

    YourAppName.locales[@locale_name] = strings

# en_us locale

class EN_US extends Locale

  @locale_name = 'en-us'

  @add_locale

    #MAIN PAGE

    Projects:'Projects'

    Calendar:'Calendar'

    Users:'Users'

angular.module("filters", [])

  .filter "i18n",  ($locale)->

    (input) ->

      if YourAppName.locales[$locale.id]?

        translated = YourAppName.locales[$locale.id][input]

        if translated?

          return translated

      return input

# YourAppName - you can use any namespace, I'm using application name

# And don't forget to inject filters into your app

angular.module("YourAppName ", ['ngResource', 'filters'])

# Use translation filter in your HTML template

<span class="title">{{'Signin_Google' | i18n}}</span>

I hope this will help you.

Cheers

Alex

[ho.cl...@gmail.com]

Dear Alex,

Thanks a lot for your advice and it gives me a very good direction on how to implement i18n in AngularJS.

I will definitely try out your approach and would be great if you can let me know if you have implemented a better solution.

I personally think that the feature should be in the core feature of AngularJS itself.

Cheers
Clarence



Alexander Khrapko於 2012年11月13日星期二UTC+8下午6時56分56秒寫道：