npm install -g ember-cli

ember new ember-quickstart --lang en

cd ember-quickstart
ember serve

Livereload server on http://localhost:7020
Serving on http://localhost:4200/

ember generate route scientists

installing route
  create app/routes/scientists.js
  create app/templates/scientists.hbs
updating router
  add route scientists
installing route-test
  create tests/unit/routes/scientists-test.js

{{page-title "Scientists"}}
<h2>List of Scientists</h2>

import Route from '@ember/routing/route';

export default class ScientistsRoute extends Route {
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
}

<h2>List of Scientists</h2>

<ul>
  {{#each @model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>

Ember.Route.extend ({  
   model(parameter) {  
      //code block  
   }  
});  
  
Router.map(function() {  
   this.route('linkpage', { path: 'identifiers' });  
});  

Ember.Route.extend ({  
   model() {  
      return Ember.RSVP.hash({  
         //code block  
      })  
   }  
});  

App.Person = Ember.Object.extend({  
  say: function(thing) {  
    alert(thing);  
  }  
});  

App.PersonView = Ember.View.extend({  
  tagName: 'li',  
  classNameBindings: ['isAdministrator']  
}); 

App.Person = Ember.Object.extend({  
  say: function(thing) {  
    var name = this.get('name');  
    alert(name + " says: " + thing);  
  }  
});  
AppApp.Soldier = App.Person.extend({  
  say: function(thing) {  
    this._super(thing + ", sir!");  
  }  
});  
var sam = App.Soldier.create({  
  name: "Free Time Leaarn"  
});  
sam.say("Reporting"); // alerts "Free Time Leaarn says: Reporting, sir!"  

"ember. Service"​

"ember.Inject"  

ember generate service service_name;  

<ExampleComponent>
  This is the default <b>block content</b> that will
  replace `{{yield}}` (or `{{yield to="default"}}`)
  in the `ExampleComponent` template.
</ExampleComponent>

<ExampleComponent>
  <:default>
    This is the default <b>block content</b> that will
    replace `{{yield}}` (or `{{yield to="default"}}`)
    in the `ExampleComponent` template.
  </:default>
</ExampleComponent>

<Message::Avatar
  @title={{@avatarTitle}}
  @initial={{@avatarInitial}}
  @isActive={{@userIsActive}}
  class={{if @isCurrentUser "current-user"}}
/>
<section>
  <Message::Username
    @name={{@username}}
    @localTime={{@userLocalTime}}
  />

  {{yield}}
</section>

<Message
  @username="Tomster"
  @userIsActive={{true}}
  @userLocalTime="4:56pm"
  @avatarTitle="Tomster's avatar"
  @avatarInitial="T"
>
  <p>
    Hey Zoey, have you had a chance to look at the EmberConf
    brainstorming doc I sent you?
  </p>
</Message>

import { helper } from '@ember/component/helper';
import Helper from '@ember/component/helper';

function substring([string], { start, length }) {
export default class Substring extends Helper {
  compute([string], { start, end }) {
    return string.substring(start || 0, end);
  }
}

<label for="user-question">Ask a question about Ember:</label>
<Input
  id="user-question"
  @type="text"
  @value="How do text fields work?"
/>

<label for="user-comment">Comment:</label>
<Textarea
  id="user-comment"
  @value={{this.userComment}}
  rows="6"
  cols="80"
/>

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

import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class SlowModelRoute extends Route {
  @service store;

  model() {
    return this.store.findAll('slow-model');
  }
}

Router.map(function() {
  this.route('articles', function() {
    this.route('overview');
  });
});

ember generate model person

import Model from '@ember-data/model';

export default class PersonModel extends Model {
}

// GET /blog-posts/1
this.store.findRecord('blog-post', 1)  // => GET /blog-posts/1
  .then(function(blogPost) {
      // Do something with `blogPost`
  });

let blogPost = this.store.peekRecord('blog-post', 1); // => no network request

// GET /blog-posts
this.store.findAll('blog-post') // => GET /blog-posts
  .then(function(blogPosts) {
    // Do something with `blogPosts`
  });

let blogPosts = this.store.peekAll('blog-post'); // => no network request

store.createRecord('post', {
  title: 'Rails is Omakase',
  body: 'Lorem ipsum'
});

this.store.findRecord('post', 1).then(function(post) {
  // ...after the record has loaded
  post.title = 'A new post';
});

let post = store.peekRecord('post', 1);
post.deleteRecord();
post.isDeleted; // => true
post.save(); // => DELETE to /posts/1

// OR
post = store.peekRecord('post', 2);
post.destroyRecord(); // => DELETE to /posts/2

import Model, { belongsTo } from '@ember-data/model';

export default class UserModel extends Model {
  @belongsTo('profile') profile;
}

import Model, { belongsTo } from '@ember-data/model';

export default class ProfileModel extends Model {
  @belongsTo('user') user;
}

import Model, { hasMany } from '@ember-data/model';

export default class BlogPostModel extends Model {
  @hasMany('comment') comments;
}

import Model, { belongsTo } from '@ember-data/model';

export default class CommentModel extends Model {
  @belongsTo('blog-post') blogPost;
}

import Model, { hasMany } from '@ember-data/model';

export default class BlogPostModel extends Model {
  @hasMany('tag') tags;
}

import Model, { hasMany } from '@ember-data/model';

export default class TagModel extends Model {
  @hasMany('blog-post') blogPosts;
}

let result = this.store.query('post', {
  limit: 10,
  offset: 0
});

{
  "post": {
    "id": 1,
    "title": "Progressive Enhancement is Dead",
    "comments": ["1", "2"],
    "links": {
      "user": "/people/tomdale"
    },
    // ...
  },

  "meta": {
    "total": 100
  }
}

{{this.greeting}}, {{@name}}!

import Component from '@glimmer/component';

export default class HelloComponent extends Component {
  language = 'en';

  get greeting() {
    switch (this.language) {
      case 'en':
        return 'Hello';
      case 'de':
        return 'Hallo';
      case 'es':
        return 'Hola';
    }
  }
}

<Hello @name="Free Time Learning">

Hello, Free Time Learning!

class Person {
  helloWorld() {
    console.log('Hello, world!');
  }
}

<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>

foo.style.height = '500px' // write
foo.offsetHeight // read (recalculate style, layout, expensive!)

bar.style.height = '400px' // write
bar.offsetHeight // read (recalculate style, layout, expensive!)

baz.style.height = '200px' // write
baz.offsetHeight // read (recalculate style, layout, expensive!)

import Model, { attr } from '@ember-data/model';

export default class Player extends Model {
  @attr('number', { defaultValue: 0 }) level;
  @attr('string', { defaultValue: 'Noob' }) levelName;

  levelUp() {
    let newLevel = this.level++;
    if (newLevel === 5) {
      this.levelName = 'Professional';
    }
  }
}

import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
import { run } from '@ember/runloop';

module('Unit | Model | player', function(hooks) {
  setupTest(hooks);

  // Specify the other units that are required for this test.
  test('should increment level when told to', function(assert) {
    const player = run(() =>
      this.owner.lookup('service:store').createRecord('player')
    );

    // wrap asynchronous call in run loop
    run(() => player.levelUp());

    assert.equal(player.level, 5, 'level gets incremented');
    assert.equal(
      player.levelName,
      'Professional',
      'new level is called professional'
    );
  });
});​

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class PostsController extends Controller {
  propA = 'You need to write tests';
  propB = 'And write one for me too';

  setPropB(str) {
    this.propB = str;
  }

  @action
  setProps(str) {
    this.propA = 'Testing is cool';
    this.setPropB(str);
  }
}

import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Controller | posts', function(hooks) {
  setupTest(hooks);
});

import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Controller | posts', function(hooks) {
  setupTest(hooks);

  test('should update A and B on setProps action', function(assert) {
    assert.expect(4);

    // get the controller instance
    let controller = this.owner.lookup('controller:posts');

    // check the properties before the action is triggered
    assert.equal(
      controller.propA,
      'You need to write tests',
      'propA initialized'
    );
    assert.equal(
      controller.propB,
      'And write one for me too',
      'propB initialized'
    );

    // trigger the action on the controller by using the `send` method,
    // passing in any params that our action may be expecting
    controller.send('setProps', 'Testing Rocks!');

    // finally we assert that our values have been updated
    // by triggering our action.
    assert.equal(controller.propA, 'Testing is cool', 'propA updated');
    assert.equal(controller.propB, 'Testing Rocks!', 'propB updated');
  });
});​