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]
en, en-US, en-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,513