Services

An Ember.Service is an Ember object that lives for the duration of the application, and can be made available in different parts of your application.

Services

An Ember.Service is an Ember object that lives for the duration of the application, and can be made available in different parts of your application.

Services are useful for features that require shared state or persistent connections.

Creating a service

$ ember g service session
          

Service definition

import Ember from 'ember';

export default Ember.Service.extend({

  name: 'jupe',

  greeting: Ember.computed('name', function () {
    return `Hello, $(this.get('name'))`;
  }),

  fetchStuff () {
    // this could be async
    return [];
  }

});
          

Injecting a service

Ad hoc injection:

session: Ember.inject.service()

// available in this class as this.get('session');
          

userSession: Ember.inject.service('session')

// now available in this class as this.get('userSession');
          

Injecting a service

Injecting into all instances of a type:

// app/initializers/session.js

export function initialize(application) {
  application.inject('route', 'session', 'service:session');
}

export default {
  name: 'session',
  initialize: initialize
};

// now available in all routes as this.get('session');
          

Components

Re-usable bits of ui, much like web components

Components

Composed of a js file and/or a template

Creating a component

$ ember g component user-profile
          

Component definition

// app/components/user-profile/component.js
import Ember from 'ember';

export default Ember.Component.extend({

  tagName: 'h2',

  classNames: [ 'user-profile-component' ],

  greeting: Ember.computed('firstName', 'lastName', function () {
    return `Hello, ${this.get('firstName')} ${this.get('lastName')}`;
  })

});
          

{{!-- app/components/user-profile/template.hbs --}}
{{greeting}}
          

Component usage

{{!-- some template somewhere --}}
{{user-profile firstName="Mike" lastName="Juniper"}}
          

Component lifecycle hooks

• init
• didInsertElement
• willDestroyElement
• many more

this._super(...arguments);

this.$(...);

DDAU, baby

Child components do not mutate data they do not own.

Instead they:

• Send actions up to the "owner"
• Who mutates the data
• Which flows back down to the child component

DDAU example