title: Pass Environment variables from Node to AngularJS
body: <p>I have an Angular application that is running on a Node environment and as a server is using <code>express.js</code>.</p>
  
  <p>This project has to be deployed on a Heroku dyno, so on that platform, to configure the environment, I set the correct one trough a <code>Procfile</code> like this:</p>
  
  <pre><code>config_env: heroku config:set NODE_ENV=staging
  </code></pre>
  
  <p>Doing this, I have the correct environment set for all the environments.</p>
  
  <p>Now, I would like to pass the <code>process.env.NODE_ENV</code> variable in some way to Angular so it can read the correct API link that has to be call during the Http requests.</p>
  
  <p>I have already read <a href="https://medium.com/@kudresov/a-better-way-to-inject-environmental-variables-in-angular-d3b2d01a3c5e" rel="nofollow noreferrer">this article</a> that seems to be the only one that has multiple solutions with the final one that, as the writer said, does not have any disadvantages (ok, one, but it is ridiculous). </p>
  
  <p>For me (I am not so experienced in Node neither in Angular) it is not clear how this option 4 is working and maybe a lot of you are now using it, so maybe someone can be clearer than the author.</p>
  
  <p>What I do not understand in particular, is how Angular can understand which environment it has to use.</p>
  
  <p>I explain myself: in the article the author is using Gulp with <code>gulp-ng-config</code> to pass the variables (I use Gulp as well so it is very easy to update it with a new task). So, I pass the following <code>config.json</code> file to this plugin (similar to the one in <a href="https://github.com/kudresov/angular-config-vars" rel="nofollow noreferrer">his example</a>):</p>
  
  <pre><code>{
      "development": {
          "ENV_VARS": {
              "apiUrl": "https://api-development.com/",
              "debug": true
          }
      },
      "testing": {
          "ENV_VARS": {
              "apiUrl": "https://api-testing.com/",
              "debug": true
          }
      },
      "staging": {
          "ENV_VARS": {
              "apiUrl": "https://api-staging.com/",
              "debug": true
          }
      },
      "production": {
          "ENV_VARS": {
              "apiUrl": "https://api-production.com/",
              "debug": false
          }
      }
  }
  </code></pre>
  
  <p>And of course I have the following constants as a result:</p>
  
  <pre><code>angular.module("myApp")
  .constant("development", {"ENV_VARS":{"apiUrl":"https://api-development.com/","debug":true}})
  .constant("testing", {"ENV_VARS":{"apiUrl":"https://api-testing.com/","debug":true}})
  .constant("staging", {"ENV_VARS":{"apiUrl":"https://api-staging.com/","debug":true}})
  .constant("production", {"ENV_VARS":{"apiUrl":"https://api-production.com/","debug":false}});
  </code></pre>
  
  <p>Now the problem remains, because Angular does not know which is the correct environment and then the correct constant that it has to use through the app... So, which is the advantage?</p>
  
  <p>Is there maybe another way where I can pass the <code>process.env.NODE_ENV</code> inside the Angular app so I can use something like <code>$http.get({url: ENV_VARS.apiUrl + 'api/sessions'})</code> when there are http requests?</p>