Ember.js: Tutorial — Part 2: Service Injection

Lessons

1. Splattributes and class attribute
2. Router service
3. Ember
   ¹
   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
  ²
  and component's URL parameters

1.4. Edit detailed namespaced component

NOTE

Visit a rental detailed page then click Share on Twitter.

• e.g. localhost:4200/rentals/grand-old-mansion

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

• Service Injection
• Ember
  ¹
• Web Intent API
  ²