Site editor

Routing service

Learn about Ember's new public routing service

Summary

Ember's new routing service is available today in Ember Canary, and exposes state and several actions from Ember's router.

export default Ember.Component.extend({
  router: Ember.inject.service(),

  actions: {
    goHome() {
      this.get('router').transitionTo('index');
    }
  }
});
Current route: {{router.currentRouteName}}
Current URL: {{router.currentURL}}

Transcript

Today, we're going to look at the routing service that's now a part of Ember Canary.


I'm really excited to show you this new service, because now your components and helpers have a way to directly access the router.

Here we've got an application with a handful of different routes. We can see the page changing as we click between them in the nav. To demonstrate the router service, let's first create a component called router-info. Then we'll add it to our application template.

Now, let's open that component and its template. First, we'll inject the routing service into the component. Then we'll move down to the template, and use the service to display the current route name and current URL. Once we save, we can see our component rendering these variables as we click around the application.

Now, what's really neat about the routing service is that it also gives us a JavaScript API to transition the router. In the component, let's create a new action called goHome. This will use the routing service to transition to the home page. Let's put a link in our template that invokes this action.

Now, when we click the link, we're brought to the home page.

Before we wrap up, just a quick note. This features' only available in the canary build of Ember. As with all canary features, it could be removed, or its API could change as new use cases develop.

If you found this video informative, sign up for the EmberMap newsletter. We'll keep you updated on the routing service, and let you know as it progresses to a stable release.

👋 Hey there, Ember dev!

We hope you enjoyed this free video 🙂

If you like it and want to keep learning with us, we've written a free 6-lesson email course about the fundamental patterns of modern component design in Ember.

To get the first lesson now, enter your best email address below:

You can also check out more details about the course by clicking here.

Questions?

us, or ask in #media on Discord