Understanding ApplicationRoute vs IndexRoute

Design
1

HI, I’m starting out with ember and so far so good, i’ve been able to follow couple examples and set up basic applications. From what i’ve read, i don’t understand the purpose of the ApplicationRoute and the difference with the IndexRout, when to use which one?

I get the basics of the index as far as getting the index.html running and setting up a starting page. Not quite there yet with the application. I would appreciate some one getting deeper into the topic.

Best regards,

e

2

ApplicationRoute is the top most route of your application. Its the first thing that’s hit before your code redirects the user to someone else. You could put a bunch of HTML into the application template and your app will effectively work like a widget. Being ApplicationRoute is the top of your route tree, it can be used to handle actions that apply to many aspects of your application. For example, if you have search operation that can be triggered from many places in your app, then you could put your search action into the ApplicationRoute and it would handle the search function whenever its triggered from anywhere in your app. You can learn more about actions in the Handling User Interaction with Actions guide. ( That guide is written about handling actions in controllers, but it applies same way to routes. Architecturally, routes are above controllers, so whatever is not handled in the controller will bubble up to the route. )

IndexRoute is a freebee that you get with every resource. Resources can have other resources and routes under them, IndexRoute is a route that’s automatically added to a resource when you add a resource. IndexRoute is nested into the resource that you created, so architecturally, its a child of the resource. Its useful when you want to create a page that handles default action for the route. For example, let’s say you have a search route.

App.Router.map(function(){
  this.resource('search', function(){
    this.route('results');
  });
});

By default, Ember also create a SearchIndexRoute which you could use to show the search form.

You can learn more about these in Defining your Routes guide.

1 Like
3

Thanks for the response, im letting it sink, but your answer really provided help. So for example an authentication componente could sit in the application controller / route?

4

There are a few different ways that this is done, but putting it in Application Controller/Route is one of them.

You can see this example from Yahuda Katz ( one of the creators of Ember ) http://jsbin.com/eQOZoGe/228/edit

Here is an example of another way to do this https://github.com/mixonic/grimvisage checkout how the ApplicationRoute is used. The difference is that Sing In and Sign Out are treated as separate routes and controllers.