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

# Adding assets to our build

While building our application, Ember CLI bundles all the required JavaScript files and application code into one big ball. This big ball is named after the project name. The same procedure is followed for the CSS files. Ember uses a package called **Broccoli** to bundle our assets. The `ember-cli-build.js` file contains the configuration for Broccoli.
 




We can add assets to our application in the following ways:
- We can use Ember addons.
- We can use the npm package manager.
- We can use the Bower package manager.



## Ember addons

Ember **addons** are simple JavaScript packages that are compatible with Ember. We can install any addon by using the following command:
```
$ ember install <package-name>
```

Installing any package modifies our `package.json` and `ember-cli-build.js` files. Some packages can also add additional files to our project.

It can be challenging to find an addon that meets our requirements, so Ember has provided us with a website named [Ember Observer](https://www.emberobserver.com/) to index Ember addons.



## The npm package manager
We can also install npm packages directly in our Ember application using the following command:
```
$ npm install <package-name>
```

Our application consists of a manifest asset file named `ember-cli-build.js` that’s responsible for including such assets.


## Bower package manager

We can include different packages in our application using the Bower package manager. **Bower** can be used to install packages that aren’t included in Ember addons.

We can still use `bower_components`, but it’s recommended not to use them unless we have no other choice. We can install Bower components using the following command:


```
$ bower install <package-name>
```  
After installing a Bower package, we should import it into our `ember-cli-build.js` file.


# Installing Bootstrap
Ember addons are the simplest way to go, so we’ll install Bootstrap in our application using Ember addons. **Bootstrap** is a CSS framework that’s used to design and customize responsive, mobile-friendly web applications.

To install Bootstrap, we need to run the following command:
```
$ ember install ember-bootstrap
```
Running this command changes the `package.json` and `ember-cli-build.js` files. It adds the `ember-bootstrap` package in our `package.json` file and some configurations in our `ember-cli-build.js` file.  
The changes in the `ember-cli-build.js` file after we add Bootstrap are given below:


Learn how to add assets to an Ember application using different package managers.

Adding Bootstrap in Our Application

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

Adding Bootstrap in Our Application

Adding assets to our build