Summary  
This chapter explains the structure of an Angular project by outlining its key folders and configuration files, and shows how the application is bootstrapped and served using Angular CLI.  

General domain of usage  
Frontend 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?


Discover how to build modern web applications using Angular, one of the most powerful frontend frameworks. You'll start with the core concepts, set up your development environment, and gradually move on to building dynamic, interactive components. Along the way, you'll work with directives, services, routing, and the latest approach with Standalone Components. With each step, you'll gain practical skills to confidently develop and organize Angular applications following industry best practices.

Discover the core concepts of Angular and how it simplifies web development. Learn about its key principles, evolution, and how to set up the necessary tools to start building applications.

Discover the fundamentals of components and templates in Angular, including how they are created, structured, and interact with each other to build dynamic, data-driven applications.

Dive into Angular's directives and pipes to learn how they make your templates smarter and your data cleaner. Discover how to control DOM behavior with directives and transform displayed data with powerful, built-in or custom pipes.

Learn how to organize and reuse logic in your Angular applications using services. You'll discover how to create services and inject them into components with Angular's built-in Dependency Injection system. This keeps your code clean, modular, and easier to maintain.

Learn how Angular applications used to rely on modules and discover why the framework is now embracing a more flexible approach with Standalone Components. Dive into the structure of NgModules, understand their key elements, and explore when and how to use Standalone Components in modern Angular development.

Learn how Angular handles routing and navigation to build dynamic single-page applications. In this section, you'll discover how to define routes and navigate between views using Angular's built-in tools.

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?

Awesome!

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?

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?

Awesome!

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?

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?

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?