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

Hello

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

• https://angular-translate.github.io/
• https://github.com/angular-translate/angular-translate

Edit this code on GitHub