Ember.js: Ember anatomy

Anatomy of an Ember app.


Flow Concept File or Path Description
URL /scientists A web address.
Router app/router.js Map URL to a route handler.
Route Handler app/routes/scientists.js Load model and its template.
→ ↑ Model app/models/scientist.js Persist to a web server or the browser's Local Storage.
Template app/templates/scientists.hbs Load model data and its components.
→ ↑ Component app/components/people-list.hbs app/components/people-list.js Pieces of the template.


The first action in Ember is for the router to map the URL to a route handler.

Route handlers

The route handler then:

  1. Loads the model
  2. Renders the template with its model data


  • Models represent persistent state
  • These models are persisted to/from a web server or the browser's Local Storage
  • By default, uses a model layer called Ember Data to manage a local cache of data


  • Templates are used to build up user interfaces of the application
  • Uses a templating library called Handlebars to define UI elements


  • Components are self-contained, organizable and reusable pieces of a template
  • These pieces are referred to by PascalCased names
  • These can be customized thru arguments and rendered on specific contexts


Show Comments