<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>i18 support</h2>
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a>Miscellaneous</a>
</li>
<li class="active">
<strong>i18 support</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-8">
<div class="ibox ">
<div class="ibox-title">
<h5>i18next</h5>
</div>
<div class="ibox-content" ng-controller="translateCtrl">
<p>
<strong>i18next</strong> is a full-featured i18n javascript library for translating your webapplication.
</p>
<h4>
Example demo text
</h4>
<div class="i18container">
<span>{{ 'DEMO' | translate }}</span>
</div>
<h5>
You can change the language of demo text as well as the menu with simple function fire on buttons click. Try it:
</h5>
<a class="btn btn-white set_en" ng-click="changeLanguage('en')"><img src="img/flags/16/United-States.png"> EN</a>
<a class="btn btn-white set_es" ng-click="changeLanguage('es')"><img src="img/flags/16/Spain.png"> ES</a>
</div>
</div>
<div class="ibox ">
<div class="ibox-title">
<h5>i18next configuration</h5>
</div>
<div class="ibox-content">
<h3>Step 1</h3>
<p>
To add i18 support for your app you need to define what text you would like to translate. The best way to define your text is to store it in external config file.
For example:
</p>
<h5>translations.js</h5>
<pre>
function config($translateProvider) {
$translateProvider
.translations('en', {
// Define all menu elements
DASHBOARD: 'Dashboard',
GRAPHS: 'Graphs',
MAILBOX: 'Mailbox',
})
.translations('es', {
// Define all menu elements
DASHBOARD: 'Salpicadero',
GRAPHS: 'Gráficos',
MAILBOX: 'El correo',
});
$translateProvider.preferredLanguage('en');
}</pre>
<h3>Step 2</h3>
<p>
Next you need to add html indicators in all place you want to use i18.
</p>
<pre>
<span > { { 'MISCELLANEOUS' | translate } } </span>
</pre>
<h3>Step 3</h3>
<p>
Next you need to add plugin module to your main app module:
</p>
<pre>
*/
(function () {
angular.module('inspinia', [
'pascalprecht.translate', // Angular Translate
])
})();</pre>
<h3>Step 4</h3>
<p>
After that if you want to change the language you just need to add buttons and fire the $translate.use(langKey) function.
</p>
<div class="row">
<div class="col-md-6">
<h4>
HTML markup
</h4>
<pre>
<a class="btn btn-white set_en" ng-click="changeLanguage('en')" > Set EN language</a>
<a class="btn btn-white set_es" ng-click="changeLanguage('ns')" > Set ES language</a></pre>
</div>
<div class="col-md-6">
<h4>
Javascript code
</h4>
<pre>
function translateCtrl($translate, $scope) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
$scope.language = langKey;
};
}</pre>
</div>
</div>
<p>
More info about specific function and configuration options you can find on <a target="_blank" href="https://angular-translate.github.io/"> official angular-translate documentation.</a>
</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox">
<div class="ibox-title">
<h5>250 flags</h5>
</div>
<div class="ibox-content text-center">
<p>
Set of the 780 flag icons for all countries. All flags are avalible with 16x16, 32x32 and 64x64 size.
</p>
<div class="flags">
<img src="img/flags/32/Abkhazia.png" alt="flag">
<img src="img/flags/32/Afghanistan.png" alt="flag">
<img src="img/flags/32/Aland.png" alt="flag">
<img src="img/flags/32/Albania.png" alt="flag">
<img src="img/flags/32/Algeria.png" alt="flag">
<img src="img/flags/32/American-Samoa.png" alt="flag">
<img src="img/flags/32/Andorra.png" alt="flag">
<img src="img/flags/32/Angola.png" alt="flag">
<img src="img/flags/32/Anguilla.png" alt="flag">
<img src="img/flags/32/Antarctica.png" alt="flag">
<img src="img/flags/32/Antigua-and-Barbuda.png" alt="flag">
<img src="img/flags/32/Argentina.png" alt="flag">
<img src="img/flags/32/Armenia.png" alt="flag">
<img src="img/flags/32/Aruba.png" alt="flag">
<img src="img/flags/32/Australia.png" alt="flag">
<img src="img/flags/32/Austria.png" alt="flag">
<img src="img/flags/32/Azerbaijan.png" alt="flag">
<img src="img/flags/32/Bahamas.png" alt="flag">
<img src="img/flags/32/Bahrain.png" alt="flag">
<img src="img/flags/32/Bangladesh.png" alt="flag">
<img src="img/flags/32/Barbados.png" alt="flag">
<img src="img/flags/32/Basque-Country.png" alt="flag">
<img src="img/flags/32/Belarus.png" alt="flag">
<img src="img/flags/32/Belgium.png" alt="flag">
<img src="img/flags/32/Belize.png" alt="flag">
<img src="img/flags/32/Benin.png" alt="flag">
<img src="img/flags/32/Bermuda.png" alt="flag">
<img src="img/flags/32/Bhutan.png" alt="flag">
<img src="img/flags/32/Bolivia.png" alt="flag">
<img src="img/flags/32/Bosnia-and-Herzegovina.png" alt="flag">
<img src="img/flags/32/Botswana.png" alt="flag">
<img src="img/flags/32/Brazil.png" alt="flag">
<img src="img/flags/32/British-Antarctic-Territory.png" alt="flag">
<img src="img/flags/32/British-Virgin-Islands.png" alt="flag">
<img src="img/flags/32/Brunei.png" alt="flag">
<img src="img/flags/32/Bulgaria.png" alt="flag">
<img src="img/flags/32/Burkina-Faso.png" alt="flag">
<img src="img/flags/32/Burundi.png" alt="flag">
<img src="img/flags/32/Cambodia.png" alt="flag">
<img src="img/flags/32/Cameroon.png" alt="flag">
<img src="img/flags/32/Canada.png" alt="flag">
<img src="img/flags/32/Canary-Islands.png" alt="flag">
<img src="img/flags/32/Cape-Verde.png" alt="flag">
<img src="img/flags/32/Cayman-Islands.png" alt="flag">
<img src="img/flags/32/Central-African-Republic.png" alt="flag">
<img src="img/flags/32/Chad.png" alt="flag">
<img src="img/flags/32/Chile.png" alt="flag">
<img src="img/flags/32/China.png" alt="flag">
<img src="img/flags/32/Christmas-Island.png" alt="flag">
<img src="img/flags/32/Cocos-Keeling-Islands.png" alt="flag">
<img src="img/flags/32/Colombia.png" alt="flag">
<img src="img/flags/32/Commonwealth.png" alt="flag">
<img src="img/flags/32/Comoros.png" alt="flag">
<img src="img/flags/32/Cook-Islands.png" alt="flag">
<img src="img/flags/32/Costa-Rica.png" alt="flag">
<img src="img/flags/32/Cote-dIvoire.png" alt="flag">
<img src="img/flags/32/Croatia.png" alt="flag">
<img src="img/flags/32/Cuba.png" alt="flag">
<img src="img/flags/32/Curacao.png" alt="flag">
<img src="img/flags/32/Cyprus.png" alt="flag">
<img src="img/flags/32/Czech-Republic.png" alt="flag">
<img src="img/flags/32/Democratic-Republic-of-the-Congo.png" alt="flag">
<img src="img/flags/32/Denmark.png" alt="flag">
<img src="img/flags/32/Djibouti.png" alt="flag">
<img src="img/flags/32/Dominica.png" alt="flag">
<img src="img/flags/32/Dominican-Republic.png" alt="flag">
<img src="img/flags/32/East-Timor.png" alt="flag">
<img src="img/flags/32/Ecuador.png" alt="flag">
<img src="img/flags/32/Egypt.png" alt="flag">
<img src="img/flags/32/El-Salvador.png" alt="flag">
<img src="img/flags/32/England.png" alt="flag">
<img src="img/flags/32/Equatorial-Guinea.png" alt="flag">
<img src="img/flags/32/Eritrea.png" alt="flag">
<img src="img/flags/32/Estonia.png" alt="flag">
<img src="img/flags/32/Ethiopia.png" alt="flag">
<img src="img/flags/32/European-Union.png" alt="flag">
<img src="img/flags/32/Falkland-Islands.png" alt="flag">
<img src="img/flags/32/Faroes.png" alt="flag">
<img src="img/flags/32/Fiji.png" alt="flag">
<img src="img/flags/32/Finland.png" alt="flag">
<img src="img/flags/32/France.png" alt="flag">
<img src="img/flags/32/French-Polynesia.png" alt="flag">
<img src="img/flags/32/French-Southern-Territories.png" alt="flag">
<img src="img/flags/32/Gabon.png" alt="flag">
<img src="img/flags/32/Gambia.png" alt="flag">
<img src="img/flags/32/Georgia.png" alt="flag">
<img src="img/flags/32/Germany.png" alt="flag">
<img src="img/flags/32/Ghana.png" alt="flag">
<img src="img/flags/32/Gibraltar.png" alt="flag">
<img src="img/flags/32/GoSquared.png" alt="flag">
<img src="img/flags/32/Greece.png" alt="flag">
<img src="img/flags/32/Greenland.png" alt="flag">
<img src="img/flags/32/Grenada.png" alt="flag">
<img src="img/flags/32/Guam.png" alt="flag">
<img src="img/flags/32/Guatemala.png" alt="flag">
<img src="img/flags/32/Guernsey.png" alt="flag">
<img src="img/flags/32/Guinea-Bissau.png" alt="flag">
<img src="img/flags/32/Guinea.png" alt="flag">
<img src="img/flags/32/Guyana.png" alt="flag">
<img src="img/flags/32/Haiti.png" alt="flag">
<img src="img/flags/32/Honduras.png" alt="flag">
<img src="img/flags/32/Hong-Kong.png" alt="flag">
<img src="img/flags/32/Hungary.png" alt="flag">
<img src="img/flags/32/Iceland.png" alt="flag">
<img src="img/flags/32/India.png" alt="flag">
<img src="img/flags/32/Indonesia.png" alt="flag">
<img src="img/flags/32/Iran.png" alt="flag">
<img src="img/flags/32/Iraq.png" alt="flag">
<img src="img/flags/32/Ireland.png" alt="flag">
<img src="img/flags/32/Isle-of-Man.png" alt="flag">
<img src="img/flags/32/Israel.png" alt="flag">
<img src="img/flags/32/Italy.png" alt="flag">
<img src="img/flags/32/Jamaica.png" alt="flag">
<img src="img/flags/32/Japan.png" alt="flag">
<img src="img/flags/32/Jersey.png" alt="flag">
<img src="img/flags/32/Jordan.png" alt="flag">
<img src="img/flags/32/Kazakhstan.png" alt="flag">
<img src="img/flags/32/Kenya.png" alt="flag">
<img src="img/flags/32/Kiribati.png" alt="flag">
<img src="img/flags/32/Kosovo.png" alt="flag">
<img src="img/flags/32/Kuwait.png" alt="flag">
<img src="img/flags/32/Kyrgyzstan.png" alt="flag">
<img src="img/flags/32/Laos.png" alt="flag">
<img src="img/flags/32/Latvia.png" alt="flag">
<img src="img/flags/32/Lebanon.png" alt="flag">
<img src="img/flags/32/Lesotho.png" alt="flag">
<img src="img/flags/32/Liberia.png" alt="flag">
<img src="img/flags/32/Libya.png" alt="flag">
<img src="img/flags/32/Liechtenstein.png" alt="flag">
<img src="img/flags/32/Lithuania.png" alt="flag">
<img src="img/flags/32/Luxembourg.png" alt="flag">
<img src="img/flags/32/Macau.png" alt="flag">
<img src="img/flags/32/Macedonia.png" alt="flag">
<img src="img/flags/32/Madagascar.png" alt="flag">
<img src="img/flags/32/Malawi.png" alt="flag">
<img src="img/flags/32/Malaysia.png" alt="flag">
<img src="img/flags/32/Maldives.png" alt="flag">
<img src="img/flags/32/Mali.png" alt="flag">
<img src="img/flags/32/Malta.png" alt="flag">
<img src="img/flags/32/Mars.png" alt="flag">
<img src="img/flags/32/Marshall-Islands.png" alt="flag">
<img src="img/flags/32/Martinique.png" alt="flag">
<img src="img/flags/32/Mauritania.png" alt="flag">
<img src="img/flags/32/Mauritius.png" alt="flag">
<img src="img/flags/32/Mayotte.png" alt="flag">
<img src="img/flags/32/Mexico.png" alt="flag">
<img src="img/flags/32/Micronesia.png" alt="flag">
<img src="img/flags/32/Moldova.png" alt="flag">
<img src="img/flags/32/Monaco.png" alt="flag">
<img src="img/flags/32/Mongolia.png" alt="flag">
<img src="img/flags/32/Montenegro.png" alt="flag">
<img src="img/flags/32/Montserrat.png" alt="flag">
<img src="img/flags/32/Morocco.png" alt="flag">
<img src="img/flags/32/Mozambique.png" alt="flag">
<img src="img/flags/32/Myanmar.png" alt="flag">
<img src="img/flags/32/NATO.png" alt="flag">
<img src="img/flags/32/Nagorno-Karabakh.png" alt="flag">
<img src="img/flags/32/Namibia.png" alt="flag">
<img src="img/flags/32/Nauru.png" alt="flag">
<img src="img/flags/32/Nepal.png" alt="flag">
<img src="img/flags/32/Netherlands-Antilles.png" alt="flag">
<img src="img/flags/32/Netherlands.png" alt="flag">
<img src="img/flags/32/New-Caledonia.png" alt="flag">
<img src="img/flags/32/New-Zealand.png" alt="flag">
<img src="img/flags/32/Nicaragua.png" alt="flag">
<img src="img/flags/32/Niger.png" alt="flag">
<img src="img/flags/32/Nigeria.png" alt="flag">
<img src="img/flags/32/Niue.png" alt="flag">
<img src="img/flags/32/Norfolk-Island.png" alt="flag">
<img src="img/flags/32/North-Korea.png" alt="flag">
<img src="img/flags/32/Northern-Cyprus.png" alt="flag">
<img src="img/flags/32/Northern-Mariana-Islands.png" alt="flag">
<img src="img/flags/32/Norway.png" alt="flag">
<img src="img/flags/32/Olympics.png" alt="flag">
<img src="img/flags/32/Oman.png" alt="flag">
<img src="img/flags/32/Pakistan.png" alt="flag">
<img src="img/flags/32/Palau.png" alt="flag">
<img src="img/flags/32/Palestine.png" alt="flag">
<img src="img/flags/32/Panama.png" alt="flag">
<img src="img/flags/32/Papua-New-Guinea.png" alt="flag">
<img src="img/flags/32/Paraguay.png" alt="flag">
<img src="img/flags/32/Peru.png" alt="flag">
<img src="img/flags/32/Philippines.png" alt="flag">
<img src="img/flags/32/Pitcairn-Islands.png" alt="flag">
<img src="img/flags/32/Poland.png" alt="flag">
<img src="img/flags/32/Portugal.png" alt="flag">
<img src="img/flags/32/Puerto-Rico.png" alt="flag">
<img src="img/flags/32/Qatar.png" alt="flag">
<img src="img/flags/32/Red-Cross.png" alt="flag">
<img src="img/flags/32/Republic-of-the-Congo.png" alt="flag">
<img src="img/flags/32/Romania.png" alt="flag">
<img src="img/flags/32/Russia.png" alt="flag">
<img src="img/flags/32/Rwanda.png" alt="flag">
<img src="img/flags/32/Saint-Barthelemy.png" alt="flag">
<img src="img/flags/32/Saint-Helena.png" alt="flag">
<img src="img/flags/32/Saint-Kitts-and-Nevis.png" alt="flag">
<img src="img/flags/32/Saint-Lucia.png" alt="flag">
<img src="img/flags/32/Saint-Martin.png" alt="flag">
<img src="img/flags/32/Saint-Vincent-and-the-Grenadines.png" alt="flag">
<img src="img/flags/32/Samoa.png" alt="flag">
<img src="img/flags/32/San-Marino.png" alt="flag">
<img src="img/flags/32/Sao-Tome-and-Principe.png" alt="flag">
<img src="img/flags/32/Saudi-Arabia.png" alt="flag">
<img src="img/flags/32/Scotland.png" alt="flag">
<img src="img/flags/32/Senegal.png" alt="flag">
<img src="img/flags/32/Serbia.png" alt="flag">
<img src="img/flags/32/Seychelles.png" alt="flag">
<img src="img/flags/32/Sierra-Leone.png" alt="flag">
<img src="img/flags/32/Singapore.png" alt="flag">
<img src="img/flags/32/Slovakia.png" alt="flag">
<img src="img/flags/32/Slovenia.png" alt="flag">
<img src="img/flags/32/Solomon-Islands.png" alt="flag">
<img src="img/flags/32/Somalia.png" alt="flag">
<img src="img/flags/32/Somaliland.png" alt="flag">
<img src="img/flags/32/South-Africa.png" alt="flag">
<img src="img/flags/32/South-Georgia-and-the-South-Sandwich-Islands.png" alt="flag">
<img src="img/flags/32/South-Korea.png" alt="flag">
<img src="img/flags/32/South-Ossetia.png" alt="flag">
<img src="img/flags/32/South-Sudan.png" alt="flag">
<img src="img/flags/32/Spain.png" alt="flag">
<img src="img/flags/32/Sri-Lanka.png" alt="flag">
<img src="img/flags/32/Sudan.png" alt="flag">
<img src="img/flags/32/Suriname.png" alt="flag">
<img src="img/flags/32/Swaziland.png" alt="flag">
<img src="img/flags/32/Sweden.png" alt="flag">
<img src="img/flags/32/Switzerland.png" alt="flag">
<img src="img/flags/32/Syria.png" alt="flag">
<img src="img/flags/32/Taiwan.png" alt="flag">
<img src="img/flags/32/Tajikistan.png" alt="flag">
<img src="img/flags/32/Tanzania.png" alt="flag">
<img src="img/flags/32/Thailand.png" alt="flag">
<img src="img/flags/32/Togo.png" alt="flag">
<img src="img/flags/32/Tokelau.png" alt="flag">
<img src="img/flags/32/Tonga.png" alt="flag">
<img src="img/flags/32/Trinidad-and-Tobago.png" alt="flag">
<img src="img/flags/32/Tunisia.png" alt="flag">
<img src="img/flags/32/Turkey.png" alt="flag">
<img src="img/flags/32/Turkmenistan.png" alt="flag">
<img src="img/flags/32/Turks-and-Caicos-Islands.png" alt="flag">
<img src="img/flags/32/Tuvalu.png" alt="flag">
<img src="img/flags/32/US-Virgin-Islands.png" alt="flag">
<img src="img/flags/32/Uganda.png" alt="flag">
<img src="img/flags/32/Ukraine.png" alt="flag">
<img src="img/flags/32/United-Arab-Emirates.png" alt="flag">
<img src="img/flags/32/United-Kingdom.png" alt="flag">
<img src="img/flags/32/United-Nations.png" alt="flag">
<img src="img/flags/32/United-States.png" alt="flag">
<img src="img/flags/32/Unknown.png" alt="flag">
<img src="img/flags/32/Uruguay.png" alt="flag">
<img src="img/flags/32/Uzbekistan.png" alt="flag">
<img src="img/flags/32/Vanuatu.png" alt="flag">
<img src="img/flags/32/Vatican-City.png" alt="flag">
<img src="img/flags/32/Venezuela.png" alt="flag">
<img src="img/flags/32/Vietnam.png" alt="flag">
<img src="img/flags/32/Wales.png" alt="flag">
<img src="img/flags/32/Wallis-And-Futuna.png" alt="flag">
<img src="img/flags/32/Western-Sahara.png" alt="flag">
<img src="img/flags/32/Yemen.png" alt="flag">
<img src="img/flags/32/Zambia.png" alt="flag">
<img src="img/flags/32/Zimbabwe.png" alt="flag">
</div>
</div>
</div>
</div>
</div>
</div>
Christopher W. Olsen