Menu
Angular-translate in combination with partial-loader only shows the key and not the actual translation. I've tried everything but can't seem to locate the mistake. No errors are logged.
This is my code:
app.js
var app = angular.module('myapp', [ 'ngRoute', 'appRoutes', 'pascalprecht.translate', 'angularTranslate', 'HomeCtrl' ]); angular.module('angularTranslate', ['pascalprecht.translate']) .config(function($translateProvider, $translatePartialLoaderProvider ) { $translateProvider.useLoader('$translatePartialLoader', { urlTemplate: '/languages/{lang}/{part}.json' }); $translateProvider.preferredLanguage('nl'); }); So the templates are loaded from /languages/{lang}/{part}.json
HomeCtrl.js
angular.module('HomeCtrl', []).controller('HomeController', function($scope, $translate, $translatePartialLoader) { $translatePartialLoader.addPart('home'); $translate.refresh(); }); In Express I have this route to ensure that the files are actually returned instead of routed to Angular:
app.get('/languages/:lang/:part', function(req, res) { res.sendFile(req.params.lang + '/' + req.params.part, { root: '././languages' }); }); home.json
{ "HOMETITLE" : "Geweldige Whatsapp gesprekken.", } home.html
{{ "HOMETITLE" || translate }} And finally I have linked everything in index.html using this order:
<script src="../libs/angular/angular.js"></script> <script src="../libs/angular-route/angular-route.js"></script> <script src="../libs/angular-resource/angular-resource.js"></script> <script src="../libs/angular-translate/angular-translate.js"></script> <script src="../libs/angular-translate-loader-partial/angular-translate-loader-partial.js"></script> <script src="../js/controllers/HomeCtrl.js"></script> <script src="../js/appRoutes.js"></script> <script src="../js/index.js"></script> So to restate my problem: only HOMETITLE is displayed instead of the correct translation. Any help is greatly appreciated!
417
NGX-Translate is an internationalization library for Angular. It lets you translate for your content in different languages and switch between them easily. Create a new Angular project using the following NPM command: ng new ngx-translate.
The service also contains a method called translate. It is later called by the pipe to get the translation for a specific key. It always uses the language specified in the 'language'-variable of the service, to lookup the translation. That's it.
Create an entry in the translation file (assets/i18n/en. json). The string interpolation syntax {{ }} is used to indicate a named parameter.
As described in the angular-translate documentation you should replace || with | in the html file :
{{ "HOMETITLE" | translate }} Hereafter a standalone snippet including the json translations :
var app = angular.module('myapp', [ 'pascalprecht.translate', 'angularTranslate', ]); angular.module('angularTranslate', ['pascalprecht.translate']) .config(function($translateProvider, $translatePartialLoaderProvider ) { $translateProvider.translations('nl', { "HOMETITLE" : "Geweldige Whatsapp gesprekken.", }); $translateProvider.preferredLanguage('nl'); });<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.2/angular-translate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-partial/2.7.2/angular-translate-loader-partial.min.js"></script> <html ng-app="myapp"> <body> {{ "HOMETITLE" | translate }} </body> </html>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
