Getting Started With ember-cli

This is an ember-cli implementation of TodoMVC.

Each commit corresponds to a single step in the Ember Getting Started guide.

Commit descriptions include any corresponding ember-cli generator and addon install commands.

Initial Commit from Ember CLI v0.2.0

ember new todomvc-embercli

View this step on GitHub

Create static mockup

View this step in the Ember.js Guide or on GitHub

Add the first route and template

ember g route todos --type resource --path '/'

View this step in the Ember.js Guide or on GitHub

Model data

ember g model todo title:string isCompleted:boolean

View this step in the Ember.js Guide or on GitHub

Use fixtures

ember g adapter application

NOTE: The adapter should extend DS.FixtureAdapter rather than DS.RESTAdapter

View this step in the Ember.js Guide or on GitHub

Display model data

View this step in the Ember.js Guide or on GitHub

Display a model's complete state

View this step in the Ember.js Guide or on GitHub

Create a new model

ember g controller todos

View this step in the Ember.js Guide or on GitHub

Mark a model as complete or incomplete

ember g controller todo

NOTE: The controller should extend Ember.ObjectController rather than Ember.Controller

View this step in the Ember.js Guide or on GitHub

Display the number of incomplete todos

View this step in the Ember.js Guide or on GitHub

Toggle between showing and editing states

View this step in the Ember.js Guide or on GitHub

Accept edits

ember g component edit-todo
rm app/templates/components/edit-todo.hbs

NOTE: The component should extend Ember.TextField rather than Ember.Component

View this step in the Ember.js Guide or on GitHub

Delete a model

View this step in the Ember.js Guide or on GitHub

Add child routes

ember g template todos/index

View this step in the Ember.js Guide or on GitHub

Transition to show only incomplete todos

ember g route todos/active
rm app/templates/todos/active.hbs

View this step in the Ember.js Guide or on GitHub

Transition to show only complete todos

ember g route todos/completed
rm app/templates/todos/completed.hbs

View this step in the Ember.js Guide or on GitHub

Transition back to show all todos

View this step in the Ember.js Guide or on GitHub

Display a button to remove all completed todos

View this step in the Ember.js Guide or on GitHub

Indicate when all todos are complete

View this step in the Ember.js Guide or on GitHub

Toggle all todos between complete and incomplete

View this step in the Ember.js Guide or on GitHub

Replace the fixture adapter with another adapter

npm install --save-dev ember-localstorage-adapter

View this step in the Ember.js Guide or on GitHub

Walkthrough

Check out Ryan LaBouve's screencast for a walkthrough of the entire process. He explains each step thoroughly and does not use any generators along the way.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)
• Bower
• Ember CLI
• PhantomJS

Installation

• git clone <repository-url> this repository
• change into the new directory
• npm install
• bower install

Running / Development

• ember server
• Visit your app at http://localhost:4200.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox