Retrieving Constants\string values from a separate JS File

Question

I am developing an Angular JS application. I would like to know what is the best practice to include string values in our code.

I am planning to use another JS File which contains all the constant values. I will call this JS file in each and every JS(Controller) to refer the string values.

check this http://stackoverflow.com/questions/5786054/how-to-declare-string-constants-in-javascript — Frebin Francis, Feb 27 '15 at 07:07
You could store them in a JSON file and grab this via AJAX, when needed. — royhowie, Feb 27 '15 at 07:08

score 4 · Answer 1 · answered Feb 27 '15 at 07:11

You can define constants in angular like

angular.module('moduleName',[]).constant('constName',string|object|array);

You can inject in directive or controller or wherever you want.

angular.module('moduleName',[]).directive('directiveName', ['constName', function(constName){...});

score 2 · Answer 2 · answered Feb 27 '15 at 07:17

You have several options.

Global value. You can use your constants in form of the javascript object which would be globally accessible across the application. For example, your file could look something like this:

config = {
    host: 'domain',
    port: '1234' 
};

Obvious disadvantage is that those values are not really a constants and can be easily changed, so it's error prone.

Angular config module. More reliable and cleaner option is to create a separate module to be used as a dependency for main app module. You would still have separate file for your constants but instead of some global variable this file would hold angular module with constant service. Something like this:

angular.module('app.config', []).constant('config', {
    host: 'domain',
    port: '1234'
});

Then in main application you would configure app like

angular.module('app', ['app.config']).config(function(config) {
    // console.log(config);
});

score 0 · Answer 3 · answered Feb 27 '15 at 07:14

Angular has a built in way of providing constants, e.g:

angular.module('foo', ['ngRoute']) // Your angularjs module

// Decide a name for the bucket of constants, then just declare the
// constants in turn as an object literal:
.constant("HTTP_CONSTANTS", {
    "URL": "http://localhost",
    "PORT": "80"
})

Then you can load it anywhere where you have access too you foo module using dependency injection, i.e.:

angular.module('foo')

.controller('bar', function (HTTP_CONSTANTS) {
    ... // Use HTTP_CONSTANTS.URL or HTTP_CONSTANTS.PORT, for example
})

Here's a good primer on using constants:

http://twofuckingdevelopers.com/2014/06/angularjs-best-practices-001-constants/

score 0 · Accepted Answer · answered Feb 27 '15 at 07:14

0

Here is the sample code;

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

app.constant('configs', {host:'localhost',port:8080});
app.controller('MainCtrl', function($scope, configs) {
  $scope.name = configs.host;
});

here is demo plunker

answered Feb 27 '15 at 07:14

Safi

1,112
7
9

score 0 · Answer 5 · answered Jul 24 '15 at 07:54

You can use factory for this purpose and inject this factory where ever you want these constants.

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

    app.factory('ConstantService', function(){
      var constant={temp:'c'}; 
      var getConstants=function(){
       return constant;
          };
     return{
        constants:getConstants;
      }
    });

    app.controller('MyController',['ConstantService' function (ConstantService){
    var constant= ConstantService.constants;
    }]);

Retrieving Constants\string values from a separate JS File

5 Answers5