Ember.js Cookbook

Working with transitions

When inside a route, you can use the controller to transition to another route. We'll look at an example on how to transition from one route to another.

How to do it...

1. In a new application, generate the following files:

   $ ember g route foo1
   $ ember g route foo2
   $ ember g controller foo1
   $ ember g controller foo2
   $ ember g template index
   

   This will generate two different routes for us—the foo1 and foo2 routes. Each route will have a button that transitions to the other route. Each controller will handle the action logic.

2. Add an action to the foo1 controller:

   // app/controllers/foo1.js
   import Ember from 'ember';
   
   export default Ember.Controller.extend({
       actions: {
         enter(){
           this.transitionToRoute('foo2');
         }
       }
   });

   This controller ...