What is Ember.js with example step by step?

Ember.js is an open-source JavaScript framework that is used for building scalable and high-performance web applications. It follows the Model-View-Controller (MVC) architectural pattern and provides a set of conventions that make it easy for developers to build complex web applications quickly.

Here is an example of building a simple Ember.js application step by step:

Step 1: Create a new Ember.js application

To create a new Ember.js application, run the following command in your terminal:

ember new my-app

This will create a new Ember.js application in a directory named my-app.

Step 2: Create a new route

To create a new route, run the following command in your terminal:

ember generate route my-route

This will create a new route named my-route and generate the necessary files.

Step 3: Add a template

To add a template for the my-route route, create a new file named my-route.hbs in the templates directory and add the following code:

<h1>Hello, world!</h1>

Step 4: Define a model

To define a model for the my-route route, open the my-route.js file in the routes directory and add the following code:

import Route from '@ember/routing/route';

export default class MyRouteRoute extends Route {
  model() {
    return ['Alice', 'Bob', 'Charlie'];
  }
}

This will define a model that returns an array of names.

Step 5: Update the template

To update the my-route.hbs template to display the list of names, add the following code:

<h1>Hello, world!</h1>

<ul>
{{#each model as |name|}}
  <li>{{name}}</li>
{{/each}}
</ul>

This will use the {{each}} helper to iterate over the array of names and display them in a list.

Step 6: Start the server

To start the Ember.js server, run the following command in your terminal:

ember serve

This will start the server at http://localhost:4200 and you should see the Hello, world! heading and the list of names when you visit http://localhost:4200/my-route.

That’s it! You have now created a simple Ember.js application that displays a list of names. This is just the beginning, and there is a lot more you can do with Ember.js.