Services

Services can be generated using Ember CLI's service generator. For example, the following command will create the ShoppingCart service:

ember generate service shopping-cart

Services must extend the Ember.Service base class:

export default Ember.Service.extend({
});

Like any Ember object, a service is initialized and can have properties and methods of its own.

export default Ember.Service.extend({
  items: null,

  init() {
    this._super(...arguments);
    this.set('items', []);
  },

  add(item) {
    this.get('items').pushObject(item);
  },

  remove(item) {
    this.get('items').removeObject(item);
  },

  empty() {
    this.get('items').setObjects([]);
  }
});

To access a service, inject it either in an initializer or with Ember.inject:

export default Ember.Component.extend({
  cart: Ember.inject.service('shopping-cart')
});

This injects the shopping cart service into the component and makes it available as the cart property.

You can then access properties and methods on the service:

export default Ember.Component.extend({
  cart: Ember.inject.service('shopping-cart'),

  actions: {
    remove(item) {
      this.get('cart').remove(item);
    }
  }
});

<ul>
  {{#each cart.items as |item|}}
    <li>
      {{item.name}}
      <button {{action "remove" item}}>Remove</button>
    </li>
  {{/each}}
</ul>

The injected property is lazy; the service will not be instantiated until the property is explicitly called. It will then persist until the application exits.

If no argument is provided to service(), Ember will use the dasherized version of the property name:

export default Ember.Component.extend({
  shoppingCart: Ember.inject.service()
});

This also injects the shopping cart service, as the shoppingCart property.