I need to implement an application with multi-language support using an AngularJS front-end and a Ruby on Rails server. I am looking for a reasonable approach to render translated templates in multiple languages. I have come up with an approach I would like feedback on.

In the Angular routes definitions, set the template property to an html partial that just has an ng-include with the src attribute value set by the controller. This approach is needed to dynamically modify the path to the template to be fetched from the server; it is described here: AngularJS - How to use $routeParams in generating the templateUrl?

So the Angular route config would look like:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/sites/new', {
            template: '<div ng-include src="templateUrl"></div>',
            controller: 'RouteController'
        });
    });

And the controller would look like:

// Set a prefix on the URL path, something like “es”
function RouteController($scope, $routeParams) {
    $scope.templateUrl = $routeParams.locale + "/template/sites/site";
}

Here $routeParams.locale is used to set the locale, but could be a variable set by user action. The approach for dynamically modifying the template URL path to add a locale prefix seems a bit convoluted, but I know of no other way.

On the Rails side, in routes.rb, add a route:

match '/:locale/template/*template' => 'template#get'

The route uses route globbing so the params[:template] value can be a multi-level path. The TemplateController#get action just renders the partial determined by params[:template] The Template controller code is something like:

Edit
Report