Angular Translator (ngTranslator)
A translation module for AngularJS.
Table of contents:
Getting started
Installation
You can install with bower or npm
// bowerbower install ng-translator --save // npmnpm install ng-translator --save
Import in your project
- Include
dist/angular-translator.min.js
in ourindex.html
, after including Angular itself. - Inject
ngTranslator
to your main module's list of dependencies.
Configuration
In app.run
method configure the translation module (This is the best way but you can do this wherever you want):
app;
Define translations
Angular-translator working with external file for translations.
Create a folder in your project, for example ./languages
, and put inside your translations file in json format.
For example you can create two languages (en.json
and it.json
) for English and Italian and should be something like:
// eng
{ "say_hi": "Hello World!" }
// it
{ "say_hi": "Ciao Mondo!" }
How to use
In the example below i use always <span>
element but you can use whatever you want
Simple translation
Used for a simple text to translate
Result Hello World!
HTML
en.json
Translation with params
Used for translate a string that contain runtime data.
You can define your dynamic content with @param_name
then use translated-params
in your HTML tag for passing @param_name value.
Check the sample below:
Result A translation module for AngularJS. [v0.0.1]
HTML
<!-- alternative without angular var -->
AngularJS
$scopeversion = "version":"v0.0.1";
en.json
Inputs
Used for translate placeholder in input filed. Insert in you translated tag placeholder-translated
HTML
en.json
Translation for prural
Used for translate a string that can be single or prural.
In the example below there is a combination of parameters and prural.
In your <lang>.json
file you should define an array with two elements and in position 0
the sentece for the single case and in position 1
the sentence for the prural case.
Result
1 result
6 results
HTML
<!-- Single value --> <!-- Prural value -->
AngularJS
$scoperesults_value = "one": "value" : 1 ;
en.json
Other examples
This chapter is for understand better how to define you json file for a language.
HTML
<!-- Simple translation --> <!-- Array in <lang>.json --> <!-- Placeholder translation --> <!-- Prural with parameters --> <!-- Prural with parameters -->
en.json
Dynamic translation
Inject $translator
service in your controller/service/etc.. for a run time translation with $translator.translate(<key>, <params>, <prural_value>)
HTML
Click Me!
AngularJS
app;
en.json
Switch language
You can switch between language in real time. (try the example in this repo)
HTML
ItalianoEnglish
AngularJS
$scope.switch = function _switch(lng){
// async method. When finish call $compile.
$translator
.changeLanguage({
language : lng,
path : "languages/",
default : "en"
});
}
en.json
LICENSE
The MIT License
Copyright (c) 2016 Gianluca Tursi http://www.gianlucatursi.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.