Ember.js: Quick Start

Build a simple web app with
Ember
¹
.

Source

• GitHub

Dependencies

Required

• npm

1. Install Ember CLI

2. Create a new application

NOTE

Visit localhost:4200 to see Ember's welcome page.

2.1. Write some HTML in a template

NOTE

Re-visit localhost:4200 to see PeopleTracker heading.

3. Define a route

3.1. Generate route

3.2. Edit template

NOTE

Visit localhost:4200/scientists to see List of Scientists heading.

3.3. Edit route

3.4. Re-edit template

NOTE

Re-visit localhost:4200/scientists to see an unordered list of scientists.

4. Create a UI component

4.1. Create a component

NOTE

Use -gc to create a
Glimmer
²
component.

4.2. Edit component

4.3. Edit template

4.4. Respond to user interaction

4.4.1. Edit component

4.4.2. Edit component class

4.4.3. Re-edit component

NOTE

• Re-visit localhost:4200/scientists to see unordered list buttons of scientists
• Clicking a button alerts its corresponding scientist's full name

5. Build for production

NOTE

The bundle is generated to dist/ directory.

References

• Quick Start
• Ember
  ¹
• Glimmer
  ²