Ember.js: Ember anatomy

Anatomy of an Ember app.


Flow

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.

Router

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

  • 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

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

Components

  • 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

References

Show Comments