An Ember application is composed of a set of core elements with well-defined responsibilities and properties. They are defined under the Ember and DS namespaces of the Ember API.
This diagram depicts the high-level structure of an Ember application:
A router manages the application state. It maps a set of logical routes against unique URLs as mapped in the router configuration.
A route handler, also known as a route (defined in Ember.Route
), represents the handler for an individual route transition. A route can render a template that displays a screen. A route provides a model (data) that can be consumed by its template and controller. It has a corresponding controller that can handle user actions and maintain the state. A route can handle user actions by itself.
Templates are HTML fragments, usually rendered by routes and components. The user interface of an Ember application is composed of a collection of templates. Templates use the Handlebars syntax, which looks like regular HTML with some Handlebars expressions, which are enclosed in double curly braces ({{ }}
). These Handlebars expressions bind Ember resources such as properties, objects, helpers, and components.
Components control the behavior of the user interface. They handle user actions and manage many attributes that are used by the templates. A component consists of two parts:
Ember.Component
, where the actions and attributes are definedPart of the Ember Data project, models represent the state of domain data in an Ember application. An Ember application will typically have a set of models extending from DS.Model
. Routes usually display model data with the help of templates and modify data from the action handlers. Models are often loaded from a store (DS.Store
), while Model instances are fetched from the actual persistent storage, mostly an API endpoint on the web server. Models can be persisted to the store; usually, they are sent back to the appropriate API endpoints.
Controllers have a limited role in modern Ember applications; they will be deprecated in future versions. Currently, their use is limited to maintaining the state for a route and handling user actions. Since routes and components can handle actions, they are the perfect places for adding action handlers instead of controllers.
Besides these core elements, there are some supporting components that help the application development be easier and more elegant.
These are ready-made components bundled with Ember for taking inputs from users. Most of them are Ember versions of general form controls. Examples are the {{input}}
and {{textarea}}
input helpers. Custom-developed components can be used similarly to input helpers.
Helpers add custom functionality to an application when they are not readily available, for using inside templates. Mostly, they are used for some kind of formatting. Examples are {{format-date}}
and {{format-currency}}
.