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

# Overview
Sometimes, we need to perform tasks that have to be repeated throughout an application, such as computing the square of a number or concatenating strings. Ember provides some built-in helpers that are very useful for performing such tasks. The following are some of the built-in helpers provided by Ember:


- The `{{on}}` helper is used to register an event listener for an element that’s within the scope of the current template. It can also be used to register an event listener for an element or a generic `EventTarget` outside the template’s control—for example, `document` or `window`. The following is a basic example of how the `{{on}}` helper can be used: 

  ```
  {{on "click" (addFunction 2 4)}}
  ```
 The example illustrates that when the element is clicked, the `addFunction` is invoked to sum the values `2` and `4`.

- The `{{concat}}` helper in Ember is used to concatenate multiple strings. Let’s look at an example to see how it works: 

  ```
  {{concat "Andrew " "Garfield"}}
  ```
  The example is self-explanatory. We pass two strings, `Andrew` and `Garfield`, to the `{{concat}}` helper. It concatenates the two strings into `Andrew Garfield`.


- The `{{get}}` helper is used to get the value with a given key: 

  ```
  {{get this.product "name"}}
  ```
  The example above is similar to writing `this.product.name`.

- The `{{hash}}` helper helps us to create a hash of the given key-value pairs. Let’s look at an example:

  ```
  @user = {{hash firstName="Andrew" 
  lastName="Garfield"}}
  ```
  In the above example, we create a hash of the `firstName` and `lastName` and store it inside the `user` variable.


- The `{{let}}` helper helps us to define a temporary variable inside of our template. Let’s look at an example:

  ```
  {{let (concat "Andrew " "Garfield") as |fullName|}}
  ```
  In the above example, we concatenate `Andrew` and `Garfield` as `Andrew Garfield` and store the result as a temporary variable inside `fullName`.


- The `{{if}}` helper is one of the most frequently used helpers in Ember. It works just like `if-else` statements in most other programming languages:

  ```
  {{if loginSuccessful 'Welcome' 'Error'}}
  ```
  If the user logs in successfully, `Welcome` will be displayed. Otherwise, `Error` will be displayed.


- The `{{unless}}` helper is the inverse of the `{{if}}` helper:

  ```
  {{unless loginSuccessful 'Error' 'Welcome'}}
  ```
  This means unless the login is successful, `Error` should be displayed. Once it’s successful, `Welcome` should be displayed.


- The `{{each}}` helper is also a frequently used helper in Ember. It’s just like a `for` loop that iterates over the contents of a list or an array and then prints them. Let’s look at an example:


   ```
   {{#each list as |item|}}
   <p>{{item.name}}</p>
   <p>{{item.price}}</p>
   {{/each}}
   ```
  In the example above, we iterate over the `list` and print the name and price of each item.


- The `{{array}}` helper helps us pass arrays directly from the template as an argument to the components:

  ```
  {{array `apple` `mango` `peach`}}
  ```
 In the example above, we create an array that contains fruits. We can pass this array to our components.

- The `{{in-element}}` helper allows us to render content into a DOM element that’s in some other location inside the page—for example, rendering a modal, tooltip, or a dropdown menu:

  ```
  {{in-element destinationElement}}
  ```
  We provide the destination element to the `{{in-element}}` helper. In other words, we provide the location of where to render the content to the helper.

Learn about built-in helper functions in Ember and how to use them.

Built-in Helper Functions

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

Built-in Helper Functions

Overview