How can I define a variable in a controller who is from another file?

Question

Here is my sample code: en.js

var translationsEN = {

USERNAME:     'Username',
PASSWORD:     'Password',
LOGIN:    'Login',
CANCEL:   'Cancel' };

and my controller:

.config(function ($routeProvider, $translateProvider) {
...
$translateProvider.translations('en_US', translationsEN);
$translateProvider.preferredLanguage('en_US');
...

I'm using the module angular-translate of Pascal Precht. When I updated my files, in the console is the message: "translationsEN is not defined" (in my controller) and the message from my language file: "translationsEN is defined but never used"

How can I defined the variable in my Controller? Do I need to define the variable as a service?

How about a constant? https://docs.angularjs.org/api/ng/type/angular.Module#constant — jlowcs, Mar 17 '15 at 22:09
Yes so your consle is saying the configuration does not know of the existence of the variable `translationEn` — Michelangelo, Mar 17 '15 at 22:15

score 2 · Accepted Answer · answered Mar 17 '15 at 22:14

2

The Angular way to achieve your goal is indeed to use a service or, in the case of a simple and constant variable, a constant service:

myModule.constant(
    'myModule.translations.EN',
    {
        USERNAME: 'Username',
        PASSWORD: 'Password',
        LOGIN: 'Login',
        CANCEL: 'Cancel'
    }
);

All you have to do then is to inject it in your configuration method:

myModule.config([
    '$routeProvider',
    '$translateProvider',
    'myModule.translations.EN',
    function ($routeProvider, $translateProvider, translationsEN) {
        // …
        $translateProvider.translations('en_US', translationsEN);
        $translateProvider.preferredLanguage('en_US');
    }
]);

If, for some reasons, you absolutely need to use a classical variable, for instance because it's also used in a non-Angular script, simply be sure to declare it before your configuration method.

answered Mar 17 '15 at 22:14

Blackhole

18,834
7
65
66

I was wondering how you would import a variable from a different file. Should you use `$window` since it is bound to the window object and then inject `$window`? – Michelangelo Mar 17 '15 at 22:23
If your variable is global and declared in a previous file, you can use it. See [this question](http://stackoverflow.com/questions/3244361/can-i-access-variables-from-another-file) for instance. But don't do it without a good reason, and contemplate to use a [constant service](https://docs.angularjs.org/api/auto/service/$provide#constant) as I've explained. – Blackhole Mar 17 '15 at 22:25
thanks for the answer! Always trying to learn something out of someone elses question. – Michelangelo Mar 17 '15 at 22:30

Michael P. Bazos · Answer 2 · 2015-03-17T22:34:48.877

As @Blackhole explained in his answer, the general way to achieve that in angular is to use a provider.

However, in your specific use case of angular-translate, the way to achieve this would be to load your translation files with $translateProvider :

Rename en.js to en_US.json and put it in a folder named, for example, /locales. Make sure your files are valid json, i.e. you want to remove var translationsEN =.

Then configure $translateProvider like that :

$translateProvider.useStaticFilesLoader({
    prefix: '/locales/',
    suffix: '.json'
});

This will load all your json translations files, located in the folder /locales.

That way your translation files will be totally independent of your application logic.

do you know how can I display my changed Language in a dropdown menu? I've a Dropdown in my navigation and I want to display the default language (english) and when you click on Dropdown and change the language in (german) then they should display the new language. — yuro, Mar 18 '15 at 12:09

How can I define a variable in a controller who is from another file?

2 Answers2