Menu
I have an AngularJS application. For text translations Im using angular-translate. It works great, but when I request the first page there are some seconds before the translations are loaded that the page displays the labels.
I have read some posts about it http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading#asynchronous-loading_fouc---flash-of-untranslated-content but still not working.
This is my translation module:
i18n.js:
'use strict';
/* i18n module */
angular.module('myApp.i18n', ['pascalprecht.translate'])
.config(['$translateProvider', function ($translateProvider) {
$translateProvider.preferredLanguage('en');
//$translateProvider.addInterpolation('$translateMessageFormatInterpolation');
$translateProvider.useStaticFilesLoader({
prefix: 'languages/locale-',
suffix: '.json'
});
}]);
included in my app.js main file:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.i18n', 'myApp.properties', 'angularSpinner', 'ngCookies', 'ngSanitize', 'angularCharts', 'ngProgress', 'angularMoment', 'tmh.dynamicLocale'])
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider, $routeParams) {
346
ng-cloak is for preventing angular flickering, the flickering you are talking about is caused by an asynchronous request that is executed, after the initial angular bootstrap is done. You should use translate-cloak directive, which takes care of applying and removing a class on an element, as long as there is an asynchronous loader running.
81
There is a small, but important difference in between your configuration and that one in the documentation:
$translateProvider.translations('en', {
'HELLO_TEXT': 'Hello World!'
});
This translation is loaded WITH the application synchronous and not asynchronous. If you try this one - it should work.
A total different approach would be to attach ng-cloak to the flickering keys or even do something like
<body ng-cloak>
that should work also. Watch for performance and your application configuration as implementing the static texts removes flexibility from within your app as a trade off...
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
