Component without template file

application.controller.js

import Ember from 'ember';

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

application.template.hbs

<h1>Component without template file</h1>
<br>
<br>
<p>This example make use of <b>ember-cli-htmlbars-inline-precompile</b> to create components without need to define its template in a different file (*.hbs).</p>
{{no-template}}
<br>
<br>

no-template.component.js

import Ember from 'ember';
const { GlimmerComponent } = Ember;
import hbs from 'htmlbars-inline-precompile';

export default GlimmerComponent.extend({
	professor: 'Dijkstra',
  layout: hbs`
  <div>
  <p>As {{professor}} teaches us, we must remove the conceptual gap between the static program and the dynamic process.</p>
  <button {{action 'suchColocation'}}>Send the action</button>
  </div>`,
  actions:{
    suchColocation(){
      alert('Colocation if you want.');
    }
  }
});

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}