Wallogit.com
2017 © Pedro Peláez
Symfony2 and AngularJS module for client side translations
The AngularTranslator Bundle ( Symfony2 ) provides a translator in the client side. This translator can be accessed via an angular filter or a service., (*1)
Include the Bundle from packagist in your composer.json file:, (*2)
require: { "undf/angular-utrans": "dev-master" }
Include the javascript :, (*3)
``` jinja @UndfAngularTransBundle/Resources/public/js/services/uTrans.js, (*4)
Pass a json with all the exposed message keys that will feed your translator from a certain Catalogue. Just include the twig function, in the first argument and the name of the catalogue Domain in the second argument. ``` jinja {{ utrans_expose_translations('NameOfTheCatalogueYouWantToExpose', 'locale') }}
utrans_expose_translations reads the Catalogue "NameOfTheCatalogueYouWantToExpose", using the "translator" service and creates a { json object } which exposes all the translations to the client side. So, you don't have to worry about creating this configuration, the Twig function does it for you. This is what the twig helper will do for you: ```` html, (*5)
This bundle uses an Angular Module called "uTrans" Don't forget to include this module as a dependency of your AngularJS application. Example: ```html <html ng-app="mainModule"> ... </html> ```` ```javascript // You must add the uTrans module in your app's dependencies angular.module('mainModule', [ 'ng', 'uTrans' , '...' ]);
from a *.html.twig file:, (*6)
``` jinja, (*7)
{% raw %}, (*8)
{{ 'key_to_translate' | trans }}, (*9)
{# Note that the curly braces are a string that will be interpreted by angularJS #}, (*10)
{% endraw %}, (*11)
if you need to pass parameters pass them with a placeholder %myVariable% ``` html {{ 'key_to_translate' | trans: { '%myVariable%' : javascriptVar } }}
You can also use the uTrans Service and allow AngularJS to inject the service for you, wherever you need it:, (*12)
``` javascript angular.module('aModule', [ 'uTrans' ]). factory('aService', function( uTrans ){ // uTrans is the service injected by Angular I will use in my 'aService';, (*13)
var foo = 'bar';
var message = uTrans.trans('myKey', { '%param%' : foo })
alert( message );
}); ```, (*14)
Symfony2 and AngularJS module for client side translations
MIT
javascript angularjs symfony angular