6

[AngularJS] i18n Directive

 2 years ago
source link: http://siongui.github.io/2016/05/29/angularjs-ng-i18n-directive/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

[AngularJS] i18n Directive

May 29, 2016

Client side gettext-like Internationalization (i18n) via AngularJS Directives. This is an alternative to solution in [1].

Demo

Source code:

index.html | repository | view raw 

<!doctype html>
<html ng-app="demoI18nDirective">
<head>
  <meta charset="utf-8">
  <title>AngularJS i18n Directive Demo</title>
</head>
<body>

<div>
  <button ng-click="i18nLocale = 'en'">English</button>
  <button ng-click="i18nLocale = 'zh_TW'">傳統中文</button>
  <button ng-click="i18nLocale = 'vi_VN'">Tiếng Việt</button>
</div>
<br>
<div>
  <span i18n str="Home">Home</span>
  <br>
  <span i18n str="Canon">Canon</span>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="ngGettextData.js"></script>
<script src="ngI18nDirective.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js | repository | view raw 

'use strict';


angular.module('demoI18nDirective', ['i18nDirective', "gettextData"]).
  run(['$rootScope', function($rootScope) {
    // default locale is English
    $rootScope.i18nLocale = "en";
  }]);

ngI18nDirective.js | repository | view raw 

'use strict';


angular.module('i18nDirective', ['gettextData']).
  directive('i18n', ['i18nserv', '$rootScope', function(i18nserv, $rootScope) {
    /**
     * wrap the string to be translated in ELEMENT
     * with attribute 'i18n', 'str', and 'locale'(optional)
     * example: <ELEMENT i18n str='Home'>Home</ELEMENT>
     *      or  <ELEMENT i18n locale={{locale}} str='Home'>Home</ELEMENT>
     */
    return {
      restrict: 'A',
      link: function(scope, elm, attrs) {
        // if "locale" attribute exists, use it
        attrs.$observe('locale', function() {
          var trText = i18nserv.gettext(attrs.str, attrs.locale);
          elm.html(trText);
        });

        // if there is no "locale" attribute, use $rootScope.i18nLocale
        if (angular.isUndefined(attrs.locale)) {
          $rootScope.$watch('i18nLocale', function() {
            var trText = i18nserv.gettext(attrs.str, $rootScope.i18nLocale);
            elm.html(trText);
          });
        }
      }
    };
  }]).

  factory('i18nserv', ['gettextData', function(gettextData) {
  // service: for translating texts according to locale

    var i18nStr = gettextData.all;

    function gettext(value, locale) {
      if (i18nStr.hasOwnProperty(locale)) {
        if (i18nStr[locale].hasOwnProperty(value)) {
          if (i18nStr[locale][value] !== '' &&
              i18nStr[locale][value] !== null)
            return i18nStr[locale][value];
        }
      }
      return value;
    }

    return { gettext: gettext };
  }]);

ngGettextData.js | repository | view raw 

angular.module('gettextData', []).
  factory('gettextData', [function() {
    var data = {
      "zh_TW": {
        "Home": "首頁",
        "Canon": "經典"
      },
      "vi_VN": {
        "Home": "Trang chính",
        "Canon": "Kinh điển"
      }
    }
    var serviceInstance = { all: data };
    return serviceInstance;
  }]);

Tested on: Chromium Version 50.0.2661.102 Ubuntu 16.04 (64-bit), AngularJS 1.5.5.

References:

[2][Golang] gettext Function on Frontend (Browser) by GopherJS


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK