Angular translate es un módulo muy chulo que, como denota su nombre, sirve para internacionalizar nuestra aplicación angular. Para entender cómo funciona, recordemos qué son y cómo se aplican los filtros personalizados.
Para definir un filtro es tan sencillo como añadirlo a la barra durante la renderización de una variable de la vista:
{{ filter_expression | filter : expression : comparator}}
y luego definir lo que hace mediante filter:
filter('filter')(array, expression, comparator)
Por ejemplo, este filtro convertiría en minúscula una cadena:
'use strict';
angular.module('demoTranslate', [])
.controller('controladorTranslate', function($scope) {
$scope.texto = "SOY UN TEXTO EN MAYÚSCULA";
})
.filter('cadenaMinuscula', function() {
return function(cadena) {
if (cadena) {
return cadena.toLowerCase();
}
}
});
y en la vista:
<body ng-app="demoTranslate">
<section ng-controller="controladorTranslate">
{{ texto | cadenaMinuscula }}
</section>
Esta es justo la idea que subyace tras angular translate. A vuelapluma, que ya es tarde : )
1) Nos lo bajamos, de forma normal o usando bower:
$ bower install angular-translate
2) Lo añadimos a los scripts:
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-translate.min.js"></script>
3) Lo inyectamos en el módulo
'use strict';
var miAplicacion = angular.module('demoTranslate', ['pascalprecht.translate']);
4) Luego armamos un bloque de configuración con un jasonako por cada traducción, donde cada clave es lo que luego pondremos en la vista.
miAplicacion.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('es', {
'SALUDO': 'Hola',
'PLANETA': 'Mundo'
});
$translateProvider.translations('en', {
'SALUDO': 'Hello',
'PLANETA': 'World'
});
/* Valor por defecto */
$translateProvider.preferredLanguage('es');
}]);
5) Por último, en el controlador inyectamos el módulo $translate.
miAplicacion.controller('controladorTranslate', function($scope, $translate) {
/* Este valor se puede obtener dinámicamente, por ejemplo, al enviárselo desde un botón */
$translate.use('es');
});
Y ya solo nos faltaría añadir el filtro en la vista.
<section ng-controller="controladorTranslate">
<p>{{ 'SALUDO' | translate }}</p>
<p>{{ 'PLANETA' | translate }}</p>
</section>
Chulo, no?
Un crack filesi!
Gracias por el esfuerzo en hacer los tutoriales!
gracias doc : )
Hola.
Yo lo estoy utilizando y me funciona muy bien, pero tengo una duda.
Si quiero sacar una alerta desde en controlador con un mensaje traducido, Como pongo la instruccion {{ ‘SALUDO’ | translate }} en el controlador?
Si lo supieras te agradeciria que me lo dijeses.
Muchas gracias
Hola,
debes inyectar la dependencia $translate en el controlador…
.controller(‘tuControlador’, function ($scope, $translate, …
Y luego
var mensaje = $translate.instant(‘LOQUESEA’);
console.log(mensaje)