9951 explained code solutions for 126 technologies

angularjsHow can I implement internationalization (i18n) in an AngularJS application?

Internationalization (i18n) in an AngularJS application can be implemented using the angular-translate library. This library provides a service that can be used to translate strings in an application.

To use the library, it must first be included in the application, either through a script tag or by using a module loader such as RequireJS.

<script src="angular-translate.js"></script>

Then, the library must be included as a module dependency in the application.

angular.module('myApp', ['pascalprecht.translate'])

The translation service must then be configured with the different languages that the application will support. This can be done with the $translateProvider.

angular.module('myApp', ['pascalprecht.translate'])
  .config(function ($translateProvider) {
    $translateProvider.translations('en', {
      'HELLO': 'Hello'
    $translateProvider.translations('de', {
      'HELLO': 'Hallo'

Finally, the translation service can be used to translate strings in the application.

<p>{{ 'HELLO' | translate }}</p>

Output example


The angular-translate library provides many more features, such as the ability to switch languages at runtime, support for pluralization, and support for asynchronous loading of language files.

Helpful links

Edit this code on GitHub