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

# Homepage 
In an e-commerce website, a home page normally consists of eye-catching banners, product categories, featured products, and product promotion ads. It also has a navbar to navigate through the store, a search bar to search products, and a footer. Our home page will have the following UI components:

- **Navbar**: The navbar contains the links to the following routes:
  - The home page route
  - The admin page route
  - The cart page route


- **Image/carousel:** This component makes elements more presentable. 

- **Categories:** These allow the users to view products by category.

# The `index` template
Before adding these components, we first need to understand the `index` template. Every route in the Ember application has an `index` route that can have an `index` template. Let’s understand this with our use case. We have an `application` route and template that act as our homepage. Now, we want to add a navbar to our home page. Our navbar should be visible on all our routes. To implement this, we need the `application` route’s `index` template. Let’s render our navbar in the `application.hbs` template. All the other things will go in the `index.hbs` template. Now, let’s implement this.

# Creating a home page
We add the following code in our `application.hbs` file to add the navbar:


Learn to design the home page of our e-commerce application.

Making Our Application's Home Page

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

Making Our Application's Home Page

Homepage