what is the role of router in a single page application

Question

I am new to Ember-js, I was recently going through some blog entries and also saw the video of Ember-js introduction by Tom dale.

to summarize they say that Router Api is newly introduced and it the best thing that happened to Ember-js,Router Api is used to manage the state of the application and each state is identified with a URL, now for a single page application where in we use only one URL, what is the role of the router, will there be only one routeing entry which is mapped to '/'(index)? If yes, then we lose the advantage provided by the Router api right?

Answer 1

now for a single page application where in we use only one URL, what is the role of the router, will there be only one routeing entry which is mapped to '/'(index)?

Typically a single page application will still use the url. For example watch url change when using gmail. So in this case single page application means the browser doesn't fetch a new page as url changes. Like gmail, a typical ember single-page application will change url as user navigates to various parts of the application. The ember router takes care of this automatically.

If yes, then we lose the advantage provided by the Router api right?

If you decide not to use the url, and really want it to just stay "/" the whole time, you can still use the router. Just set the router's location type to "none"

See http://emberjs.com/guides/routing/specifying-the-location-api/

I understand that routing here means managing states, but at any point of time user can be in a set of states for instance take gmail the user would be in login state and compose state, how to manages multiple states existing together?

For sure that is true. The ember router is basically a statechart where routes (leaf nodes) are nested under some number of resources. So in the case of gmail for example only a logged in user can be in the compose state.

GMail URL: https://mail.google.com/mail/u/0/?shva=1#inbox

// Gmail Routes:
* /mail - the mail application
* /u/0 - connected account index 0 for the current user
* ?shva=1 - http://stackoverflow.com/questions/1692968/what-is-shva-in-gmails-url
* inbox - folder name

EmberMail Version: https://mail.ember.com/mail/u/0/inbox

// EmberMail Routes
this.resource('mail', { path: '/mail' }, function() {
  this.resource('currentUser', { path: '/u' }, function() {
    this.resource('account', { path: '/:account_id' }, function() {
      this.route('folder', { path: '/:folder_id' });
    });
  });
});

can you point me to a example application which uses routing extensively?

The best example I know of is discourse. Check out the following for example of how a large ember application uses the ember router:

• Discourse Application routes

• Discourse Admin routes