Controllers

Then and Now

Then and Now

Ember 1.x

{{render 'controllerName' model}}

Ember 2.x

{{component 'component-name' model=model}}

Rending Partials with State

Ember 1.x

{{#each item in controller itemController='itemControllerName'}}
  <li>{{item.itemControllerProperty}}</li>
{{/each}}

Ember 2.x

{{#each model as |item|}}
  <li>{{component-name item=item}}</li>
{{/each}}

State in Each Loops

Ember 1.x

export default Ember.Controller.extend({
  state: 'value'
})

Ember 2.x

export default Ember.Service.extend({
  state: 'value'
})

Global State

export default Ember.Controller.extend({
  global: Ember.inject.service(),
  globalState: Ember.computed.alias('global.state')
})

export default Ember.Controller.extend({
  needs: ['global'],
  globalState: Ember.computed.alias('controllers.global.state')
})

Ember 1.x

export default Ember.Controller.extend({
  state: 'value',
  actions: {
    myAction(){
      //stuff
    }}
  }
})

Ember 2.x

Actions and State for a Route

export default Ember.Controller.extend({
  state: 'value',
  actions: {
    myAction(){
      //stuff
    }}
  }
})

Then vs Now

Goal	Ember 1.x	Ember 2.x
Render partial with state	Controller	Component
State in #each loops	item-controller	Component
Global State	Controller	Services
Actions and State for a Route	Controller	Controller (In the future, Routable Components)

Controllers in Ember 2