Ember.js: Tutorial — Part 2: Service Injection

Lessons

  1. Splattributes and class attribute
  2. Router service
  3. Ember
    1
    service vs. global variable
  4. Mock service in test

1. Splattributes and class attribute

1.1. Generate share-button component

1.2. Edit share-button component

NOTE

class, unlike all other attributes, concatenates previous and new values.

1.3. Edit share-button component class

NOTE

  • currentURL returns current page URL
  • shareURL glues
    Web Intent API
    2
    and component's URL parameters

1.4. Edit detailed namespaced component

NOTE

Visit a rental detailed page then click Share on Twitter.


2. Router service

2.1. Edit share-button component class

NOTE

  • window.location.origin provides root URL
  • @service router injects router service into component
    • It is available as this.router
    • It has a currentURL property to provide current "logical" URL

2.2. Edit super-rentals acceptance test

2.3. Run specific super-rentals acceptance test


3. Ember service vs. global variable

  • In Ember, a service serves a similar role from that of a global variable
  • Like a global variable, a service can be accessed from any parts of the app
  • Unlike a global variable, a service is scoped only to the app not all of JS code
  • By default, Ember infers name of injected service from name of property
    • e.g. @service router is a shorthand for @service('router') router
    • or @service('router') emberRouter for this.emberRouter custom name

4. Mock service in test

4.1. Edit share-button component test

4.2. Run share-button component test


References

Show Comments