What Does a Router do in Ember.js?

A network router is essentially a traffic conductor and tells data flowing through a network where to go. For instance, if you go to Google.com, the data flows from your laptop to the router in your home. Your router then tells that data leaving your home that it needs to go three blocks up the street, take a left, and follow that cable wire all the way to Google. 

A router in Ember.js is similar. It distributes calls made from the internet to specific endpoints in a web application, telling the application which data to load. If you were to diagram the interactions with the data coming in and out of an Ember.js app, it would look very similar to a network router diagram. 

To fully understand how a router in Ember.js works, it’s best to first define two key components: URL and Virtual DOM.

URL 

Uniform Resource Locater or URL tells browsers where to find a website and the data for it. It locates a website and the structure of a website and identifies that location and structure. 

When you load a website, each portion of the URL may indicate which resource for the website to load. For example, going to PayPal.com/signin loads the account sign-in page for PayPal instead of the PayPal homepage. 

Virtual DOM

DOM stands for “document object model.” The objects in a webpage, like a title or images, are rendered in a DOM. The webpage itself is the document, while the things like the headlines, paragraphs, and images are objects. The model tells browsers how to build the document with its objects.

A single-page app uses a virtual DOM. Otherwise, there is a layer where objects are placed that sits on top of the actual DOM. Most JavaScript frameworks, like Ember.js, use a virtual DOM so that data can be dynamically changed as needed without reloading another webpage. 

Ready to Learn Ember.js?

Get the foundation you need with our Ember.js Essentials course. Not a subscriber to CBT Nuggets? Sign up for a one-week no-strings-attached trial to explore the Ember.js course and more! 

If you landed on this article while researching different JavaScript frameworks, you might be interested in learning Vue.js.

What Does a Router do in Ember.js?

Now that we have clarified what a URL and virtual DOM do, let’s discuss the purpose of a router in Ember.js. 

A router takes an incoming URL request, decodes what that request wants, and loads the correct data for the webpage. Because Ember.js is used to create a single-page app, data is loaded and changed as needed on the website. Let’s walk through the process. 

Let’s say you want to go to the fictional MyPizzaClub.com, which is built on Ember.js. Going to that website loads the main page. The main page has a bunch of different elements like:

• The navigation bar at the top of the page

• A large image in the middle of the page

• A sales pitch saying why MyPizzaClub is awesome

• A form to subscribe to a newsletter

• Another navigation bar at the bottom of the page

MyPizzaClub has you hooked, so you click the sign-up button, which links you to the sign-up page. Because MyPizzaClub.com is a SPA, it doesn’t load a new page. Instead, the image, sales pitch, and newsletter form in the middle of the page are replaced with the Account Creation form on the fly. 

How did MyPizzaClub know to replace those objects on the page with just the URL? That’s what a router in Ember.js does. The router examines the incoming URL request and acts like a traffic conductor telling the page which information to load based on that URL. 

A router for a SPA could be simple. It might have one entry saying if the URL equals MyPizzaClub.com/signup, load the data for the sign-up page, and all other URL requests will load the main page instead. Or the router link can be complicated and include data in them.