i18n with Angular

Matt Zabriskie

@mzabriskie

Source: http://www.superbwallpapers.com/space/international-space-station-14497/

The terms are frequently abbreviated to the numeronyms i18n (where 18 stands for the number of letters between the first i and the last n in internationalization, a usage coined at DEC in the 1970s or 80s) and L10n respectively, due to the length of the words.
http://en.wikipedia.org/wiki/I18n

Numeronyms

  • d10n
  • i14y
  • ally
  • s32s
Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.

 

Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale).
http://www.w3.org/International/questions/qa-i18n

What needs to be localized?

05/10/12

109,901.00

109.901,00

109 901.00

$, €, £, ¥

Should I localize my site?

  • Likelihood of receiving traffic from a different locale
  • How much do you stand to gain
  • How much will it cost to enable i18n

Detecting Locale

What is a locale?

language[-region]

enen-USen-GB

Server

var express = require('express');
var app = express();
​
app.get('/', function (req, res) {
  console.log(req.header('Accept-Language'));
  // en-US,en;q=0.8,fr;q=0.6,de;q=0.4​
});
​
app.listen(3000);

Client

// IE​
​if (navigator.browserLanguage) {
  console.log(navigator.browserLanguage);
  // en-US​
}
​// All other vendors​
​else if (navigator.language) {
  console.log(navigator.language);
  // en-US​
}

Hybrid (Server)

// app.js​
​var acceptLang = require('accept-language');
var express = require('express');
var app = express();
​
app.set('view engine', 'ejs');
​
app.use(function (req, res, next) {
  var parsed = acceptLang.parse(req.header('Accept-Language'));
  var locale = parsed[0];
​
  res.locals.locale = locale.language + (locale.region ? '-' + locale.region : '');
  next();
});
​
app.get('/', function (req, res) { res.render('index.ejs'); });
​
app.listen(3000);

Hybrid (Client)

<!-- views/index.ejs -->​
​<!doctype html>​
​<html lang="<%= locale %>">​
​<meta charset="utf-8"/>​
​
​<script>
  console.log(document.documentElement.getAttribute('lang'));
</script>

i18n with Angular

<!doctype html>​
​<html ng-app="app">​
​<meta charset="utf-8"/>​
​
​<div ng-controller="ExampleCtrl">​
  <h1>{{ 'HELLO' | translate : "{name:'Jeff'}" }}</h1>​
  <div>{{ dateValue | date : 'fullDate' }}</div>​
  <div>{{ numberValue | number : 5 }}</div>​
  <div>{{ currencyValue | currency }}</div>​
​</div>​
​
​<script src="bower_components/angular/angular.js"></script>​
​<script src="bower_components/angular-i18n/angular-locale_fr.js"></script>​
​<script src="bower_components/angular-translate/angular-translate.js"</script>​
​
​<script>
  angular.module('app', ['pascalprecht.translate'])
    .config(function ($translateProvider) {
      $translateProvider
        .translations('en', { HELLO: 'Hello {{name}}' })
        .translations('fr', { HELLO: 'Bonjour {{name}}' })
        .preferredLanguage('fr');
    })
    .controller('ExampleCtrl', function ($scope) {
      $scope.dateValue = new Date();
      $scope.numberValue = 12345.6789;
      $scope.currencyValue = 100.37;
  });
</script>

Thank You!

@mzabriskie

i18n with Angular

By Matt Zabriskie

i18n with Angular

My talk for UtahJS Conf 2014

  • 2,285