Defining the routes

Normally, the Ember.js applications start with creating a global namespace followed by defining the routes. js/scripts.js starts with the following code:

App = Ember.Application.create();
App.Router.map(function() {
  this.resource('social-feed', { path: '/' }, function() {
    this.route("tweets", { path: '/tweets/:handle' });
  });
});

There is one resource and one route created. The route responds on a URL that contains a dynamic segment. Let's check the names of the controllers and templates in Ember.js Chrome extension. The following screenshot displays the exact created classes:

Ember.js defines several routes by default: application, loading, and error. The first one is the main project route. LoadingRoute and ErrorRoute can be used if we have asynchronous transition between two routes. These substates are very useful if we load the model data from an external resource and want to indicate the process somehow.