Angularjs and $locale

Question

Can I set $locale for some application manually?

Is it possible that only way to support locals is to include localization file from angular library for current locale. What if there are multiple cultures? In that case I have to load localization files dynamically? What am I missing?

See also https://groups.google.com/d/msg/angular/N5XYOvOPR6I/bMbUpifQpuYJ — Mark Rajcok, Oct 22 '12 at 15:55
One more link: http://codingsmackdown.tv/blog/2012/12/14/localizing-your-angularjs-app/ — Andrej Kaurin, May 04 '13 at 06:21

score 32 · Answer 1 · edited May 29 '14 at 16:26

32

You can load the locale you want into localStorage, then refresh the page. Have the script below load the i18n file you need. Changing the locale on the fly isn't supported yet.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
var locale = JSON.parse(localStorage.getItem('locale'));
if (locale) {
    document.write('<script src="scripts/i18n/angular-locale_'+locale+'.js"><\/script>');
}
</script>

edited May 29 '14 at 16:26

Jonn

1,594
1
14
25

answered Jan 16 '13 at 23:31

will Farrell

1,733
1
16
21

This worked for me. I did have to change "angular-locale_" to "angular-locale\\_", though (escaping the underscore). – Jonn May 29 '14 at 16:22
Worked like a charm, no server side code required, well accepted by angular. This is a really time saving solution! – Matteo Conta Mar 14 '16 at 14:41
This worked for me. I was struggling with all other options for a long time. – Dilhan Jayathilake Aug 27 '16 at 11:22
1

This fix requires refresh of the page. For first load of the page you can simply get browser language through window.navigator object as a fallback. – Vlada Mar 01 '17 at 09:22

score 31 · Answer 2 · edited Nov 04 '14 at 17:05

31

I've built an angular module that takes care about i18n. AngularJS support for i18n is pretty primitve, if you want to have more control and also be more flexible, checkout angular-translate - http://angular-translate.github.io/

Let me know, if I can help out!

edited Nov 04 '14 at 17:05

Kariem

4,398
3
44
73

answered Aug 05 '13 at 19:43

Pascal Precht

8,803
7
41
53

2

How does it handle dates? – Danita Aug 09 '13 at 18:33
3

It actually doesn't handle dates at all. angular-translate is all about translating contents (not dates specifically), with support for asynchronous loading and proper pluralization. – Pascal Precht Aug 09 '13 at 22:07
1

I use moment.js with angular-translate to handle dates – mattvv Dec 03 '13 at 22:46
1

`$locale` is not the `i18n` part of the thing, `$locale` is the `i10n` – MoshMage Mar 07 '17 at 16:38

score 24 · Answer 3 · 2014-08-07T17:01:24.493

24

For anyone looking for dynamic localization today angular-dynamic-locale does a great job.

edited Aug 07 '14 at 17:01

answered Feb 20 '14 at 13:57

score 23 · Answer 4 · answered Oct 20 '15 at 11:52

I struggled with the same issues, read all the answers here and introduced i18n/l10n in my project. This are my outcomes:

