It is best to start your application's localization efforts early in development, even if you only support one language initially. Libraries like angular-localization help make the process of supporting additional languages much easier.
Bower.json:
{ "name": "localzation", "version": "0.0.0", "authors": [ "Zhentian Wan <answer881215@gmail.com>" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "angular-localization": "~1.2.0" }, "devDependencies": { "lodash": "~3.6.0" } }
Install:
bower install angular-locatization --save-dev
Index.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <div ng-controller="AnimalCtrl as vm"> <div class="row"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="lang_selector" class="col-xs-3 control-label">Select language: </label> <div class="col-xs-2" > <select id="lang_selector" class="form-control" ng-model="vm.language" ng-options="lang.label for lang in vm.supportedLanguages" ng-change="vm.updateLocale(vm.language)"> </select> </div> </div> </form> </div> <div class="row" ng-repeat="animal in vm.animals"> <div class="col-xs-12"><h2 i18n="{{animal.code}}"></h2></div> </div> </div> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-localization/angular-localization.min.js"></script> <script src="bower_components/lodash/lodash.min.js"></script> <script src="app.js"></script> </body> </html>
app.js:
function AnimalController(locale, Languagefactroy) { var ctrl = this; ctrl.supportedLanguages = []; ctrl.language = {}; Languagefactroy.getSupportedLanguages().then(function(languages){ ctrl.supportedLanguages = languages; ctrl.language = _.first( ctrl.supportedLanguages); }); ctrl.animals = [ {name: 'Cat', code: 'common.cat'}, {name: 'Monkey', code: 'common.monkey'} ]; ctrl.updateLocale = function(lang) { locale.setLocale(lang.value); } } function AppCtrl($scope, localeEvents) { var ctrl = this; $scope.$on(localeEvents.localeChanges, function(event, data) { console.log(event); console.log('new locale chosen: ' + data); }); } function Languagefactroy($http) { var lang = {}, languages = []; lang.getSupportedLanguages = function() { return $http.get('./languages/languages.json').then(setAvailableLangs); }; lang.getAvailableLangs = function() { return languages; }; function setAvailableLangs(langs) { languages = extract(langs) return languages; } function extract(res) { return res.data; } return lang; } angular.module('app', ['ngSanitize', 'ngLocalize', 'ngLocalize.Config', 'ngLocalize.Events', 'ngLocalize.InstalledLanguages']) .value('localeConf', { basePath: 'languages', defaultLocale: 'en-US', sharedDictionary: 'common', fileExtension: '.lang.json', persistSelection: true, cookieName: 'COOKIE_LOCALE_LANG', observableAttrs: new RegExp('^data-(?!ng-|i18n)') }) .value('localeSupported', [ 'en-US', 'fi', 'fr' ]) .controller('AnimalCtrl', AnimalController) .controller('AppCtrl', AppCtrl) .factory('Languagefactroy', Languagefactroy) ;
languages.json:
[ {"label": "English", "value": "en-US"}, {"label": "Suomi", "value": "fi"}, {"label": "French", "value": "fr"} ]
en-US/common.lang.json:
{ "cat": "Cat", "monkey": "Monkey" }
