How to read a . json file in the Angular module.config()?

Asked

Viewed 1,314 times

1

I have a config.json file at the root of my project with some information that can be changed: folder path, etc..

I cannot create constants (angular.Constant) in the code, because as I said the values of the file can be changed in production.

But I need to read this file in module.config() and I’m not getting it, how can I do it?

I need something similar to what I do on the Server (Node.js)

var options = JSON.parse(fs.readFileSync(require('path').dirname(require.main.filename) + '/config.json'));

Configuration file:

{
  "port": "3000",
  "ipserver": "127.0.0.1",
  "portserver": "3007"
}
javascript angularjs json

  • How are you doing now? Could show the code that there are?

  • So friend, I haven’t implemented yet, I’m out of ideas, I edited the question and put a similar functionality I have on the server (Node.js), but basically I need to read/load a file. json in angular module.config.

  • I answered your question @Geferson. Javascript does not access the disk directly, you will have to search for other alternatives.

  • I don’t know who denied the answers, I think they are valid, just do not solve complement my problem. any additional idea?

  • Probably because you don’t understand what you have read, otherwise you would have negatively commented. If you can, post your module.config.

  • I’m not the one who said no, so I don’t know why. However the idea of consuming a feature at setup time is not indicated, as you are mixing two stages. Why not fire a boot service that reads the file configuracao.json in the method .run()? Your application should support missing file gracefully - for example displaying an error message.

Show 1 more comment

3 answers

2


You must put this file .json inside a folder in the public and access it using $http:

$http.get("./conf/configuracao.json").success(function(dados, status, headers, config) {
  ...
}).error(function(dados, status, headers, config) {
  ...
});

You can inject the dependency with a solution that is not ideal but works in most cases on .config:

var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
  • 1

    Yes, I had already thought of this idea, but it is not possible to inject $http into the module.config.

  • @Geferson You can try using the $http thus var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');. Since in the .config it may not have been initialized yet

  • 1

    It worked! If you can add in the reply, I validate it as correct. thank you very much.

  • @Geferson added

1

Javascript does not have direct access to the disk, that is to say that there is no function that directly accesses any file, as the fs.readFile of Node.js or Java File Reader. I suggest two options:

HTTP GET

$http.get('/caminho/config.json').then((res)=>{
     var configuracao = res.data;
});

This way it is possible to load the file and read the properties. So with the result apply the desired way.

USE AN AUTOMATED DEVICE

Like the Grunt or Gulp for example.

  • Right, but how do I inject $http into module.config ?

  • Post as is your file with the configuration module.

  • 1

    I upvoted her answer since she partially answers what was asked.

  • 1

    Thank you @Sorack :)

1

As you yourself commented in another reply, it is not possible to use the $http config. I suggest you use an ajax request with pure javascript.

angular.config(config);

config.inject = [...]; // injeção dos seus provider

function config(...) {
  var configAjax = new XMLHttpRequest();
  configAjax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(configAjax.responseText);
      ... resto de sua configuração
    }
  }

  configAjax.open('GET', 'path/do/json', true);
  configAjax.send();
}

Browser other questions tagged javascript angularjs json

You are not signed in. Login or sign up in order to post.