angular-translate (http://angular-translate.github.io) is a perfect way to localize your content (custom-strings). But it does NOT translate angular's date, currency or number-filters.
Angular has a built-in mechanism to localize date, currency or number-filters. Translations for supported locales can be found here https://github.com/angular/angular.js/tree/master/src/ngLocale, the angular-guide is located at https://docs.angularjs.org/guide/i18n
The problem with angular's built-in mechanism: it's not that easy to change the locale at run time! This is where https://github.com/lgalfaso/angular-dynamic-locale comes into play. It allows you to change the language at run time pretty easily.

So the solution is to use both projects, angular-translate and angular-dynamic-locale.

When i try this approach I am getting $translateProvider.useUrlLoader is not a function — Miomir Dancevic, Aug 09 '16 at 19:25

score 15 · Accepted Answer · answered Oct 22 '12 at 14:06

15

Honestly, the $locale service in angular is pretty primitive still. It's really good, but it seems to lack flexibility in this area. The biggest issue is that even if you switch your locale by dynamically reloading the proper locale file, things like the date filter won't know you've changed it because they're registering their locale information when they're set up. So you have a couple of choices currently: 1. Reload the page with the selected locale... or 2. Write your own Locale Provider and Filters that use it.

It might be possible create a service that would dynamically load the proper script file, reinitialize all affected filters and services, then refresh the views, but I'm not really sure what all that would involve at this point.

answered Oct 22 '12 at 14:06

Ben Lesh

107,825
47
247
232

Thanks,I like control so I am going to write my own custom Locale Provider. – Andrej Kaurin Oct 22 '12 at 15:53
1

You could probably have your LocaleProvider match the signature of the original one, but have JavaScript property setters and getters on each item in the locale to allow you to programmatically check whatever locale you need to. – Ben Lesh Oct 22 '12 at 15:57
1

I've written a custom locale provider but it only takes effect on date filters, both number and currency capture their formats in a closure. – Marius Soutier Aug 09 '13 at 14:32
5

@MariusSoutier is that custom locale provider something you can share? I am looking at this same problem – Kevin Hakanson Aug 17 '13 at 14:51

dewd · Answer 6 · 2016-05-09T14:02:34.813

Including this script: https://github.com/lgalfaso/angular-dynamic-locale/blob/master/src/tmhDynamicLocale.js enables locales to be set during run time.

Download all the locales you want from https://github.com/angular/angular.js/tree/master/src/ngLocale
Store the locales in a directory on your web server, e.g. /assets/js/locales/filename-LOCALE.js - note: what you write as the LOCALE in the filename is important - any locales required will get downloaded dynamically.
In your module, include tmhDynamicLocale as 'tmh.DynamicLocale' e.g. var app = angular.module('app',['tmh.DynamicLocale']);
In your config, pass in the provider i.e. 'tmhDynamicLocaleProvider' and set the location of your locale files, e.g. tmhLocaleProvider.localeLocationPattern('/assets/js/locales/angular-locale-{{locale}}.js'); {{locale}} will be swapped out for the locale you set at run time.
To set the locale across your app, in app.run(), pass in the 'tmhDynamicLocale' service e.g. app.run(['tmhDynamicLocale',function(tmhDynamicLocale){}]);
In your run callback, set the locale like this, tmhDynamicLocale.set('en-gb');. Alternatvely, as tmhDynamicLocale is a service, you could set the locale in different places service injections are allowed, e.g. controllers, although bear in mind, services are singletons, and setting the locale in a controller will set it across the app.

You should now have the correct locale running. For further info, use the README for tmhDynamicLocale:https://github.com/lgalfaso/angular-dynamic-locale/blob/master/README.md

Credit: Lucas Mirelmann for tmhDynamicLocale.

When i try this approach I am getting $translateProvider.useUrlLoader is not a function — Miomir Dancevic, Aug 09 '16 at 19:24
@MiomirDancevic Your error doesn't sound related to using this module. — dewd, Aug 20 '16 at 18:09

score 1 · Answer 7 · answered Jan 18 '13 at 22:18

1

I found something interesting. It is not angular but it is jquery so integration should be ok. I will test performances and get back with info.

https://github.com/js-coder/x18n/wiki/Getting-started

https://github.com/js-coder/jQuery.x18n

answered Jan 18 '13 at 22:18

Andrej Kaurin

11,592
13
46
54

1

I found it complex to implement so I finished with simple service that loads resources from server and caches it. For translation to be shown I used simple directive. – Andrej Kaurin Feb 28 '13 at 14:35

pablo.nunez · Answer 8 · 2016-09-09T12:55:37.767

If you want to load the angularJS localization of your browser, install https://github.com/angular/bower-angular-i18n and https://github.com/lgalfaso/angular-dynamic-locale in your project.

Read the documentation of each library to install. This is an example of my Ionic project:

In my index.html:

...
<!-- angular-dynamic-locale-->
<script src="lib/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>
...

In my app.js

var app = angular.module('project-name', ['ionic',..., 'tmh.dynamicLocale']);
...
// tmhDynamicLocaleProvider
app.config(function(tmhDynamicLocaleProvider) {
   //  override the default path (angular/i18n/angular-locale_{{locale}}.js) to the stored Angular i18n locale files
   tmhDynamicLocaleProvider.localeLocationPattern('lib/angular-i18n/angular-locale_{{locale}}.js');
})
...
app.run(function($rootScope, $ionicPlatform, ..., tmhDynamicLocale){
   // set locale for angular formats   
   var inArray = function(needle, haystack) {
      var key = '';
      for (key in haystack) {
         if (haystack[key] === needle) {
            return true;
         }
      }
      return false;
   };
   var preferredLanguage = navigator.language || navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage;
   if (typeof preferredLanguage === 'string') {
      var code = preferredLanguage.substring(2, 0);
         if (inArray(code, PROPERTIES.LANGUAGES)) {
            tmhDynamicLocale.set(code);
         }
   }
   ...

SAMUEL · Answer 9 · 2017-12-20T03:28:35.623

Angular provide great support for i18n/l10n. You can find the guide here

The requirements for our application determines how we can implement this support.

If our application requires only a single locale or the end users of our application belongs only to a particular locale then we can restrict our application scope for i18n/l10n to only that locale

You can find a good explanation of how we can achieve such things in one of my previous answers here.

If we want to serve a particular component, directive or part to display in some other format or locale then we can go for some directives components or even a filter for that

You can find an example fiddle for such implementation using a filter can be found here

 function MyController($scope) {
   $scope.property = {
     price: 50000000.557
   }
 }

 function toLocaleCurrencyFilter($filter) {
  return function(amount, currencySymbol, fractionSize, locale) {
    var returnValue = Number(parseFloat(amount)).toLocaleString(locale, {
      minimumFractionDigits: parseInt(fractionSize),
      maximumFractionDigits: parseInt(fractionSize),
    });
    returnValue = returnValue + " " + currencySymbol
    return returnValue;
  };
 }
 angular.module('myApp', [])
   .controller('MyController', ['$scope', MyController])
   .filter('toLocaleCurrency', ['$filter', toLocaleCurrencyFilter]);

If we want dynamic locale then you need to reload browser with the new locale settings by saving it into local storage to take effect. you can use the solution described in 1 with some dynamic nature.

score 0 · Answer 10 · answered Jan 15 '18 at 16:58

0

If you are using webpack and typescript, you can load your locale dynamically.

    export const loadLocale = function(lng){
    if(lng != 'en'){
        require('./angular-locale_' + lng + '.js');
    }
};

answered Jan 15 '18 at 16:58

httpete

2,765
26
34

score -1 · Answer 11 · answered Jul 30 '18 at 14:31

you can also use the translation service to get the browser's locale then use it to do what you need. . . for example, in a ShortDatePipe:

   import { Pipe, PipeTransform} from '@angular/core';
    import { formatDate  } from '@angular/common';
    import { TranslateService } from '@ngx-translate/core';

    @Pipe({
      name: 'shortDate'
    })
    export class ShortDatePipe implements PipeTransform {
        constructor(private translateService: TranslateService) { }

        transform(value: string): string {
            var language: string = this.translateService.getBrowserCultureLang();
            console.log(language);
            return (value == "" || value == null) ? "" : formatDate(value, 'shortDate', language);
        }

    }

That looks like angular code but not angularjs code. – kovogel Aug 09 '18 at 07:58 — kovogel, Aug 09 '18 at 07:58
yea sorry, it's not angularjs, it's like v 8 – Mike A. Feb 02 '22 at 17:59 — Mike A., Feb 02 '22 at 17:59

Angularjs and $locale

11 Answers11

Linked