MEAN.JS与角度翻译

Question

I am validating Mean.JS 0.4.1

Trying to implement multilingual support on sample application.

Following this article http://outlandish.com/blog/internationalisation-using-angular-translate-express-and-node/

bower installed following packages

"angular-translate": "~2.5.2", "angular-translate-loader-url": "~2.5.2", "angular-translate-storage-cookie": "~2.5.2"

added 'pascalprecht.translate' to the end of the dependencies in modules\\core\\client\\app\\config.js as shown below.

var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload','ui.utils.masks','pascalprecht.translate'];

after that added following lines in modules\\core\\client\\app\\init.js

angular.module(ApplicationConfiguration.applicationModuleName).config(['$locationProvider', '$httpProvider','$translateProvider',
  function ($locationProvider, $httpProvider,$translateProvider) {

    $translateProvider.useUrlLoader('/lang'); //Added By Me
    $translateProvider.preferredLanguage('es'); //Added By Me

    $locationProvider.html5Mode(true).hashPrefix('!');

    $httpProvider.interceptors.push('authInterceptor');
  }
]);

I've created a express route as show below in modules\\core\\server\\routes\\core.server.routes.js

//Language Route app.route('/lang').get(core.getLanguageText); //added by me

I've created a getLanguageText shown below in modules\\core\\server\\controllers\\core.server.controller.js

exports.getLanguageText = function (req, res) {
   console.log('Call Received To getLanguageText');
   console.log('Language Requested Is: '+  req.query.lang);
// Check endpoint called with appropriate param.:
    if(!req.query.lang) {
        res.status(500).send();
        return;
    }

    try {
        var lang = require('../config/i18n/' + req.query.lang);
        res.send(lang); // `lang ` contains parsed JSON
    } catch(err) {
        res.status(404).send();
    }
};

I try to use above implementation in home.client.view.html on client side as follows

 <h1>{{ 'home.helloWorld' | translate }}</h1>

Json file defined on sever

es.json

{
    "languageNames": {
        "en": "Inglés",
        "es": "Español",
        "fr": "Francés"
    },
    "home": {
        "helloWorld": "Hola Mundo!"
    }
}

express route is never been hit and i am getting.

 GET /lang?lang=es 304 12.647 ms - -

on node console.

why is my route never hit and why am i getting 304.

Are there any better solutions to implement multilingual support on MEAM.JS stack.

Thanks in advance.

Answer 1

Are you sure the angular-translate.js file is being included in the layout ??

It looks like bower-installed files (those on /public/lib ) are not loaded by default. Instead, its paths hardcoded in /config/assets/default.js