CODEWITHSUNDEEP
ruby-on-railsangularjsrails-i18n
newBike
newBike

Reputation: 15002

Better practice for js i18n with angular

I wonder to know if there is any bad smell on my practice for i18n on Angular.

I put the I18n translating function on Angular controller (because I don't know how to put it on HTML template file)

And about the i18n scope, I use this way I18n.t("city." + city_name) to indicate that the city_name is under "city" scope. Could I write it in this way I18n.t(city_name, scope: "city") to make it more understandable.

I appreciate every comment and suggestion to enhance my current solution.

Data structure

departures_lst is a list of countries' English name e.g.,: [US, China, Japan]

Each country has many cities name. e.g. [New York, LA, Boston]

Angular controller

App.controller("departures_ctrl", function($scope, $location, $http) {
    $http.get("/departures.json")
    .success(function (response) {
      $scope.departures_lst = response;
    });
    $scope.get_destinations = function(city_name) {
          return $location.url("/depart_from/" + city_name);
    };
    $scope.i18nCountryName = function(country_name) {
          return I18n.t("country." + country_name) + country_name
    };
    $scope.i18nCityName = function(city_name) {
          return I18n.t("city." + city_name) + city_name
    };
});

HTML teamplate?

<div class="panel panel-transparent" ng-repeat="departure in departures_lst">
    <h5>{{i18nCountryName(departure.country)}}</h5>
    <li class="col-sm-3 col-lg-3 col-xs-3" ng-repeat="city in departure.cities">
      <a ng-click="get_destinations(city)">
        <i class="fa fa-plane"></i>
        {{i18nCityName(city)}}
      </a>
    </li>
</div>

Upvotes: 1

Views: 461

Answers (1)

Amonn
Amonn

Reputation: 84

You should always try to put localization in the markup (as much as possible), that way you further encapsulate layout from your logic and data. I have always used the great angular-localization plug in. You get some great filters and directives to play with that have parametrization and other features built in. For example:

You have a string where you have to insert the name of a user, you define the string in your localized file as:

"some-loc-id-tag": "insert the user name {user} here!"

And in your controller scope have the property:

$scope.model.userName

And can display the name of the user with the localized string like so in HTML:

<div data-i18n="loc.some-loc-id-tag" data-user="{{model.userName}}"></div>

Check it out: https://github.com/doshprompt/angular-localization

Upvotes: 0

Related Questions