Ember.js Cheat Sheet

Ember.js is a JavaScript framework for building ambitious web applications. Here’s a cheat sheet for Ember.js concepts and commands:

Ember.js Project Structure

Create a New Ember.js App:

ember new my-app

Generate a New Route:

ember generate route my-route

Generate a New Component:

ember generate component my-component

Generate a New Service:

ember generate service my-service

Ember.js CLI Commands

Run the Ember Development Server:

ember serve

Build the Ember Application:

ember build

Generate a Model:

ember generate model my-model

Generate a Controller:

ember generate controller my-controller

Ember.js Templates and Components

Create an Ember Template:

• Template files are typically located in the app/templates directory.

Display a Component in a Template:

{{my-component}}

Pass Data to a Component:

{{my-component data=dataValue}}

Ember.js Routing

Define Routes in router.js:

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

Link to a Route in a Template:

{{#link-to 'my-route'}}Go to My Route{{/link-to}}

Access Route Model:

// my-route.js
import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findAll('my-model');
  }
});

Ember.js Services

Create a Service:

ember generate service my-service

Inject a Service into a Component or Route:

// my-component.js or my-route.js
import { inject as service } from '@ember/service';

export default Component.extend({
  myService: service(),
  // ...
});

Ember.js Models and Data

Create a Model:

ember generate model my-model

Define Model Relationships:

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

export default Model.extend({
  relatedModels: hasMany('related-model'),
});

Load Data in a Route:

// my-route.js
import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findAll('my-model');
  }
});

Ember.js Testing

Run Tests:

ember test

Generate a Test File:

ember generate acceptance-test my-acceptance-test

Ember.js Add-ons

Install an Add-on:

ember install some-addon

List Installed Add-ons:

ember addons

Important Notes

• Ember.js follows the convention over configuration principle.
• Templates use the Handlebars syntax.
• Ember.js embraces the “Data Down, Actions Up” (DDAU) pattern.
• Ember CLI provides powerful generators for scaffolding components, routes, and more.

This cheat sheet provides an overview of common Ember.js commands and concepts. For more detailed information and advanced usage, refer to the official Ember.js documentation.