Service Example

components.widget-display.js

import Ember from 'ember';

export default Ember.Component.extend({
  connected: Ember.inject.service('connected-api'),
  
  didInsertElement() {
  	this._super(...arguments);
    //this.gyms = this.get('connected').gymData()
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  /**
  * This can be inject anywhere in the app. 
  */
  connected: Ember.inject.service('connected-api'),
  
  /**
  * sudo code: calling a method on the service with then chaining
  */
  gymData() {
    return this.get('connected').gymData().then((response) => {
      return response
    }).
    catch((error) => {
      return error.message
    })
  },
  
  
  init() {
  	this._super(...arguments);
    /*
    * Can call method in service at any point. and set it in memeory
    * if the service can return promises it gives the flexability of .then() chaining and catching errors.
    * this data could be passed down to nested routes 
    */
  	this.gyms = this.get('connected').gymData()
  	this.oneGym = this.get('connected').myGymes()
  
  
  	/**
    * this.gyms = gymData()
    */
	},
  
  
  
});

services.connected-api.js

import Ember from 'ember';

export default Ember.Service.extend({
  /*
  * could have multiple to make different calls if need (flexability)
  *They are singleton’s (meaning there is only a single instance in your entire application), and they are only created when you get 		them (this.get('serviceName') ). They would only be destroyed when the whole application is destroyed.
  */
  gymData() {
    return [
      {id: 1, name: '24 Hour Fitness'},
      {id: 2, name: 'LA Fitness'},
      {id: 3, name: 'Golds Gym'},
    ]
  },
  
 	
  myGymes(user) {
   return [{id: 1, name: '24 Hour Fitness'}]
  },
  
  /**
  pollGym: task(function * () {
    while (true) {
      yield timeout(10000);
      let gym = yield this.gymData();
      return gym
    }
  }).restartable()
  */
  //etc ...
});

templates.application.hbs

{{widget-display data=gyms}}

{{widget-display data=oneGym}}

{{outlet}}

templates.components.widget-display.hbs

{{yield}}
{{#each data as |u|}}
	{{u.id}} - {{u.name}}
{{/each}}

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}