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.

Solution

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.

Comments

[Gabriel G. Roy]

This should be clearer in the Ember guides. I was certainly confused by this concept at first.

[Patrick M]

Excellent summary of an excellent post. But the last quote you include doesn't make sense: That namespace will have an " which [...]. What does the " mean? Is it just a placeholder for Route | Controller | View?

[mavilein]

Hey Patrick, thanks for pointing that out. I could not make a clue out of it anymore. Therefore i added more complex example with nested resources. I think this cite referred to this scenario.

[Patrick M]

That is much clearer. Thanks for the extra example, mavilein.

[Timo]

Can you elaborate on what is the difference (if any) between your example and this: App.Router.map(function() { this.route("posts", { path: "/" }, function() { this.route("new"); this.route("comments"}, function() { this.route("new"); }); }); this.route("another", { path: "/another" }); });

[mavilein]

@TimoLehto: I think your approach probably does not even work (only use routes, no resources). As far as i remember you are not allowed to nest beneath routes. You are only allowed to nest beneath resources.

[Timo]

@mavilein Sure you can. You used to not be able to create nested routes, but it's totally legit nowadays. Just somewhat poorly documented. So that's why I ask. To bring this answer up-to-date with the way things work presently.

[mavilein]

@TimoLehto I am not very up to date with Ember. Then it may be that a route with nested childs is the same as a resource. The only thing i would check then wether nested routes have the same behavior regarding the namespaces. -> Does each route with children reset the namespace?

[locks]

Hey, just wanted to comment that currently the only difference between this.resource and this.route is that the first resets the namespace, while the latter doesn't. Everything else is the same. From what I understand, this.resource is to be deprecated, so use this.route.

[thecodejack]

yes..since 1.11.0 this.route is only used rather this.resource