An Ember application transitions its state between a set of routes; each can render a template that displays the current state and a controller to support its state-based data. Routes are registered inside the router configuration, typically inside router.js
, in the case of an Ember CLI project structure. Routes are defined inside their own JS files.
Routes can be generated and autoconfigured from the command line as follows:
ember generate route user --pod
This command generates route.js
and template.hbs
under app/<pod-directory>/user/
. Upon generation, both artifacts will have a basic structure and you need to flesh them out according to your specific requirements. A typical route will have a model hook, which prepares its data. See the structure of a typical but minimal route given in the following code:
import Ember from 'ember'; export default Ember.Route.extend({ model: function(args) { return this.store.findAll('task'); } });
In the preceding example, the model
hook fetches data from DS.Store
, the Ember Data repository. The route renders the template.hbs
file in the same directory in the case of an Ember CLI project, unless another template is specified inside the renderTemplate
method. The model of a route is available to the controller and template (via a controller) for manipulation and rendering.