Explain the directory structure in Ember.js

Ember.js framework is designed to be used in large-scale, complex applications that require a robust and maintainable codebase. Ember.js uses the Model-View-Controller (MVC) design pattern, which separates an application into three main components: the model, which represents the data of the application; the view, which is the user interface of the application; and the controller, which handles user input and interactions. Ember.js offers a number of features to help developers build web applications quickly and efficiently. These include:

• A powerful routing system that allows developers to define the URL structure of the application and determine which view should be displayed for a given URL.
• A Handlebars-based templating system that allows developers to easily create dynamic, reusable user interfaces.
• A data management system that automatically updates the user interface when the underlying data changes.
• A command-line interface (CLI) that provides a set of tools for creating, building, and managing Ember.js applications.

Overall, Ember.js is a powerful and flexible framework for building modern web applications. It is used by many large organizations, including LinkedIn, Netflix, and Apple Music.

Directory structure in Ember.js: In Ember.js, the directory structure is designed to reflect the MVC pattern, with a clear separation of concerns between the different components of the application. Here is a brief overview of the directory structure in Ember.js:

• app: This is the top-level directory for the Ember.js application. It contains the main JavaScript files for the application, as well as the CSS stylesheets and image assets.
• app/components: a component is a reusable piece of UI that encapsulates templates, logic, and styles. Components can be used to define custom elements that can be used in your application’s templates
• app/models: This directory contains the model classes for the application. These classes define the data structure and behavior of the application’s data.
• app/controllers: This directory contains the controller classes for the application. These classes handle user input and interactions, and mediate between the model and the view.
• app/helper: In Ember.js, a helper is a function that returns a value or performs some computation that can be used in a template
• app/routes: This directory contains the route classes for the application. These classes define the URL structure of the application, and determine which view should be displayed for a given URL.
• app/templates: This directory contains the Handlebars templates for the application. These templates are used to render the HTML for the application’s views.
• app/styles: This directory contains the view classes for the application. These classes define the user interface of the application, including the HTML templates and the associated JavaScript code.

Steps to Install and Run Ember.js:

Step 1: To create and run an Ember.js project, you will need to have Node.js and the Ember CLI (Command Line Interface) installed on your machine. Here are the steps to create and run an Ember.js project:

• Open your terminal or command prompt and navigate to the directory where you want to create your project.
• Run the following command to install the Ember CLI:

npm install -g ember-cli

Step 2: Run the below command to create a new Ember.js project:

ember new my-project

Step 3: Replace “my-project” with the name you want to give to your project. This will create a new directory with the specified name and generate the basic file structure and configuration files for your Ember.js project.

• Navigate to the project directory:

cd my-project

• Run the below command to start the development server:

ember serve 

This will start the development server and compile your Ember.js project. The project will be available at http://localhost:4200 in your web browser. To stop the development server, press “CTRL + C” in your terminal or command prompt. You can now start developing your Ember.js project by modifying the files in the “app” directory and adding routes, components, and templates as needed. When you make changes to the code, the development server will automatically recompile and refresh the page in your web browser.

Example: This example defines a route, controller, and template for a page in an Ember.js application. The route defines a model function that returns an array of party items. It also has a setupController function that sets the party items array and the lens variable on the controller. The controller has several action functions that can be triggered by user interactions in the template. For example, the show_first_Item action displays an alert with the first item in the partyItems array, and the print_except_this_items action displays an alert with all items in the party items array except for the one specified in the data argument. 

The template displays a list of party items and has several buttons that trigger the action functions in the controller when clicked. It also has an input field and a button that allow the user to enter an item and remove it from the list.

Type the below command into you terminal or windows command  to generate the route for this example:

ember generate route test1

Project structure: It will look like the following.

app/routes/test1.js

Javascript

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

export default class StudentsRoute extends Route {
    partyItems = [
        'Digital Camera',
        'Jugs, cups & straws',
        'Balloons',
        'Scissors',
        'Cold Drink',
        'Table Confetti',
        'Party Hats',
        'Wine',
        'Napkins',
        'Party Plates',
        'Speakers',
        'Music System',
        'Cups',
    ];
    len;
    model() {
        return this.partyItems;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set("partyItems", this.partyItems);
        controller.set("len", this.len);
        controller.set("item", this.item);
    }
}

app/controllers/test1.js

Javascript

import Ember from "ember";

export default Ember.Controller.extend({
    actions: {
        show_first() {
            let ans = this.partyItems.get('firstObject');
            alert(ans)
        },
        show_last() {
            let ans = this.partyItems.get('lastObject');
            alert(ans)
        },
        show_len() {
            let S_len = this.partyItems.length;
            this.set('len', S_len)
            alert('Length of List is ' + this.len);
        },
        check_items(data) {
            let temp = this.partyItems.without(data)
            alert(temp.join('\n'))
        },
        show() {
            let temp = this.partyItems.get('[]');
            alert(temp.join('\n'))
        },

    },
});

app/templates/test1.hbs

Javascript

{{page-title "[ ]"}}
<h3>List of Items: </h3>
<table>
    <ul>
        {{#each @model as |student|}}
              <li>{{student}}</li>
        {{/each}}
      </ul>
</table>
<br /><br />
<div>
    <label>Enter Item: </label>
      {{input value=this.temp}}
</div>
<input
    type="button"
      id="check-atIndex"
      value="Print Except this Item"
      {{action "check_items" this.temp}}
/>
<br /><br />
<input
    type="button"
      id="show-item"
      value="Pop up All Items"
      {{action "show"}}
/>
<br /><br />
<input
    type="button"
      id="first-item"
      value="Show First Item"
      {{action "show_first"}}
/>
<br /><br />
<input
    type="button"
      id="show-item2"
      value="Show Last Item"
      {{action "show_last"}}
/>
<br /><br />
<input
    type="button"
      id="print-list"
      value="Print length of List"
      {{action "show_len"}}
/>
{{outlet}}

Output: Visit localhost:4200/test1 to view the output