AngularJS Template Translation Approach with Rails Server

Question

I need to implement a multi-language application using the AngularJS front-end and Ruby on Rails server. I am looking for a reasonable approach to translate translated templates into several languages. I came up with an approach that I would like to receive feedback on.

In Angular route definitions, set the template property to partial html, which only has ng-include with the src attribute set by the controller. This approach is necessary to dynamically change the path to the template to be extracted from the server; this is described here: AngularJS - How to use $ routeParams when creating an Url pattern?

So, the Angular route configuration will look like this:

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

And the controller will look like this:

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

Here $routeParams.locale used to set the locale, but may be a variable set by the user action. The approach for dynamically changing the URL path of a template to add a locale prefix seems a bit confusing, but I don't know another way.

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

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

The route uses routing, so the value of params[:template] can be layered. The action of TemplateController#get simply displays the partial, defined by params[:template] The code of the template controller looks something like this:

 class TemplateController < ApplicationController layout false caches_page :get def get render(template: "template/#{params[:template]}") end end 

Rails I18n support for translations is used in erb templates that translate according to the locale parameter. During production, caching will be enabled. This will avoid translation overhead. The URL locale prefix will cache the set of language sets of translated patterns.

This approach brings translation processing as close as possible to the server side.

Are there any fundamental problems with this approach?

Is it possible to do it better?

Answer 1

You might be interested in the angular-translate module.

Answer 2

We have achieved internationalization of the client side in AngularJS with the i18next JQuery http://i18next.com/ plugin and created a filter called i18n.

When you initialize the Angular application, you initialize the i18n plugin, where you can provide a template to search for a file containing labels, and use this as an example of binding labels and values ​​in the template.

{{'mynamespace:labels.firstname' | i18n}}

where "mynamespace" is used to separate your tags logically and used to search for tagged JSON files. In json files, you can have one or more JSON objects with labels as properties. In the above example, the file is mynamespace-i18n-en-US.js, if you provided the template __ns-i18n-__lng__.js

Is there a reason why the transfer should happen on the server?

Do you really need to translate the whole template?