What is the difference between a route and resource in New Router API?

Question

I am trying to understand the difference between a Route and a Resource. The way I understand Resource helps to set sub paths of a Route object to another Route Object. But its unclear when i think of default name mapping happening for paths as well.

Answer 1

Please Note that from 1.11.0 onwards, this.route is only used instead of this.resource. Source: http://guides.emberjs.com/v1.11.0/routing/defining-your-routes/*

Have a look at this post for a detailed explanation.

This is a rough summary of this post (i have modified a bit):

Ever since the change to resource and route a lot of people are confused about the meaning of the two and how they affect naming. Here’s the difference:

• resource - a thing (a model)
• route - something to do with the thing

So this means a router using a route and resource might look like this:

App.Router.map(function() {
  this.resource("posts", { path: "/" }, function() {
    this.route("new", { path: "/new" });
  });
  this.route("another", { path: "/another" });
});

This would result in the following routes being created/used:

• PostsRoute, PostsController, PostsView
• PostsIndexRoute, PostsIndexController, PostsIndexView
• PostsNewRoute, PostsNewController, PostsNewView
• AnotherRoute, AnotherController, AnotherView

As we see from this example, resource effect the naming of the Controllers,Routes and Views being used/created (The "new" route is treated as subordinate to "posts" resource). Cite from the original source (i modified it, because it was irritating as Patrick M correctly pointed out in the comments):

This means whenever you create a resource it will create a brand new namespace. That namespace is named after the resource and all of the child routes will be inserted into it.

Update: more complex example with nested resources

Consider the following more complex example with multiple nested resources:

App.Router.map(function() {
  this.resource("posts", { path: "/" }, function() {
    this.route("new", { path: "/new" });
    this.resource("comments", { path: "/comments" }, function() {
      this.route("new", { path: "/new" });
    });
  });
  this.route("another", { path: "/another" });
});

In this case the resource comments creates a brand new namespace. This means the resulting routes in this case will be the following. As you can see the Route, Controller and View for the comments resource are not prefixed with the name of the parent route. That means nesting a resource within another resource resets the namespace (= creates a new namespace).

• PostsRoute, PostsController, PostsView
• PostsIndexRoute, PostsIndexController, PostsIndexView
• PostsNewRoute, PostsNewController, PostsNewView
• CommentsRoute, CommentsController, CommentsView
• CommentsNewRoute, CommentsNewController, CommentsNewView
• AnotherRoute, AnotherController, AnotherView

This behaviour is also explained in the Ember Docs.