CODEWITHSUNDEEP
javascriptangularjslocalizationangular-translate
Thomas
Thomas

Reputation: 4297

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?

Upvotes: 3

Views: 1384

Answers (3)

Chris Aelbrecht
Chris Aelbrecht

Reputation: 2091

Create an HTML partial for each language. Listen to the $translateChangeSuccess event in your controller and create the URL to the partial each time the language changes. Than use that URL in your view in an ngInclude directive.

V2 better approach

Your controller

myApp.controller('MyCtrl', ['$rootScope', '$scope', '$translate', function ($rootScope, $scope, $translate) {
    ($scope.setTranslatedPartials = function () {
        $scope.translatedPartials = {
            "partialOne": "/partials/partial_one_" + $translate.use() + ".html",
            "partialTwo": "/partials/partial_two_" + $translate.use() + ".html"
            //...
        };
    })();

    $rootScope.$on("$translateChangeSuccess", function (event, next, current) {
        $scope.setTranslatedPartials();
    });
}]);

Your view

<div ng-controller="MyCtrl">
    <ng-include src="translatedPartials.partialOne"></ng-include>
    <ng-include src="translatedPartials.partialTwo"></ng-include>
</div>

V1 original approach

Your controller

myApp.controller('MyCtrl', ['$rootScope', '$scope', '$translate', function ($rootScope, $scope, $translate) {
    /*Initialize first so you have it when coming back to the page without the langugage changing*/
    $scope.partial = "/partials/" + $translate.use() + ".html"

    $rootScope.$on("$translateChangeSuccess", function (event, next, current) {
        $scope.partial = "/partials/" + $translate.use() + ".html"
    });
}]);

Your view

<div ng-controller="MyCtrl">
    <ng-include src="partial"></ng-include>
</div>

Upvotes: 1

Dave Alperovich
Dave Alperovich

Reputation: 32500

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>

Upvotes: 5

lod
lod

Reputation: 1100

I would recommend going down the partial path you highlighted. Translating small chunks of text works for menu entries but ends up reading clumsily for an entire document. The translator needs to be able to vary things like sentence and paragraph structure for it to look natural.

To implement this I would use Apache's content negotiation (mod_negotiation). Your angular code remains simple, just refer to /partials/tos.html. Apache then provides tos.html.en, tos.html.fr or tos.html.de etc. as desired.

Setting up the content negotiation does require the use of Apache and the ability to edit the configuration files but isn't very complex to learn. I suggest also following the instructions to enable the prefer-language cookie, this allows you to provide a language selection mechanism which overrides the users browser language settings.

Upvotes: 1

Related Questions