title: How to access environment variables on Heroku from AngularJS
body: <p>I have 3 of AngularJS apps on Heroku. Each of them consumes different API.</p>
  
  <p>(For example: angularjs-dev consume api-dev, angularjs-qa consumes api-qa)</p>
  
  <p>I created constant file like this below</p>
  
  <pre><code>SITE     = 'dev'
  API_SITE = {
        dev       : 'dev-url',
        qa        : 'qa-url',
        production: 'production-url'
  }
  </code></pre>
  
  <p>And then when I want the API url, I call it this way <code>API_SITE[SITE]</code></p>
  
  <p>This problem is when I want to deploy to qa, I have to change <code>SITE</code> to <code>qa</code>.</p>
  
  <p><strong>I wonder that: can we make AngularJS read environment variables defined on Heroku so we won't have to change it manually again</strong></p>
  
  <p>Note:
  I know that AngularJS is running on client-side. So, I have no idea how to do it.</p>
  
  <p>Anyone? </p>