Is there a way in AngularJS to define constants with other constants?

Question

I'm trying to define constants with other constants, but it seems that it can't be done, because the initial constant isn't ready when the required constant depending require it. I want to be sure if this isn't possible at all.

Currently I have constants in this way:

angular.module('mainApp.config', [])
    .constant('RESOURCE_USERS_DOMAIN', 'http://127.0.0.1:8008')
    .constant('RESOURCE_USERS_API', 'http://127.0.0.1:8008/users')
    // Specific routes for API
    .constant('API_BASIC_INFORMATION', RESOURCE_USERS_API + '/api/info')
    .constant('API_SOCIAL_NETWORKS', RESOURCE_USERS_API + '/api/social')
    ;

The second two constants are what I want to accomplish.

score 148 · Answer 1 · answered Oct 24 '14 at 13:49

148

An easy way to do this is like this:

var myApp = angular.module("exampleApp",[]);

myApp.constant('RESOURCES', (function() {
  // Define your variable
  var resource = 'http://127.0.0.1:8008';
  // Use the variable in your constants
  return {
    USERS_DOMAIN: resource,
    USERS_API: resource + '/users',
    BASIC_INFO: resource + '/api/info'
  }
})());

And use the constants like this:

myApp.controller("ExampleCtrl", function(RESOURCES){
  $scope.domain = RESOURCES.USERS_DOMAIN;
});

Credits: link

answered Oct 24 '14 at 13:49

Linkmichiel

2,110
4
23
27

3

@Helzgate That's not what @gabn88 was saying. The function being passed to `myApp.constant` is an Immediately-Invoked Function Expression, or IIFE. It calls itself so you don't have to! It looks like this: `(function (params) {//do stuff})()`. Note the parentheses around the function expression and the extra set at the end. – daemone Sep 22 '15 at 13:39
@Helzgate The constant with the name `RESOURCES` will not be a function expression, therefore, but *the object returned by* that function. – daemone Sep 22 '15 at 13:42
2

Best answer available. – Jelle Oosterbosch Dec 16 '15 at 10:13
2

Shouldn't there be a `;` semicolon after the returned object, eg: `return { ..... };` I know that technically you don't need a semi-colon though based on javascript's auto semicolon insertion, [like this link](https://www.codecademy.com/forum_questions/507f6dd09266b70200000d7e) - But what is best practice? – redfox05 Mar 07 '16 at 18:51
For other's clarity, if you end up having to do `RESOURCES().USERS_DOMAIN` then read the comments above about Immediately-Invoked Function Expression (IIFE). I assume this was what Helzgate's comment was about which has been deleted? – redfox05 Mar 07 '16 at 19:03
if I am using these constants in config then getting error : [$injector:modulerr] Failed to instantiate module – Mahesh K Dec 21 '16 at 11:25

score 45 · Accepted Answer · edited Oct 20 '20 at 21:23

The AngularJS way to define dependencies between Controllers, Services and others is by dependency injection (DI). So if you have a controller A that depends on a service B you would have to create it like this:

var myApp = angular.module("exampleApp",[]);

myApp.controller("aCtrl", function(serviceB){
    // Controller functionally here
});

See, AngularJS will check the serviceB dependency and look for the service you created with that name. If you don't create one you will get an error.

So, if you want to create a constant A that depends on constant B, you would need to tell angular that A depends on B. But a constant can't have a dependency. A constant can return a function, but the DI won't work for the constant. Check this Fiddle so you can see for which methods DI work for.

So answering your question, you can't define a constant with other constants.

But you can do this:

angular.module('projectApp', [])
  .constant('domain', 'http://somedomain.com')
  .constant('api', '/some/api/info')
  .service('urls', function(domain, api) {this.apiUrl = domain + api;})

  .controller('mainCtrl',function($scope,urls) {

      $scope.url = urls.apiUrl;

  });

Check this fiddle to see it working:

If you want to understand more about DI, check out this post.

Beterraba · Answer 3 · 2013-08-28T18:25:18.480

13

I do that this way:

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

constants.factory("Independent", [function() {
   return {
      C1: 42
   }
}]);

constants.factory('Constants', ["Independent", function(I) {
   return {
      ANSWER_TO_LIFE: I.C1
   }
}]);

edited Aug 28 '13 at 18:25

answered Aug 28 '13 at 17:53

Beterraba

6,515
1
26
33

@Beterraba. Could you elaborate on this? Where would this code go? Thanks. Mark – mark1234 Jun 18 '14 at 17:57
@mark1234 This code can go wherever you want. I like to put this on my services file. You must remember to include the `constants` module on your main module. – Beterraba Jun 24 '14 at 14:36

score 8 · Answer 4 · answered May 29 '15 at 08:48

As long as you don't need access to your constant in providers, this should work fine:

.constant('HOST', 'localhost')
.factory('URL', function(HOST) { return "http://" + HOST })

If you need access to you constants in providers, then I guess you have to do some more work:

.constants('HOST', 'localhost')
.provider('DOMAIN', function(HOST) {
    var domain = "http://" + HOST;
    this.value = function() { return domain };
    this.$get = this.value;
 })
 .provider("anyOtherProvider", function(DOMAINPovider) {
     var domain = DOMAINProvider.value();
 };
 .factory("anyOtherService", function(DOMAIN) {
 })

This answer should get more love :). Thanks ;) – Nicu Surdu Jul 22 '16 at 14:52 — Nicu Surdu, Jul 22 '16 at 14:52

score 4 · Answer 5 · edited Oct 20 '20 at 21:23

I can't tell for sure if that's (im)possible. But a workaround would be to define the base constants as regular constants, and the higher-order ones as services using closures to make sure they cannot be altered.

Rough example:

angular.module('myApp').constant('BASE_CONSTS',{
    'FIRST_CONST': '10',
    'SECOND_CONST': '20'
});

angular.module('myServices').factory('MyServiceName', ['BASE_CONSTS', function ('BASE_CONSTS') {
    var SECOND_ORDER_CONST = BASE_CONSTS.FIRST_CONST * 100;
    return {
        GET_SECOND_ORDER_CONST: function() {
            return SECOND_ORDER_CONST;
        }
    }
}]);

And use it after injecting the service:

MyServiceName.GET_SECOND_ORDER_CONST();

It is not very elegant, but it should get the job done.

fracz · Answer 6 · 2016-07-13T06:02:38.510

The solution provided by @Linkmichiel is good, but if you desperately want to use one constant inside another, you can combine them in the config block:

angular.module("exampleApp", [])

.constant('BASE_URL', 'http://127.0.0.1:8008')

.constant('RESOURCES', {
  USERS_DOMAIN: '',
  USERS_API: '/users',
  BASIC_INFO: '/api/info'
})

.config(function(BASE_URL, RESOURCES) {
  for (prop in RESOURCES) {
    RESOURCES[prop] = BASE_URL + RESOURCES[prop];
  }
})

.controller('WhatIsInResourcesController', function($scope, RESOURCES) {
  $scope.RESOURCES = RESOURCES;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp">
  <div ng-controller="WhatIsInResourcesController">
    <pre>{{ RESOURCES | json }}</pre>
  </div>
</div>

After the config phase, all constants will be setup correctly (try out the snippet).

The moral of the story is: Angular is so cool that you can even change the constants.

As complement. You need to declara `for (prop in RESOURCES) {` using var or let, like `for (let prop in RESOURCES) {`. — josivan, Feb 17 '17 at 12:35

Is there a way in AngularJS to define constants with other constants?

6 Answers6

Linked