Search code examples
javascriptangularjslocalizationangular-translate

Angular JS: Translating static html pages with a lot of text


I'm currently localizing my Angular site and angular-translate seems to be a good option for smaller strings. However I have a few pages with a lot of static html content like the ToS or the about page that I don't really want to cram into a JSON file (mixed with html tags etc).

So is there a way to use angular-translate (or even without that module) to save the content in partial views (like /partials/tos-en.html) and swap it out depending on the language?


Solution

  • You want a way to get the user's language code. Having that, you intend to render a partial with the language code as part of the name.

    Angular translate module has 2 service methods of interest:

    $translate.use() returns the user's active language. Unfortunately, if you call the service method before the language loads to the page, you may get null.

    $translate.proposedLanguage() returns the "intended language" -- meaning the value you would get calling $translate.use(), but this call will succeed even if the language hasn't loaded. Having this list of language codes, you can use them to create partials for languages you intend to support.

    Something like

    <div ng-include="about-{{ $translate.proposedLanguage() }}.html">
    </div>