Accessing ENV variables in an EmberJS template

This week I worked on an issue that required me to use an environment variable instead of hardcoding the domain name of the api.

First, I had to remember that routes aren't actually connected to the template, but controllers are.

So in my widgets controller, I imported the config and set a property that I will later access in my template:

import Ember from 'ember';  
import ENV from '../config/environment';

export default Ember.Controller.extend({  
  apiHost: ENV.APP.apiHost,

  tester: 'hello',
});

Then I accessed it in my widgets.hbs template:

{{apiHost}}/testpage

{{tester}}, world!

To gain access of the app config from an addon, you can also use this the ember-get-config addon.

That is all.