New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

application.template.hbs

<h1>Order of execution of route methods</h1>
<br>
<br>
{{outlet}}
<br>
<br>

my-index.template.hbs

Open console and click on the link below <br>
{{link-to 'page-one' 'my-route'}}

my-page.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
	msg : `good day to you`
});

my-page.template.hbs

{{msg}}
<br>
<br>
Today is {{model.date}}
<br>
<br>
Check Console

my-route.route.js

import Ember from 'ember';

let template = function () {
	console.log(`templateName`);
	return `my-page`;
};

let controller = function () {
	console.log(`controllerName`);
	return `my-page`;
};

export default Ember.Route.extend({
activate() {
	this._super(...arguments);
	console.log('activate');
},
beforeModel() {
	this._super(...arguments);
	console.log('beforeModel');
},
model() {
	console.log('model');
	return new Ember.RSVP.Promise(function(resolve, reject) {
 		Ember.run.later(this, () => {
		 resolve({ date: new Date() });
    }, 3000);
  }).then((json) => {
 	return json;
  });
},
afterModel() {
	this._super(...arguments);
		console.log('afterModel');
},
setupcontroller() {
	this._super(...arguments);
  	console.log('setupcontroller');
},

templateName: `my-page`,

controllerName: `my-page`,

resetController() {
	this._super(...arguments);
  	console.log('resetController');
},

deactivate() {
	this._super(...arguments);
	console.log('deactivate');
},

  
actions: {
willTransition() {
	this._super(...arguments);
		console.log('willtransition');
},
didTransition() {
	this._super(...arguments);
	console.log('didTransition');
	Ember.run.later(this, () => {
    console.log(`----going to page 2----`);
		this.transitionTo('page-two');
  }, 2000);
},

loading() {
	this._super(...arguments);
	console.log('loading');
}
}
});

page-two.route.js

import Ember from 'ember';

export default Ember.Route.extend({

actions: {
willTransition() {
	this._super(...arguments);
	console.clear();
	console.log(`--------going to page one -------`);
  }
}
});

page-two.template.hbs

page two

{{link-to 'go to page one' 'my-route'}}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
		this.route('my-index', { path: '/' });
	this.route('my-route', { path: '/page-one' });
	this.route('page-two');
});

export default Router;

twiddle.json

{
  "version": "0.6.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember-template-compiler.js"
  }
}