CODEWITHSUNDEEP
javascriptangularjs
Larry Martell
Larry Martell

Reputation: 3756

How can I set Angular values from a config file?

I have an app that I have inherited that I have to support. So far it had only run on one server and we want to run it on different servers. We found hard coded references to the server name all over the place in python server code and C++ client code. It was easy enough to change those to read the server name from a config file. But now I find is a js module this code:

angular.module('app.config', []).constant('config', {"api":"http://foo.bar.com:8001/"});

How can I change this so that the value for the server is read dynamically from a config file or some other means that would not require it to be hard coded?

Here is an update with what I have tried:

Originally, my code had this:

angular.module('app.config', []).constant(
  'config', {"api":"http://foo.bar.com:8001/"}
);

and I changed it to this:

angular.module('app.config').controller('myCtrl', 
  function($scope, $http) { 
    $http.get('./config.json') 
      .then(function(response) { 
        $scope.api = response.data; 
    }); 
});

and I got this:

error Module 'app.config' is not available!

Then I changed it to:

angular.module('app.config', [] ).controller('myCtrl', 
  function($scope, $http) { 
    $http.get('./config.json') 
      .then(function(response) { 
        $scope.api = response.data; 
      }); 
});

And then I get:

Error: [$injector:unpr] Unknown provider: configProvider <- config <- workitem

I feel I am very close, I just need a bit more help.

Another update:

I tried this:

angular.module('app').controller('home', ['$scope', homeCtrl]);
angular.module('app').controller('workitem', ['$scope', '$routeParams', '$sce', '$timeout', '$http', 'config', workitemCtrl]);
},{"./home/home.js":3,"./workitem/workitem.js":4,"angular":10,"angular-route":6,"angular-sanitize":8,"bootstrap-treeview/src/js/bootstrap-treeview.js":11}],2:[function(require,module,exports){
  module.exports = function($scope,$http) {
      $http.get('config.json').success(function(reponse) {
          console.log("reponse --> "+reponse.api);
          $scope.api = reponse.api;
      });
  }

But then of course app.config was not getting defined. How could I do this an still define app.config?

I just tried this:

var my_config = {};

$.getJSON("config.json", function(data) {
  $.each(data, function(key, val) {
    my_config[key] = val;
  });
});

but I get my_config is not defined when I use it down in the controller. How can I make that variable available in the controller?

Upvotes: 2

Views: 9072

Answers (4)

shershen
shershen

Reputation: 10003

You can do:

  1. Use ngConstant build task to wrap your standalone config file in JSON format into the includable angular.config data. Suppose you have app/config.json file:

    { "myFirstCnt": true, "mySecondCnt": { "hello": "world" } }

Then after running the ngConstant task in you build you'll get dist/config.js (output) will be :

define(["require", "exports"], function(require, exports) {
  return angular.module("my.module.config", ["ngAnimate"])
    .constant("myFirstCnt", true)
    .constant("mySecondCnt", { "hello": "world" })
    .constant("myPropCnt", "hola!");
});

Gulp plugin, Grunt plugin, more on ngConstant

  1. Use service to load the JSON file immediately after you app bootstraps in service or in the controller:

should avoid this:

app.controller('myCtrl', 
  function($scope, $http) {
    $http.get('PATH_TO/config.json').then(function(response) {
      $scope.myWelcome = response.data;
    });
  }
);

More on that way example here: Reading in JSON through Angular Resources Service

UPD 12-06

For parsing loaded JSON try this:

for (var name in data) {
  if (data.hasOwnProperty(var)) {
     my_config[var] = data[var];
  }
}

Upvotes: 0

Larry Martell
Larry Martell

Reputation: 3756

I was finally able to get this working by doing this up front:

angular.module('app').value('config', {
  api: ''
});

angular.module('app').run(function($rootScope, $http, config) {
  $http.get('config/config.json').then(function(response) {
        config.api = response.data.api;
        $rootScope.$broadcast('config-loaded');
    });
});

Wrapping the main code in:

var init = function(){
}

And adding this at the end:

if (config.api) {
  init()
} else {
    var configLoaded = scope.$on('config-loaded', function() {
        init();
        configLoaded();
    });
}

Upvotes: 0

byteC0de
byteC0de

Reputation: 5273

Try This

angular.module('app.config', [])
.constant('bbConfig',{ 
     "api":"http://foo.bar.com:8001/"
 });

In controller

angular.module('app.config', [])
.controller('MainCtrl',['$scope', 'bbConfig' , function ($scope, bbConfig){
    console.log(bbConfig.api)
}]);

Upvotes: 3

Dazz
Dazz

Reputation: 629

Create a service to read the config (json file) or make a call to server and store the response URL in LocalStorage like the following. You can access it from every where

$localStorage.api = response.Url ; // http://foo.bar.com:8001/

Upvotes: 0

Related Questions