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? docs.angularjs.org/api/ng/type/angular.Module#constant — jlowcs
– jlowcs, Commented Mar 17, 2015 at 22:09
Yes so your consle is saying the configuration does not know of the existence of the variable translationEn — Michelangelo
– Michelangelo, Commented Mar 17, 2015 at 22:15

Blackhole · Accepted Answer · 2015-03-17 22:14:27Z

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.

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?
If your variable is global and declared in a previous file, you can use it. See this question for instance. But don't do it without a good reason, and contemplate to use a constant service as I've explained.
thanks for the answer! Always trying to learn something out of someone elses question.

Michel · Accepted Answer · 2015-03-17 22:34:48Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related