Service Test

components.testing.cool-component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

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

models.index-model.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  templateProperty: attr()
});

router.js

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

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

Router.map(function() {
  this.route('another-route');
});

export default Router;

routes.another-route.js

import Ember from 'ember';

export default Ember.Route.extend({
    myService: Ember.inject.service(),
  
  	model: function() {
    	return this.get('myService')
    },
  
  	actions: {
    	callServiceMethod: function() {
        debugger;
      	this.get('myService').serviceMethod1(); 
        this.get('myService').changeProp2('changed!');
      }
    }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  myService: Ember.inject.service(),  
  
    
  model: function() {
  	return this.get('myService')
  },
  	  
  actions: {
  	testClick: function(newTemplateProperty) {
      debugger;

      this.get('myService').changeServiceProperty1(newTemplateProperty);
      
    } 
  }
});

services.my-service.js

import Ember from 'ember';

export default Ember.Service.extend({
  nestedService: Ember.inject.service(),
  serviceProperty1: undefined,
  prop2: 'property 2',
  prop3: 'property 3',  
  
  init() {
    this._super(...arguments);
    this.set('serviceProperty1', "First service property" );
  },
  
  serviceMethod1: function() {
    alert(this.get('serviceProperty1'));
    alert(this.get('nestedService').nestedProperty);
  },
  
  changeServiceProperty1: function(newValue) {
  	this.set('serviceProperty1', newValue);
  },
  
  changeProp2: function(changedValue) {
  	this.set('prop2', changedValue);
    alert('prop2 changed from another-route - Index model updated');
  }
});

services.nested-service.js

import Ember from 'ember';

export default Ember.Service.extend({
  nestedProperty: 'My Nested Property!'
});

templates.another-route.hbs

<h2>Another Route</h2>

<h3>{{model.serviceProperty1}}</h3>

<button class="btn btn-default btn-lg" {{action 'callServiceMethod'}}>Call Service Method</button>

templates.application.hbs

<h1>{{appName}}</h1>

<ul class="nav nav-pills">
  {{#link-to 'index' tagName="li"}}<a href=false>Home</a>{{/link-to}}
  {{#link-to 'another-route' tagName="li"}}<a href=false>Another</a>{{/link-to}}
 
  
</ul>

{{outlet}}
<br>
<br>

templates.components.testing.cool-component.hbs

{{yield}}
<h4>Such a cool component</h4>

templates.index.hbs

<h2>Index Template</h2>

<h3>{{input value=model.serviceProperty1}}</h3>

<p>{{model.prop2}}</p>

<p>{{model.prop3}}</p>

<p>{{model.serviceProperty1}}</p>

<button class="btn btn-primary btn-lg" {{action 'testClick' model.serviceProperty1}}>Change Service Value</button>

twiddle.json

{
  "version": "0.10.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0",
    "bootstrap-css": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
    "bootstrap-js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
    "material-design-css": "https://cdn.jsdelivr.net/g/[email protected](css/bootstrap-material-design.min.css+css/ripples.min.css+css/bootstrap-material-design.css+css/ripples.css)",
    "material-design-js": "https://cdn.jsdelivr.net/g/[email protected](js/material.min.js+js/ripples.min.js)"
    
  },
  "addons": {}
}