Routing

The URL is a first-class citizen in Ember, everything starts at the URL.

It represents the state of the current page’s primary data. For example, a page displaying comments for blog post with ID=5 could naturally have a URL of http://ember.app/posts/5/comments.

Comments are primary data. A tag cloud on that same page loaded by another service would be considered secondary data and shouldn’t belong to the URL.

In order to map URLs to routes we have an object called the Router:

// app/router.js

// ...
Router.map(function() {
  this.route('posts', function() {
    this.route('post', { path: ':post_id' });
  });
});
// ...

Ember has a mechanism to locate different kind of files (routes, controllers, services, etc). A standard path for PostsPostRoute is app/routes/posts/post.js.

When the URL is requested, the PostsPostRoute will invoke model() from where we return our model:

// app/routes/posts/post.js

import Route from '@ember/routing/route';

export default class PostsPostRoute extends Route {
  model({ post_id }) {
    return {
      id: post_id,
      body: "Lorem Ipsum"
    }
  }
});