Summary  
Demonstrates a standardized project structure that organizes configuration files, source code entry points, modules, and global styles to streamline code management and build processes.

General domain of usage  
Web application development


When you create a project using **Angular CLI**, it generates a well-organized **folder** and **file structure**. This structure plays a crucial role in organizing **code**, making development more **efficient** and **scalable**.

You'll explore the **key folders** and **files** that are automatically created when you set up a new **Angular project**.

# Project Structure

When you run the command `ng new angular-app`, **Angular CLI** generates the following **structure**:

📂 `src/` – **Application Source Code**.

This folder contains the **core files** and **configurations** required for your **Angular application**.

# Running an Angular Application

To launch your **Angular app**, first, open the **terminal**. In **VS Code**, you can use these shortcuts:

- **macOS**: `Cmd + J` or `` Cmd + ` ``;

- **Windows**: `Ctrl + J` or `` Cmd + ` ``.

Alternatively, go to **View** → **Terminal** from the top menu.

Now, run the following **command**:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input
        type="text"
        class="text-field"
        id="widget1-text"
        value="ng serve
"
      />
      
      <button
        class="copy-button"
        onclick="handleClick('widget1-text', 'widget1-notify')"
      >
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

This **command** compiles the **project** and starts a local **development server**. Once the process is complete, the **terminal** will display a message with a **URL**:

Open the **URL** (`http://localhost:4200/`) in your **browser**, and you'll see the **Angular welcome page**.

What is the main purpose of the `src` folder in an Angular project?

What is the role of `package.json` in an Angular project?


Explore Angular, a powerful framework for building dynamic web applications. Learn about components, data binding, directives, pipes, services, modules, and routing while setting up projects and creating interactive, well-structured applications.

Angular Project Structure

Project Structure

Application Code

Configuration Files

Additional Files

Running an Angular Application

1. What is the main purpose of the `src` folder in an Angular project?

2. What is the role of `package.json` in an Angular project?