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?

Answer 1

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.