Implementing Services in an Ember.js Application

The following examples assume your project uses ember-cli. Names of files and objects will be a little different if you're working in globals mode.

Define the service in the file app/services/myservice.js:

export default Ember.Object.extend({
  logFoo: function () {
    console.log("foo");
  },
});

Initialize the service using an initializer under app/initializers/services:

export default {
  name: "services",
  initialize: function (container, app) {
    // Inject into all routes and controllers
    app.inject("route", "myService", "service:myservice");
    app.inject("controller", "myService", "service:myservice");

    // Or if you wanted, into a specific route
    app.inject("route:some-route", "myService", "service:myservice");
  },
};

Your service is now available in the classes you specified. Try it out by with this.myService.logFoo() in a route.

You can also inject other objects into a service:

export default {
  name: "services",
  initialize: function (container, app) {
    // Make the ember-data store available in the service
    app.inject("service:myservice", "store", "store:main");

    // Then inject service into all routes
    app.inject("route", "myService", "service:myservice");
  },
};

“Services” is a fancy name. But you can imagine a number of practical applications:

• Geolocation
• WebSockets
• WebWorkers
• Alternate data stores (other than ember-data)

Ember’s inject (and corresponding register) methods are pretty powerful. But it's easy to get carried away with dependency injection; keep in mind that just because you are ‘inject’ dependencies doesn't mean you avoid tight-coupling and all the issues that comes with it.

There's a proposal to make services an official convention in Ember.js. You can read more about it here.