how to define constants for Angular JS in a different file

Question

I want to write several constants for my Angular JS app. I want to write them in a separate file and want to access them.

I have tried with IIFE (Immediately Invoked Function Expression) like this,

constants.js

var Constants = (function () {

    var allConstants = {
        "url": 'abc',
        "name": "anijit",
        "sn": "sau"
    }

    return allConstants
})();
console.log('defined constants', Constants)

But when I have tried to access them it show Constants not defined error. Where I have done the wrong thing?

I want to access them using Constants.url in the way and I don't want to make any $http call or something like that. How to achieve that?

Read stackoverflow.com/questions/24831323/angularjs-constants — Satpal
– Satpal, Commented Jul 11, 2017 at 13:46
Additional examples: bguiz.github.io/js-standards/angularjs/constants — terpinmd
– terpinmd, Commented Jul 11, 2017 at 13:50

KKS · Accepted Answer · 2017-07-11 14:04:42Z

As such you are using AngularJS, you can use Constant Service. as a constant can be injected anywhere including configuration calls in angularjs application.

Also, as the name suggests, the constants are fixed, they get applied before other provide methods. See $provide.constant() for more detail.

// Storing a single constant value
var app = angular.module('myApp', []);

app.constant('appName', 'My App');

// Now we inject our constant value into a test controller
app.controller('TestCtrl', ['appName', function TestCtrl(appName) {
    console.log(appName);
}]);

// Storing multiple constant values inside of an object
// Note: values in the object mean they can be modified
var app = angular.module('myApp', []);

app.constant('config', {
    appName: 'My App',
    appVersion: 1.0,
    apiUrl: 'http://www.facebook.com?api'
});

// Now we inject our constant value into a test controller
app.controller('TestCtrl', ['config', function TestCtrl(config) {
    console.log(config);
    console.log('App Name', config.appName);
    console.log('App Name', config.appVersion);
}]);

christo8989 · Accepted Answer · 2019-02-01 22:31:19Z

2

You can use a factory (I personnaly always use storage.factory.js in my projects). Easy to inject everywhere and you can use some functions to setup your constants or change them a little bit if you want.

angular.module('app')
    .factory('storage', storageFactory);

    function storageFactory() {
        const data = {
            serverAddress : 'http://server.address:port'
        };

        return data;       
    }

edited Feb 1, 2019 at 22:31

christo8989

6,8945 gold badges40 silver badges48 bronze badges

answered Jul 11, 2017 at 13:47

Alburkerk

1,77215 silver badges19 bronze badges

Comments

Eduardo Lima · Accepted Answer · 2017-07-11 13:54:20Z

1

file 1:

(function () {
  'use strict';

  angular.module('app', [
    'app.constants'
  ]).value('CONSTANT_EXAMPLE', 'value example')
    .value('OTHER_EXAMPLE', 'other example');

})();

file 2:

(function () {

  'use strict';

  angular.module('app.example-use', [])
    .factory('example', example);

  example.$inject = ['CONSTANT_EXAMPLE']; // and others injections

  function example(CONSTANT_EXAMPLE) { // and others injections

    function getConstantExample() {
      var option = CONSTANT_EXAMPLE;
      // use ...
    }

    return {
      getConstantExample: getConstantExample
    };
  }

})();

answered Jul 11, 2017 at 13:54

Eduardo Lima

544 bronze badges

Collectives™ on Stack Overflow

how to define constants for Angular JS in a different file

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related