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:
- Loads the model
- 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