Good practice with Angular Translate

Question

I'm attempting to use angular translate and I had a best practice question. Is it best practice to use a key for a string like so:

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    HEADLINE: 'Hello there, This is my awesome app!',
    INTRO_TEXT: 'And it has i18n support!'
  });
});

and

<h2>{{ 'HEADLINE' | translate }}</h2>
<p>{{ 'INTRO_TEXT' | translate }}</p>

as opposed to something like:

<h2 ng-bind="'Hello there, This is my awesome app!' | translate"></h2>

and if so why is one method best practice over the other? Is the using the key necessary for multi-language support?

Answer 1

I am preferring short keys instead of the english text as key.. This will blow up your HTML and your config JS file.. when you use short keys you can also nest keys e.g.

{
  user: {
   name: 'Name', 
   email: 'E-Mail'
  }
} 

and use it like this in your HTML

<p translate="user.name"></p>

and you should use the directive instead of the filter.. here's why: https://github.com/angular-translate/angular-translate/wiki/Getting-Started#using-translate-directive