EmberJS Core Concepts

Ember.js has the following core concepts −

  • Router
  • Templates
  • Models
  • Components

Router and Route Handlers

. The URL loads the app by entering the URL in the address bar and user will click a link within the app. The Ember uses the router to map the URL to a route handler.

The URL can be set in a few different ways:

  • The user loads the app for the first time.
  • The user changes the URL manually by clicking the back button or by editing the address bar.
  • The user clicks a link within the app.
  • Some other event in the app causes the URL to change.

The Route handler performs the following actions −

  • It provides the template.

  • It defines the model that will be accessible to the template.

  • If there is no permission for the user to visit a particular part of the app, then the router will redirect to a new route.


Templates are powerful UI for the end-users. Ember template provides user interface look of an application which uses the syntax of Handlebars templates
Similar to Angular, Ember.js uses templates to organize the layout of HTML in an application. Most templates in an Ember codebase are instantly familiar, and look like any fragment of HTML. For example:

<div>Hi, this is a valid Ember template!</div>


Models represent persistent state.

The route handlers render the model that persists information to the web server. It manipulates the data stored in the database. The model is the simple class that extends the functionality of the Ember Data. Ember Data is a library that is tightly coupled with Ember.js to manipulate with the data stored in the database.


The component controls the user interface behavior which includes two parts −

  • a template which is written in JavaScript

  • a source file which is written in JavaScript that provides behavior of the components.