Actions are not just for controllers. Routes can declare the actions for templates and override lifecycle actions. When an action is called, it bubbles up from the template to the controller to the route and to parent routes.

A route can therefore act as the controller when a controller definition is not needed. This might seem contradictory after all our talk about separating the application concerns, but Ember really split the controller’s job into two units: route information and controller logic. Sometimes the route file has more logic and sometimes the controller has more logic. The file separation allows for small digestible chunks of code when the other file has numerous actions or decorators.

To see how this works, you are going to move the create and cancel actions from app/controllers/sightings/new.js to app/routes/sightings/new.js. Making this change will also broaden your perspective on methods and objects passed between these files – and it will be good practice for when you only want a route file and components controlling an application view. (You will learn about components in the next chapter.)

First, add the actions to app/routes/sightings/new.js:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  ...
  },
  sighting: Ember.computed.alias('controller.model.sighting'),
  actions: {
    willTransition() {
      var sighting = this.get('controller.model.sighting');
      if(sighting.get('hasDirtyAttributes')) {
        sighting.deleteRecord();
      }
    },
    create() {
      var self = this;
      this.get('sighting').save().then(function(data) {
        self.transitionTo('sightings');
      });
    },
    cancel() {
      this.get('sighting').deleteRecord();
      this.transitionToRoute('sightings');
    }
  }
});

You also created an Ember.computed.alias for the sighting object in the route. The major difference in accessing the controller’s model.sighting object from the route is where that object lives. The model on the “new” route is not the same as the model on the “new” controller. To access the sighting object you use get('controller.model.sighting'). Creating an alias to this object will save you from typing that out each time.

Now, delete the actions from app/controllers/sightings/new.js:

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    create() {
      var self = this;
      this.get('model.sighting').save().then(function() {
        self.transitionToRoute('sightings');
      });
    },
    cancel() {
      this.get('model.sighting').deleteRecord();
      this.transitionToRoute('sightings');
    }
  }
});

Make sure your application has reloaded (or restart ember server). Navigate to http://​localhost:4200/​sightings/​new and create a new sighting to make sure you can still run the route actions.

At this point, app/controllers/sightings/new.js is irrelevant. You can delete this file. Ember will still create the controller object while the app is running, but you do not need the empty file cluttering up the app directory.

This chapter focused on Ember controllers to show you how to create actions and properties for your templates, transition to new routes after saving data, and destroy records on cancel or a route change. Actions allow you to change the model data backing your application with a simple callback. The controller properties allow you to have page-specific properties before adding relationships to the model data. Last, you have completed the basic CRUD actions of updating and deleting records from an edit route.

Ember allows rapid development by making the creation of controllers optional for when you need these specific details for your routes. Beyond these features, controllers allow you to fine-tune your views and have control over your model data. Actions are the key to user interaction. Furthermore, actions can live on routes, controllers, and components – which are the subject of the next (and final) chapter.