AngularJS constants

Question

Is it possible to inject a constant into another constant with AngularJS?

e.g.

var app = angular.module('myApp');

app.constant('foo', { message: "Hello" } );

app.constant('bar', ['foo', function(foo) { 
    return { 
        message: foo.message + ' World!' 
    } 
}]);

I need the use of an angular constant because I need to inject this into a config routine. i.e.

app.config(['bar', function(bar) {
    console.log(bar.message);
}]);

I know that you can only inject constants and providers into config routines, and my understanding is that you can do dependency injection into providers, however, it does not seem to be the best method for this sort of scenario...

Thanks in advance for your help!

Forefoot

So work around is possible, based on your own answer : ) Question is why would you do this? Where is the real world value, why not just define service that relies on multiple constants? – Iodous

The reason I am doing this is to define permission levels... I have constants defining user role levels and user access levels (access levels depend on roles) and this then gets injected into the config routine. – Forefoot

Answer 1

You are correct, it's impossible to register both foo and bar as constants.

Also for using a provider as a workaround, you almost got it right except that you have to store data in a provider instance:

var app = angular.module('myApp', []);

app.constant('foo', {
    message: 'Hello'
});

app.provider('bar', ['foo', function(foo) {
  this.data = {
    message: foo.message + ' World!'
  };

  this.$get = function() {
    return this.data;
  };
}]);

and then in config block, inject a bar's provider instance (not a bar instance as it isn't available yet in the config phase):

app.config(['barProvider', function(barProvider) {
  console.log(barProvider.data.message);
}]);

Hope this helps.

Jokjakarta

Answer 2

Another approach is to use Immediately-invoked function expression to define a function and invoke it immediately. This way, the expression evaluates and returns the value of the function, which can consist of two constants.

This is achievable using something similar to this:

app.constant("foo", (function() {
    var message = 'Hello'
    return {
        foo: message,
        bar: message + " World!"
    }
})());

and then use the constants like:

console.log("foo: " + foo.foo);
console.log("bar: " + foo.bar);

Wilderness

Answer 3

It seems the best way to approach this is to make the second constant a provider. i.e.

var app = angular.module('myApp');

app.constant('foo', { message: "Hello" } );

app.provider('bar', ['foo', function(foo) { 
    this.$get = function() { 
        return { 
            message: foo.message + ' World!' 
        };
    } 
}]);

and then:

app.config(['bar', function(bar) {
    console.log(bar.message);
}]);

Forefoot

The bar is a service instance which can't be injected in the config phase. – Jokjakarta

Answer 4

You cannot inject one constant into another constant. Angular does not allows that. But you can accomplish it by using service as below

angular.module('myApp', [])
    .constant('firstName','John')
    .constant('lastName','Smith')
    .service('name',function(firstName,lastName) {
        this.fullName = firstName + ' ' + lastName;
    })
    .controller('mainCtrl',function($scope,name) {
        $scope.name = name.fullName;
    });

Also to addon , if your constant value is changing in the future, it does not make sense to make use of constant because constants are ready only (However javascript does not support it completely). You can use values instead of constant which is another feature in angularjs which eliminates the use of global variables.

Dermoid

Answer 5

    myApp.constant('bar', {
    get message() {
        Object.defineProperty(this, 'message', {
            value: angular.injector(['myApp']).get('foo').message,
            writable: false,
            enumerable: true,
            configurable: true
        });
        return this.message;
    }
})

try to use lazy loading like this, set value on first get

Wendolyn

Answer 6

As far as documentation goes: / Developer Guide / Providers

Looks like it does not support dependencies syntax, it is just key value pair, where value could be an object.

Iodous

Answer 7

Here is the simple way for creating and using the constant.

var app=angular.module("#app_name#",[]);

//lets defint constant 

app.constant("constantService",{attr:"this is first contant"});

app.controller("#controller_name#",function($scope,constantService){

console.log(constantService);
console.log(constantService.attr);

})

Open the browser in chrome and see the result in console of the browser.
Thanking you.

Cant