apiKey

authDomain

databaseURL

projectId

storageBucket

messagingSenderId

appId

Gain insights into Ember.js, explore templates, components, routing, and testing. Delve into building a complete e-commerce app and integrate with Firebase to leverage Ember's features robustly.

tarball.tar.gz

FirstApp

templateIntro

stylingtemplate

addingbootstrap

completehomepage

Challenge

Settinguproutes

Modifyingroutes

notfoundroute

nestedroutes

dynamicroutes

categoryroute

addroute

components

controller

Firebase

helpers

services

tests

Ember.js is a JavaScript framework for building scalable web applications with discrete components.

In this course, practicing JavaScript developers will be introduced to the Ember.js framework. You’ll start by setting up Ember and creating a project application. You’ll continue with the building blocks of Ember.js, including templates, components, routing, services, helpers, Ember Data, and testing. You’ll then use the components to build a complete e-commerce application from scratch. Each lesson will add more depth and functionality to your application with hands-on exercises. Finally, you’ll integrate the application with Firebase.

By the end of the course, you’ll be prepared to leverage Ember’s key features to develop robust web applications.

Developing Robust Web Applications with Ember.js

Ember **components** allow us to convert markup text and styles into reusable code. Other than the resusability perspective, components also help us organize our code. Components can also be reused across different applications. Ember components are made up of two files: a Handlebars template file and a JavaScript component file. The Handlebars template is an `hbs` file that contains the UI of that component. The JavaScript component file handles all the events on that UI.

# Creating a component
There are two ways to create components. We can create components manually by adding the files in `app/components`, or we can run the following Ember CLI command:
```
ember g component <component-name>
```
Components must have a `-` in their name to avoid a clash with HTML element names. The command above creates an `hbs` file in `app/components` and a test file in `tests/integration/components`.

In most cases, we only need to reuse a UI component. However, to handle its events, we need to create the JavaScript file of that component by running the following command:
```
ember g component-class <component-name>
```
This creates a JavaScript component file in `app/components`.

Let’s create a test component by running the following command. Then, we’ll render it inside our template:
```
ember g component test-comp
```
The command above generates a `test-comp.hbs` file in `app/component`. Let’s open it in the code widget and add some content to it:


Introduction to Components

Course Overview

Getting Started with Ember

Templates in Ember

Routing in Ember

Nested Routing

Components in Ember

Controllers in Ember

Ember Data

Integration with Firebase

Helpers

Services in Ember

Testing in Ember

Conclusion

Ember.js Assessment

Introduction to Components