angular translate

Un módulo de angular para proyectos internacionales

archivado en: JavaScript / 22 diciembre, 2014

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?

|| Tags: , ,

valoración de los lectores sobre angular translate

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

4 respuestas a “angular translate

  1. 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

  2. Hola,

    debes inyectar la dependencia $translate en el controlador…

    .controller(‘tuControlador’, function ($scope, $translate, …

    Y luego

    var mensaje = $translate.instant(‘LOQUESEA’);
    console.log(mensaje)