angularjs filter 'date' and $locale service

Question

it seems that angularjs embed some internationalized resources:

Angular supports i18n/l10n for date, number and currency filters. Additionally, Angular supports localizable pluralization support through the ngPluralize directive. All localizable Angular components depend on locale-specific rule sets managed by the $locale service.

If found the $locale service but don't kwnow how to specify the locale in fr-fr...

The following code :

{{article.date_collected | date:'EEEE dd MMMM yyyy'}}

Gives :

Monday 06 October 2014

But I want :

Lundi 06 Octobre 2014

Any suggestions?

Answer 1

Finally I found the response on the angular github page: https://github.com/angular/bower-angular-i18n#bower-angular-i18n

EDIT : more info for what worked for me

In your root app directory, install resources from bower

bower install angular-i18n

Add a <script> to your index.html between this comments tags if you use bower/buildjs to compact all your scripts to vendor.js file :

<!-- endbower -->
<script src="bower_components/angular-i18n/angular-locale_fr-fr.js"></script>
<!-- endbuild -->

That's it.

Answer 2

Example of use, as per https://docs.angularjs.org/guide/i18n

1) get the locale you need from the angular repo or through bower, e.g. //raw.githubusercontent.com/angular/bower-angular-i18n/master/angular-locale_fr-fr.js

2) include it after the angular library, e.g.

<script src="vendor/angular.min.js"></script>
<script src="vendor/angular-locale_fr-fr.js"></script>

3) now whenever you display a date using the ng date filter, it will be in French-France, not US English format, e.g.

{{date | date: 'fullDate'}}

There's also gotta be a way to handle several locals programmatically, it's done on the AngularJS home page "beer counter" example, with

angular.module('app-us', ['app', 'ngLocal.us']);
angular.module('app-sk', ['app', 'ngLocal.sk']);

and

<script src="//code.angularjs.org/1.4.4/i18n/angular-locale_sk.js"></script>
<script>
angular.module('ngLocal.sk', [])._configBlocks.push(angular.module('ngLocale')._configBlocks[0]);
</script>
<script src="//code.angularjs.org/1.4.4/i18n/angular-locale_en-us.js"></script>
<script>
angular.module('ngLocal.us', [])._configBlocks.push(angular.module('ngLocale')._configBlocks[0]);
angular.bootstrap(document, ['ngRoute', 'homepage', 'ngLocal.us']);
</script>

And here's a cleaner way to do it: https://github.com/lgalfaso/angular-dynamic-locale