using config files with angularjs

Question

I'm creating a angular app that talks to a node backend express application and using a config file to set env variables in my node app I can access my config file like this:

index.js

  var port = config.get("server:port");
  var server = app.listen(port, function() {});

My config file looks like this:

app.config.js

    module.exports =
    {
"server":{
    "host":"localhost",
    "port":3000
  },
      "mongodb": "",

      "redis": {
        "loadBalancerInstance": {
          "host": "server",
          "port": {
            "default": "6379"
          }
        }
      },
      "elastic": {
        "server": "server",
        "port": "9200",
        "user":"foo",
        "password":"bar"
      },
      "log": {
        "level": "info",
        "filename": "",
        "console": true,
        "logio": {
          "port": "28777",
          "node_name": "this-server-name",
          "host": "server"
        }
      }
    };

I have statically defined the route/port to a backend

datafactory.js

angular.module('dashboard.factories')
  .factory('DataFactory', function($http, $q, FormatFactory) {
    var backend = function(apiEndPoint, clientKey) {
      clientKey = clientKey || "";
      var deferred = $q.defer();
      $http.get("http://localhost:3000/<-(pull this from config file)" + apiEndPoint + "/" + clientKey)

My question is how can I access app.config.js within angular and dynamically set host/port within my angular service

Neil S · Accepted Answer · 2015-09-14 23:49:14Z

1

I suppose if you're stuck on using the same configuration file that your node server uses, you'll have to make the .js file available to a GET request from your app, which you'll then have to parse out the string into JSON.

Edit: You're going to have to have two configuration files, one available to your node server, and one for your angular app. Now, if you want the source to be one file, you could build that into your build process - if you use something like gulp or grunt, this would be reasonably easy. It could take the singular config file and build two files - the node server config file, and an angular module (I would suggest a constant or value) that you could inject into your data services.

edited Sep 14, 2015 at 23:49

answered Sep 14, 2015 at 22:28

Neil S

2,30421 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1952312 Over a year ago

how would you do a get request before you know which port the backend is running on?

Neil S Over a year ago

sounds like you've got a problem if you can't access the config file without knowing the contents of the config file.

user1952312 Over a year ago

is there not a way to use a get require equivalent on the frontend and just import the config file like i do with the backend

Neil S Over a year ago

a simple google search leads me to believe it would: blog.codecentric.de/en/2014/08/angularjs-browserify

user1952312 Over a year ago

came across this as well didn't know if it was common/best practices but thanks i think this will solve my problem

Jamie · Accepted Answer · 2015-09-14 22:36:30Z

0

If you're serving the config file at localhost:3000/config, you can do this:

angular.module('dashboard.factories')
.factory('DataFactory', function($http, $q, FormatFactory) {
    $http.get('localhost:3000/config')
    .success(function(config) {
        $http.get(config.server.host + ":" + config.server.port)
        // whatever you want here
    });
});

answered Sep 14, 2015 at 22:36

Jamie

2,3111 gold badge22 silver badges39 bronze badges

1 Comment

Neil S Over a year ago

The config file OP provided in the question is not valid JSON.

Collectives™ on Stack Overflow

using config files with angularjs

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related